Mistral Mistral Medium 3.5 – Style and Fashion
via Mistral · Generated
- AIMAC Debt 11.00
- Cost $0.08
- Total Violations 18
- HTML Size 35 KB
- Em Dashes 0
Screenshot
View Live Page
Accessibility Issues Found
18 Serious
-
color-contrast serious 10 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#" class="font-bold accent-color hover:underline">Read More</a> -
link-name serious 7 instances
Links must have discernible text
Example HTML
<a href="#" class="hover:text-accent-color transition-colors"> -
scrollable-region-focusable serious 1 instance
Scrollable region must have keyboard access
Example HTML
<div class="space-y-3 max-h-96 overflow-y-auto scroll-container">
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Éclat Mode | Redefining Fashion with Timeless Elegance</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Lato', sans-serif;
color: #333;
}
h1, h2, h3, h4, .font-serif {
font-family: 'Playfair Display', serif;
}
.accent-color {
color: #d4a373;
}
.bg-accent-color {
background-color: #d4a373;
}
.border-accent-color {
border-color: #d4a373;
}
.bg-dark-mute {
background-color: #2c2c2c;
}
.wardrobe-item {
transition: transform 0.3s ease;
}
.wardrobe-item:hover {
transform: scale(1.05);
}
.testimonial-card {
flex: 0 0 90%;
}
@media (min-width: 768px) {
.testimonial-card {
flex: 0 0 45%;
}
}
@media (min-width: 1024px) {
.testimonial-card {
flex: 0 0 30%;
}
}
.scroll-container::-webkit-scrollbar {
display: none;
}
.scroll-container {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-white">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<img src="https://placehold.co/40x40/000000/FFFFFF?text=EM" alt="Éclat Mode Logo" class="h-10 w-10">
<div>
<a href="#" class="text-2xl font-bold font-serif tracking-tight">Éclat Mode</a>
<p class="text-xs text-gray-500 tracking-widest">REDEFINING FASHION</p>
</div>
</div>
<nav class="hidden lg:flex items-center space-x-8">
<a href="#" class="text-sm font-bold tracking-wider uppercase hover:text-accent-color transition-colors">Home</a>
<a href="#" class="text-sm font-bold tracking-wider uppercase hover:text-accent-color transition-colors">Magazine</a>
<a href="#" class="text-sm font-bold tracking-wider uppercase hover:text-accent-color transition-colors">Looks</a>
<a href="#" class="text-sm font-bold tracking-wider uppercase hover:text-accent-color transition-colors">Designers</a>
<a href="#" class="text-sm font-bold tracking-wider uppercase hover:text-accent-color transition-colors">Trends</a>
<a href="#" class="text-sm font-bold tracking-wider uppercase hover:text-accent-color transition-colors">Beauty</a>
<a href="#" class="text-sm font-bold tracking-wider uppercase hover:text-accent-color transition-colors">About</a>
</nav>
<div class="flex items-center space-x-4">
<a href="#" class="hover:text-accent-color transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
</a>
<a href="#" class="hover:text-accent-color transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
</a>
<a href="#" class="hover:text-accent-color transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
</a>
</div>
<button class="lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /></svg>
</button>
</div>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="relative h-[80vh] min-h-[600px] bg-cover bg-center text-white" style="background-image: url('https://picsum.photos/1920/1080?grayscale&blur=2');">
<div class="absolute inset-0 bg-black opacity-40"></div>
<div class="relative container mx-auto px-6 h-full flex items-center">
<div class="max-w-2xl">
<p class="text-sm font-bold tracking-widest uppercase">SPRING/SUMMER 2025</p>
<h1 class="text-5xl md:text-7xl font-bold my-4 leading-tight">The Art of Effortless Style</h1>
<p class="text-lg mb-8">Discover the season's most coveted looks, curated by our editorial team. From haute couture to everyday capsule wardrobe essentials, Éclat Mode is your guide to timeless elegance.</p>
<div class="flex space-x-4">
<a href="#" class="bg-accent-color text-white px-8 py-3 font-bold tracking-wider uppercase hover:bg-opacity-90 transition-all">Explore Collection</a>
<a href="#" class="border-2 border-white text-white px-8 py-3 font-bold tracking-wider uppercase hover:bg-white hover:text-black transition-all">Watch Show</a>
</div>
</div>
</div>
</section>
<!-- Intro Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-4xl font-bold mb-4">Where Fashion Meets Inspiration</h2>
<p class="max-w-3xl mx-auto text-gray-600 leading-relaxed">
At Éclat Mode, we believe fashion is more than just clothing; it's a form of self-expression, a narrative of culture, and a celebration of individuality. Our mission is to bring you the latest from the runways of Paris, Milan, and New York, translated into accessible, wearable art. Whether you're seeking the perfect statement piece or building a sustainable capsule wardrobe, our expert stylists and designers are here to guide you.
</p>
</div>
</section>
<!-- Seasonal Trends Section -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold">Seasonal Trends</h2>
<p class="text-gray-500 mt-2">Curated by our editorial team</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="bg-white rounded-lg overflow-hidden shadow-md group">
<img src="https://picsum.photos/600/400?grayscale" alt="Bold Silhouettes" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Bold Silhouettes</h3>
<p class="text-gray-600 mb-4">This season, designers are embracing volume and structure. Think oversized blazers, puff-sleeve dresses, and wide-leg trousers that make a statement.</p>
<a href="#" class="font-bold accent-color hover:underline">Read More</a>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white rounded-lg overflow-hidden shadow-md group">
<img src="https://picsum.photos/600/400?grayscale" alt="Earthy Tones" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Earthy Tones</h3>
<p class="text-gray-600 mb-4">A palette inspired by nature dominates the runways. From warm terracotta to soft sage, these hues bring a sense of calm and sophistication to any look.</p>
<a href="#" class="font-bold accent-color hover:underline">Read More</a>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white rounded-lg overflow-hidden shadow-md group">
<img src="https://picsum.photos/600/400?grayscale" alt="Luxurious Textures" class="w-full h-64 object-cover">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Luxurious Textures</h3>
<p class="text-gray-600 mb-4">Texture is key this year. Look for rich fabrics like velvet, corduroy, and brocade to add depth and interest to your capsule wardrobe.</p>
<a href="#" class="font-bold accent-color hover:underline">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Interactive Wardrobe Planner -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold">Build Your Capsule Wardrobe</h2>
<p class="text-gray-500 mt-2">Mix and match essential pieces for endless style possibilities</p>
</div>
<div class="bg-gray-50 p-8 rounded-lg shadow-lg">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/3">
<h3 class="text-2xl font-bold mb-4">Wardrobe Essentials</h3>
<p class="text-gray-600 mb-6">Drag items to the canvas to create your perfect look. A well-curated capsule wardrobe is the foundation of great style.</p>
<div class="space-y-3 max-h-96 overflow-y-auto scroll-container">
<div class="wardrobe-item bg-white p-3 rounded-md shadow-sm border cursor-grab flex items-center space-x-3" draggable="true">
<img src="https://placehold.co/50x50/cccccc/333333?text=T" alt="White T-Shirt" class="w-12 h-12 rounded">
<span>Classic White Tee</span>
</div>
<div class="wardrobe-item bg-white p-3 rounded-md shadow-sm border cursor-grab flex items-center space-x-3" draggable="true">
<img src="https://placehold.co/50x50/1a1a1a/ffffff?text=B" alt="Black Blazer" class="w-12 h-12 rounded">
<span>Tailored Black Blazer</span>
</div>
<div class="wardrobe-item bg-white p-3 rounded-md shadow-sm border cursor-grab flex items-center space-x-3" draggable="true">
<img src="https://placehold.co/50x50/4a90e2/ffffff?text=J" alt="Blue Jeans" class="w-12 h-12 rounded">
<span>Dark Wash Jeans</span>
</div>
<div class="wardrobe-item bg-white p-3 rounded-md shadow-sm border cursor-grab flex items-center space-x-3" draggable="true">
<img src="https://placehold.co/50x50/ffffff/333333?text=S" alt="White Sneakers" class="w-12 h-12 rounded">
<span>White Sneakers</span>
</div>
<div class="wardrobe-item bg-white p-3 rounded-md shadow-sm border cursor-grab flex items-center space-x-3" draggable="true">
<img src="https://placehold.co/50x50/000000/ffffff?text=D" alt="Black Dress" class="w-12 h-12 rounded">
<span>Little Black Dress</span>
</div>
<div class="wardrobe-item bg-white p-3 rounded-md shadow-sm border cursor-grab flex items-center space-x-3" draggable="true">
<img src="https://placehold.co/50x50/d4a373/ffffff?text=C" alt="Cashmere Sweater" class="w-12 h-12 rounded">
<span>Cashmere Sweater</span>
</div>
</div>
</div>
<div class="md:w-2/3 bg-white rounded-lg p-8 min-h-[400px] border-2 border-dashed border-gray-300 relative" id="wardrobe-canvas">
<p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-gray-400 text-center">Drag and drop items here<br>to build your look.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Runway Reports -->
<section class="py-20 bg-dark-mute text-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold">Runway Reports</h2>
<p class="text-gray-400 mt-2">Exclusive coverage from the world's fashion capitals</p>
</div>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<img src="https://picsum.photos/800/600?grayscale" alt="Paris Fashion Week" class="rounded-lg shadow-lg w-full">
</div>
<div>
<h3 class="text-3xl font-bold mb-4">Paris Haute Couture Week: A Symphony of Craftsmanship</h3>
<p class="text-gray-300 leading-relaxed mb-6">
The recent Paris Haute Couture Week was a testament to the enduring allure of handcrafted luxury. Designers like Chanel and Dior presented collections that were a masterclass in meticulous detail, from intricate embroidery to innovative fabric manipulations. The runways were a celebration of artistry, where each garment told a story of hours of dedication and unparalleled skill.
</p>
<p class="text-gray-300 leading-relaxed mb-6">
One of the standout trends was the use of sustainable materials. Houses are increasingly turning to eco-conscious fabrics and upcycling techniques, proving that haute couture can be both extravagant and environmentally responsible.
</p>
<a href="#" class="bg-accent-color text-white px-8 py-3 font-bold tracking-wider uppercase hover:bg-opacity-90 transition-all inline-block">View Full Report</a>
</div>
</div>
</div>
</section>
<!-- Sustainable Fashion -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold">Sustainable Fashion</h2>
<p class="text-gray-500 mt-2">Style that doesn't cost the Earth</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="text-center p-4">
<img src="https://placehold.co/100x100/228B22/FFFFFF?text=♻" alt="Recycled Icon" class="mx-auto mb-4 h-20 w-20">
<h4 class="font-bold text-lg mb-2">Recycled Materials</h4>
<p class="text-gray-600 text-sm">From plastic bottles to discarded fishing nets, innovative brands are turning waste into wearable art.</p>
</div>
<div class="text-center p-4">
<img src="https://placehold.co/100x100/8B4513/FFFFFF?text=🌿" alt="Organic Icon" class="mx-auto mb-4 h-20 w-20">
<h4 class="font-bold text-lg mb-2">Organic Fabrics</h4>
<p class="text-gray-600 text-sm">Cotton, linen, and hemp grown without harmful pesticides are softer on your skin and the planet.</p>
</div>
<div class="text-center p-4">
<img src="https://placehold.co/100x100/4682B4/FFFFFF?text=✂" alt="Upcycled Icon" class="mx-auto mb-4 h-20 w-20">
<h4 class="font-bold text-lg mb-2">Upcycled Designs</h4>
<p class="text-gray-600 text-sm">Giving old garments new life, upcycling reduces textile waste and creates one-of-a-kind pieces.</p>
</div>
<div class="text-center p-4">
<img src="https://placehold.co/100x100/556B2F/FFFFFF?text=🌱" alt="Biodegradable Icon" class="mx-auto mb-4 h-20 w-20">
<h4 class="font-bold text-lg mb-2">Biodegradable</h4>
<p class="text-gray-600 text-sm">Innovative materials that break down naturally, leaving no trace behind.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold">What Our Readers Say</h2>
</div>
<div class="flex overflow-x-auto space-x-8 pb-4 scroll-container snap-x snap-mandatory">
<!-- Testimonial 1 -->
<div class="testimonial-card snap-center bg-white p-8 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://i.pravatar.cc/60?u=emily" alt="Emily Carter" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="font-bold text-lg">Emily Carter</h4>
<p class="text-sm text-gray-500">Fashion Blogger</p>
</div>
</div>
<p class="text-gray-600 italic">"Éclat Mode is my go-to source for fashion inspiration. Their runway reports are insightful, and their sustainable fashion guides have completely changed how I shop. I love the wardrobe planner tool!"</p>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card snap-center bg-white p-8 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://i.pravatar.cc/60?u=james" alt="James Whitmore" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="font-bold text-lg">James Whitmore</h4>
<p class="text-sm text-gray-500">Men's Style Consultant</p>
</div>
</div>
<p class="text-gray-600 italic">"The depth of content on Éclat Mode is unmatched. As a stylist, I rely on their trend analysis to keep my clients ahead of the curve. The 'Seasonal Trends' section is a goldmine."</p>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card snap-center bg-white p-8 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://i.pravatar.cc/60?u=sophia" alt="Sophia Laurent" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="font-bold text-lg">Sophia Laurent</h4>
<p class="text-sm text-gray-500">Luxury Brand Manager</p>
</div>
</div>
<p class="text-gray-600 italic">"The editorial quality is exceptional. Éclat Mode doesn't just report on fashion; it tells the stories behind the designs, the designers, and the cultural movements shaping our industry."</p>
</div>
</div>
</div>
</section>
<!-- Sidebar Content (New Arrivals) -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="grid lg:grid-cols-4 gap-12">
<div class="lg:col-span-3">
<h2 class="text-4xl font-bold mb-4">Beauty & Accessories</h2>
<p class="text-gray-600 leading-relaxed mb-8">
Completing any look is about the details. This season, beauty is all about the 'no-makeup makeup' look, with a focus on healthy, glowing skin. Accessories are bold and statement-making, with chunky jewelry and oversized bags taking center stage. Our beauty editors have curated the ultimate guide to achieving the perfect finish, from skincare routines to the must-have makeup palettes.
</p>
<div class="grid md:grid-cols-2 gap-8">
<div>
<img src="https://picsum.photos/600/400?grayscale" alt="Beauty Products" class="rounded-lg mb-4 w-full">
<h3 class="text-2xl font-bold mb-2">The Glow-Up Guide</h3>
<p class="text-gray-600 mb-4">Achieve radiant skin with our top picks for serums, moisturizers, and masks. We've tested hundreds of products to bring you the very best.</p>
<a href="#" class="font-bold accent-color hover:underline">Get Beauty Tips</a>
</div>
<div>
<img src="https://picsum.photos/600/400?grayscale" alt="Accessories" class="rounded-lg mb-4 w-full">
<h3 class="text-2xl font-bold mb-2">Accessories That Elevate</h3>
<p class="text-gray-600 mb-4">From the perfect scarf to the statement belt, discover the accessories that will take your outfit from ordinary to extraordinary.</p>
<a href="#" class="font-bold accent-color hover:underline">Shop Accessories</a>
</div>
</div>
</div>
<aside class="lg:col-span-1">
<div class="bg-gray-50 p-6 rounded-lg">
<h3 class="text-2xl font-bold mb-4 border-b pb-2">New Arrivals</h3>
<div class="space-y-6">
<div class="flex items-center space-x-4">
<img src="https://placehold.co/80x80/333333/FFFFFF?text=D" alt="Designer Dress" class="w-20 h-20 rounded object-cover">
<div>
<h4 class="font-bold">Valentino Rockstud Dress</h4>
<p class="text-sm text-gray-500">$2,495</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img src="https://placehold.co/80x80/8B4513/FFFFFF?text=B" alt="Designer Bag" class="w-20 h-20 rounded object-cover">
<div>
<h4 class="font-bold">Gucci Jackie Bag</h4>
<p class="text-sm text-gray-500">$3,200</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img src="https://placehold.co/80x80/C0C0C0/333333?text=S" alt="Designer Shoes" class="w-20 h-20 rounded object-cover">
<div>
<h4 class="font-bold">Prada Pointed Pumps</h4>
<p class="text-sm text-gray-500">$890</p>
</div>
</div>
</div>
<a href="#" class="block text-center mt-6 font-bold accent-color hover:underline">View All</a>
</div>
<div class="bg-gray-50 p-6 rounded-lg mt-8">
<h3 class="text-2xl font-bold mb-4 border-b pb-2">Celebrity Looks</h3>
<div class="space-y-4">
<div>
<h4 class="font-bold">Zendaya at the Met Gala</h4>
<p class="text-sm text-gray-500">In a custom Versace gown</p>
</div>
<div>
<h4 class="font-bold">Timothée Chalamet</h4>
<p class="text-sm text-gray-500">Cartier x Haider Ackermann</p>
</div>
<div>
<h4 class="font-bold">Dua Lipa</h4>
<p class="text-sm text-gray-500">Donatella Versace tribute look</p>
</div>
</div>
<a href="#" class="block text-center mt-6 font-bold accent-color hover:underline">See Gallery</a>
</div>
</aside>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-dark-mute text-gray-300">
<div class="container mx-auto px-6 py-16">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12">
<div>
<h3 class="text-xl font-bold text-white mb-4 font-serif">Éclat Mode</h3>
<p class="text-sm mb-4">Your definitive source for fashion inspiration, trends, and style guides. We believe in the power of fashion to transform and empower.</p>
<div class="flex space-x-4">
<a href="#" class="hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg></a>
<a href="#" class="hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.011 3.584-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.584-.012-4.85-.07c-3.252-.148-4.771-1.691-4.919-4.919-.058-1.265-.069-1.645-.069-4.85s.011-3.584.069-4.85c.149-3.225 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.85-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948s.014 3.667.072 4.947c.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072s3.667-.014 4.947-.072c4.358-.2 6.78-2.618 6.98-6.98.059-1.281.073-1.689.073-4.948s-.014-3.667-.072-4.947c-.2-4.358-2.618-6.78-6.98-6.98-1.281-.059-1.689-.073-4.948-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4s1.791-4 4-4 4 1.79 4 4-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44 1.441-.645 1.441-1.44-.645-1.44-1.441-1.44z"/></svg></a>
<a href="#" class="hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616v.064c0 2.298 1.634 4.212 3.791 4.649-.69.188-1.43.23-2.187.087.621 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.588-7.52 2.588-1.001 0-1.942-.058-2.863-.168 2.616 1.68 5.734 2.66 9.096 2.66 9.807 0 15.177-8.128 15.177-15.177 0-.23 0-.459-.015-.685.92-.665 1.719-1.49 2.353-2.44z"/></svg></a>
<a href="#" class="hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.125 19.438v-6.938h-2.938v-2.812h2.938v-1.875c0-2.33 1.116-4.813 4.813-4.813h1.875v2.938h2.062v-2.938h1.875c3.697 0 4.813 2.33 4.813 4.813v1.875h-2.938v2.812h2.938v6.938h-2.938v-5.875h-1.875v5.875h-2.938v-2.812h-1.875v2.812z"/></svg></a>
</div>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-4">Quick Links</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white">Magazine</a></li>
<li><a href="#" class="hover:text-white">Seasonal Trends</a></li>
<li><a href="#" class="hover:text-white">Sustainable Fashion</a></li>
<li><a href="#" class="hover:text-white">Runway Reports</a></li>
<li><a href="#" class="hover:text-white">Beauty & Accessories</a></li>
<li><a href="#" class="hover:text-white">Wardrobe Planner</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-4">Contact Us</h3>
<ul class="space-y-2 text-sm">
<li>10 Rue de la Paix, Paris, France</li>
<li>+33 1 23 45 67 89</li>
<li>contact@eclatmode.com</li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-4">Newsletter</h3>
<p class="text-sm mb-4">Subscribe to our newsletter for the latest fashion news, trends, and exclusive offers.</p>
<form class="flex">
<input type="email" placeholder="Your email address" class="bg-gray-700 text-white px-4 py-2 rounded-l-md w-full focus:outline-none focus:ring-2 focus:ring-accent-color">
<button type="submit" class="bg-accent-color text-white px-4 py-2 rounded-r-md font-bold">Subscribe</button>
</form>
</div>
</div>
<div class="border-t border-gray-700 mt-12 pt-6 text-center text-sm text-gray-400">
<p>© 2025 Éclat Mode. All Rights Reserved.</p>
<div class="mt-2 space-x-4">
<a href="#" class="hover:text-white">Privacy Policy</a>
<a href="#" class="hover:text-white">Terms of Service</a>
<a href="#" class="hover:text-white">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script>
// Simple drag and drop for wardrobe planner
const canvas = document.getElementById('wardrobe-canvas');
const items = document.querySelectorAll('.wardrobe-item');
items.forEach(item => {
item.addEventListener('dragstart', dragStart);
});
canvas.addEventListener('dragover', dragOver);
canvas.addEventListener('drop', drop);
function dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.innerHTML);
e.dataTransfer.setData('text/uri', e.target.querySelector('img').src);
}
function dragOver(e) {
e.preventDefault();
}
function drop(e) {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
const imgSrc = e.dataTransfer.getData('text/uri');
const text = e.dataTransfer.getData('text/plain');
const newItem = document.createElement('div');
newItem.className = 'wardrobe-item absolute bg-white p-3 rounded-md shadow-lg border cursor-move';
newItem.style.left = (e.clientX - canvas.getBoundingClientRect().left - 50) + 'px';
newItem.style.top = (e.clientY - canvas.getBoundingClientRect().top - 50) + 'px';
newItem.draggable = true;
newItem.innerHTML = data;
// Make the new item draggable within the canvas
newItem.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', this.innerHTML);
e.dataTransfer.setData('text/uri', this.querySelector('img').src);
this.style.opacity = '0.4';
});
newItem.addEventListener('dragend', function() {
this.style.opacity = '1';
});
canvas.appendChild(newItem);
canvas.querySelector('p').style.display = 'none'; // Hide the placeholder text
// Make it draggable within the canvas
makeDraggable(newItem);
}
function makeDraggable(element) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
element.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position
element.style.top = (element.offsetTop - pos2) + "px";
element.style.left = (element.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:42:22.855Z",
"url": "https://benchmark.aimac.invalid/c7b6e006bce3d16004f194dd5316cb9db93a25f52c2747fa8a6c4dbedd9d0e52.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": []
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body class=\"bg-white\">",
"target": [
"body"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<section class=\"relative h-[80vh] min-h-[600px] bg-cover bg-center text-white\" style=\"background-image: url('https://picsum.photos/1920/1080?grayscale&blur=2');\">",
"target": [
".h-\\[80vh\\]"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button type=\"submit\" class=\"bg-accent-color text-white px-4 py-2 rounded-r-md font-bold\">Subscribe</button>",
"target": [
".rounded-r-md"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"text-5xl md:text-7xl font-bold my-4 leading-tight\">The Art of Effortless Style</h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"text-4xl font-bold mb-4\">Where Fashion Meets Inspiration</h2>",
"target": [
".container.px-6.text-center > h2"
]
},
{
"html": "<h2 class=\"text-4xl font-bold\">Seasonal Trends</h2>",
"target": [
".bg-gray-50.py-20:nth-child(3) > .container.px-6.mx-auto > .mb-12.text-center > h2"
]
},
{
"html": "<h3 class=\"text-2xl font-bold mb-2\">Bold Silhouettes</h3>",
"target": [
".overflow-hidden.group.shadow-md:nth-child(1) > .p-6 > .text-2xl.mb-2"
]
},
{
"html": "<h3 class=\"text-2xl font-bold mb-2\">Earthy Tones</h3>",
"target": [
".overflow-hidden.group.shadow-md:nth-child(2) > .p-6 > .text-2xl.mb-2"
]
},
{
"html": "<h3 class=\"text-2xl font-bold mb-2\">Luxurious Textures</h3>",
"target": [
".overflow-hidden.group.shadow-md:nth-child(3) > .p-6 > .text-2xl.mb-2"
]
},
{
"html": "<h2 class=\"text-4xl font-bold\">Build Your Capsule Wardrobe</h2>",
"target": [
".py-20:nth-child(4) > .container.px-6.mx-auto > .mb-12.text-center > h2"
]
},
{
"html": "<h3 class=\"text-2xl font-bold mb-4\">Wardrobe Essentials</h3>",
"target": [
".md\\:w-1\\/3 > .text-2xl"
]
},
{
"html": "<h2 class=\"text-4xl font-bold\">Runway Reports</h2>",
"target": [
".bg-dark-mute.py-20 > .container.px-6.mx-auto > .mb-12.text-center > h2"
]
},
{
"html": "<h3 class=\"text-3xl font-bold mb-4\">Paris Haute Couture Week: A Symphony of Craftsmanship</h3>",
"target": [
".text-3xl"
]
},
{
"html": "<h2 class=\"text-4xl font-bold\">Sustainable Fashion</h2>",
"target": [
".py-20:nth-child(6) > .container.px-6.mx-auto > .mb-12.text-center > h2"
]
},
{
"html": "<h4 class=\"font-bold text-lg mb-2\">Recycled Materials</h4>",
"target": [
".p-4.text-center:nth-child(1) > .mb-2.text-lg"
]
},
{
"html": "<h4 class=\"font-bold text-lg mb-2\">Organic Fabrics</h4>",
"target": [
".p-4.text-center:nth-child(2) > .mb-2.text-lg"
]
},
{
"html": "<h4 class=\"font-bold text-lg mb-2\">Upcycled Designs</h4>",
"target": [
".p-4.text-center:nth-child(3) > .mb-2.text-lg"
]
},
{
"html": "<h4 class=\"font-bold text-lg mb-2\">Biodegradable</h4>",
"target": [
".p-4.text-center:nth-child(4) > .mb-2.text-lg"
]
},
{
"html": "<h2 class=\"text-4xl font-bold\">What Our Readers Say</h2>",
"target": [
".bg-gray-50.py-20:nth-child(7) > .container.px-6.mx-auto > .mb-12.text-center > h2"
]
},
{
"html": "<h4 class=\"font-bold text-lg\">Emily Carter</h4>",
"target": [
".testimonial-card.snap-center.p-8:nth-child(1) > .items-center.flex.mb-4 > div > .text-lg"
]
},
{
"html": "<h4 class=\"font-bold text-lg\">James Whitmore</h4>",
"target": [
".testimonial-card.snap-center.p-8:nth-child(2) > .items-center.flex.mb-4 > div > .text-lg"
]
},
{
"html": "<h4 class=\"font-bold text-lg\">Sophia Laurent</h4>",
"target": [
".testimonial-card.snap-center.p-8:nth-child(3) > .items-center.flex.mb-4 > div > .text-lg"
]
},
{
"html": "<h2 class=\"text-4xl font-bold mb-4\">Beauty & Accessories</h2>",
"target": [
".lg\\:col-span-3 > h2"
]
},
{
"html": "<h3 class=\"text-2xl font-bold mb-2\">The Glow-Up Guide</h3>",
"target": [
"div:nth-child(1) > .text-2xl.mb-2"
]
},
{
"html": "<h3 class=\"text-2xl font-bold mb-2\">Accessories That Elevate</h3>",
"target": [
".md\\:grid-cols-2.gap-8.grid > div:nth-child(2) > .text-2xl.mb-2"
]
},
{
"html": "<h3 class=\"text-2xl font-bold mb-4 border-b pb-2\">New Arrivals</h3>",
"target": [
".bg-gray-50.p-6.rounded-lg:nth-child(1) > .border-b.pb-2.text-2xl"
]
},
{
"html": "<h4 class=\"font-bold\">Valentino Rockstud Dress</h4>",
"target": [
".space-x-4.items-center.flex:nth-child(1) > div > h4"
]
},
{
"html": "<h4 class=\"font-bold\">Gucci Jackie Bag</h4>",
"target": [
".space-x-4.items-center.flex:nth-child(2) > div > h4"
]
},
{
"html": "<h4 class=\"font-bold\">Prada Pointed Pumps</h4>",
"target": [
".space-x-4.items-center.flex:nth-child(3) > div > h4"
]
},
{
"html": "<h3 class=\"text-2xl font-bold mb-4 border-b pb-2\">Celebrity Looks</h3>",
"target": [
".mt-8 > .border-b.pb-2.text-2xl"
]
},
{
"html": "<h4 class=\"font-bold\">Zendaya at the Met Gala</h4>",
"target": [
".space-y-4 > div:nth-child(1) > h4"
]
},
{
"html": "<h4 class=\"font-bold\">Timoth\u00e9e Chalamet</h4>",
"target": [
".space-y-4 > div:nth-child(2) > h4"
]
},
{
"html": "<h4 class=\"font-bold\">Dua Lipa</h4>",
"target": [
".space-y-4 > div:nth-child(3) > h4"
]
},
{
"html": "<h3 class=\"text-xl font-bold text-white mb-4 font-serif\">\u00c9clat Mode</h3>",
"target": [
".text-xl"
]
},
{
"html": "<h3 class=\"text-lg font-bold text-white mb-4\">Quick Links</h3>",
"target": [
"div:nth-child(2) > .text-lg.text-white"
]
},
{
"html": "<h3 class=\"text-lg font-bold text-white mb-4\">Contact Us</h3>",
"target": [
"div:nth-child(3) > .text-lg.text-white"
]
},
{
"html": "<h3 class=\"text-lg font-bold text-white mb-4\">Newsletter</h3>",
"target": [
"div:nth-child(4) > .text-lg.text-white"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main>",
"target": [
"main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#333333",
"bgColor": "#ffffff",
"contrastRatio": 12.63,
"fontSize": "18.0pt (24px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 12.63"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"text-2xl font-bold font-serif tracking-tight\">\u00c9clat Mode</a>",
"target": [
".tracking-tight"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"email\" placeholder=\"Your email address\" class=\"bg-gray-700 text-white px-4 py-2 rounded-l-md w-full focus:outline-none focus:ring-2 focus:ring-accent-color\">",
"target": [
"input"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/40x40/000000/FFFFFF?text=EM\" alt=\"\u00c9clat Mode Logo\" class=\"h-10 w-10\">",
"target": [
".h-10"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"email\" placeholder=\"Your email address\" class=\"bg-gray-700 text-white px-4 py-2 rounded-l-md w-full focus:outline-none focus:ring-2 focus:ring-accent-color\">",
"target": [
"input"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div>\n <a href=\"#\" class=\"text-2xl font-bold font-serif tracking-tight\">\u00c9clat Mode</a>\n <p class=\"text-xs text-gray-500 tracking-widest\">REDEFINING FASHION</p>\n </div>",
"target": [
".space-x-3.items-center.flex > div"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"text-2xl font-bold font-serif tracking-tight\">\u00c9clat Mode</a>",
"target": [
".tracking-tight"
]
}
]
},
{
"id": "link-name",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"text-2xl font-bold font-serif tracking-tight\">\u00c9clat Mode</a>",
"target": [
".tracking-tight"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"space-y-2 text-sm\">",
"target": [
"div:nth-child(2) > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#\" class=\"hover:text-white\">Magazine</a></li>",
"target": [
"div:nth-child(2) > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/40x40/000000/FFFFFF?text=EM\" alt=\"\u00c9clat Mode Logo\" class=\"h-10 w-10\">",
"target": [
".h-10"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"text-sm font-bold tracking-wider uppercase hover:text-accent-color transition-colors\">Home</a>",
"target": [
".tracking-wider.hover\\:text-accent-color.transition-colors:nth-child(1)"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": "bgOverlap",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element's background color could not be determined because it is overlapped by another element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm font-bold tracking-widest uppercase\">SPRING/SUMMER 2025</p>",
"target": [
".tracking-widest.uppercase.text-sm"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because it is overlapped by another element"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d4a373",
"bgColor": "#ffffff",
"contrastRatio": 2.26,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-lg overflow-hidden shadow-md group\">",
"target": [
".overflow-hidden.group.shadow-md:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.26 (foreground color: #d4a373, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"font-bold accent-color hover:underline\">Read More</a>",
"target": [
".overflow-hidden.group.shadow-md:nth-child(1) > .p-6 > .accent-color.hover\\:underline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.26 (foreground color: #d4a373, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d4a373",
"bgColor": "#ffffff",
"contrastRatio": 2.26,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-lg overflow-hidden shadow-md group\">",
"target": [
".overflow-hidden.group.shadow-md:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.26 (foreground color: #d4a373, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"font-bold accent-color hover:underline\">Read More</a>",
"target": [
".overflow-hidden.group.shadow-md:nth-child(2) > .p-6 > .accent-color.hover\\:underline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.26 (foreground color: #d4a373, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d4a373",
"bgColor": "#ffffff",
"contrastRatio": 2.26,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-lg overflow-hidden shadow-md group\">",
"target": [
".overflow-hidden.group.shadow-md:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.26 (foreground color: #d4a373, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"font-bold accent-color hover:underline\">Read More</a>",
"target": [
".overflow-hidden.group.shadow-md:nth-child(3) > .p-6 > .accent-color.hover\\:underline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.26 (foreground color: #d4a373, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"md:w-2/3 bg-white rounded-lg p-8 min-h-[400px] border-2 border-dashed border-gray-300 relative\" id=\"wardrobe-canvas\">",
"target": [
"#wardrobe-canvas"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-gray-400 text-center\">Drag and drop items here<br>to build your look.</p>",
"target": [
".top-1\\/2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d4a373",
"contrastRatio": 2.26,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"bg-accent-color text-white px-8 py-3 font-bold tracking-wider uppercase hover:bg-opacity-90 transition-all inline-block\">View Full Report</a>",
"target": [
".inline-block"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.26 (foreground color: #ffffff, background color: #d4a373, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"bg-accent-color text-white px-8 py-3 font-bold tracking-wider uppercase hover:bg-opacity-90 transition-all inline-block\">View Full Report</a>",
"target": [
".inline-block"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.26 (foreground color: #ffffff, background color: #d4a373, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d4a373",
"bgColor": "#ffffff",
"contrastRatio": 2.26,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"py-20 bg-white\">",
"target": [
".py-20:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.26 (foreground color: #d4a373, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"font-bold accent-color hover:underline\">Get Beauty Tips</a>",
"target": [
".md\\:grid-cols-2.gap-8.grid > div:nth-child(1) > .accent-color.hover\\:underline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.26 (foreground color: #d4a373, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d4a373",
"bgColor": "#ffffff",
"contrastRatio": 2.26,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"py-20 bg-white\">",
"target": [
".py-20:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.26 (foreground color: #d4a373, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"font-bold accent-color hover:underline\">Shop Accessories</a>",
"target": [
".md\\:grid-cols-2.gap-8.grid > div:nth-child(2) > .accent-color.hover\\:underline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.26 (foreground color: #d4a373, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d4a373",
"bgColor": "#f9fafb",
"contrastRatio": 2.16,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-gray-50 p-6 rounded-lg\">",
"target": [
".bg-gray-50.p-6.rounded-lg:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.16 (foreground color: #d4a373, background color: #f9fafb, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"block text-center mt-6 font-bold accent-color hover:underline\">View All</a>",
"target": [
".bg-gray-50.p-6.rounded-lg:nth-child(1) > .block.mt-6.accent-color"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.16 (foreground color: #d4a373, background color: #f9fafb, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d4a373",
"bgColor": "#f9fafb",
"contrastRatio": 2.16,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-gray-50 p-6 rounded-lg mt-8\">",
"target": [
".mt-8"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.16 (foreground color: #d4a373, background color: #f9fafb, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"block text-center mt-6 font-bold accent-color hover:underline\">See Gallery</a>",
"target": [
".mt-8 > .block.mt-6.accent-color"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.16 (foreground color: #d4a373, background color: #f9fafb, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d4a373",
"contrastRatio": 2.26,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"bg-accent-color text-white px-4 py-2 rounded-r-md font-bold\">Subscribe</button>",
"target": [
".rounded-r-md"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.26 (foreground color: #ffffff, background color: #d4a373, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"bg-accent-color text-white px-4 py-2 rounded-r-md font-bold\">Subscribe</button>",
"target": [
".rounded-r-md"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.26 (foreground color: #ffffff, background color: #d4a373, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "link-name",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-accent-color transition-colors\">",
"target": [
".space-x-4.items-center.flex > .hover\\:text-accent-color.transition-colors:nth-child(1)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-accent-color transition-colors\">",
"target": [
".space-x-4.items-center.flex > .hover\\:text-accent-color.transition-colors:nth-child(2)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-accent-color transition-colors\">",
"target": [
".space-x-4.items-center.flex > .hover\\:text-accent-color.transition-colors:nth-child(3)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-white\">",
"target": [
".space-x-4.flex > .hover\\:text-white:nth-child(1)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-white\">",
"target": [
".space-x-4.flex > .hover\\:text-white:nth-child(2)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-white\">",
"target": [
".space-x-4.flex > .hover\\:text-white:nth-child(3)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-white\">",
"target": [
".hover\\:text-white:nth-child(4)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
}
]
},
{
"id": "scrollable-region-focusable",
"impact": "serious",
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element should have focusable content"
},
{
"id": "focusable-element",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element should be focusable"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"space-y-3 max-h-96 overflow-y-auto scroll-container\">",
"target": [
".space-y-3"
],
"failureSummary": "Fix any of the following:\n Element should have focusable content\n Element should be focusable"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5791
},
{
"y": 576,
"height": 5791
},
{
"y": 1152,
"height": 5791
},
{
"y": 1728,
"height": 5791
},
{
"y": 2304,
"height": 5791
},
{
"y": 2880,
"height": 5791
},
{
"y": 3456,
"height": 5791
},
{
"y": 4032,
"height": 5791
},
{
"y": 4608,
"height": 5791
},
{
"y": 5071,
"height": 5791
}
],
"scans": 11,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Style & Fashion" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Style & Fashion"
- Description: Fashion trends, style guides, beauty resources, and clothing inspiration.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Style & Fashion" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Magazine", "Looks", "Designers".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Style & Fashion" category. Consider themes similar to: "Seasonal Trends", "Sustainable Fashion", "Runway Reports".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "editorial", "capsule wardrobe", "haute couture".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Watch Show", "Get Beauty Tips", "View Lookbook".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Style & Fashion" sector. Ideas similar but not limited to: "wardrobe planner".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "celebrity looks", "new arrivals", "stylist interviews".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.