HomeGoogle Gemini 3.5 Flash LiteShopping

Google Gemini 3.5 Flash Lite – Shopping

via Google AI Studio · Generated

  • AIMAC Debt 29.44
  • Cost $0.03
  • Total Violations 20
  • HTML Size 49 KB
  • Em Dashes 0

Screenshot

View Google Gemini 3.5 Flash Lite Shopping page View Live Page

Accessibility Issues Found

6 Critical 14 Serious

  • button-name critical 4 instances

    Buttons must have discernible text

    Example HTML <button class="absolute top-3 right-3 z-10 w-9 h-9 bg-white/90 rounded-full flex items-center justify-center text-slate-600 hover:text-brand-600 sh...
  • color-contrast serious 10 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <strong class="text-emerald-600" x-text="products[item1].stock">In Stock (14 left)</strong>
  • link-name serious 4 instances

    Links must have discernible text

    Example HTML <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-brand-600 hover:text-white flex items-center justify-center transition text-slate-3...
  • select-name critical 2 instances

    Select element must have an accessible name

    Example HTML <select x-model="item1" class="w-full bg-slate-100 border border-slate-200 rounded-lg p-3 text-sm font-medium text-slate-800 focus:ring-2 focus:rin...

Artifacts

View Generated HTML 
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AuraMarket | Curated Lifestyle & Daily Deals</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            50: '#fdf4f5',
                            100: '#fbe8eb',
                            500: '#e11d48',
                            600: '#be123c',
                            700: '#9f1239',
                            900: '#881337',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        serif: ['Playfair Display', 'serif']
                    }
                }
            }
        }
    </script>
    <!-- Google Fonts -->
    <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=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400&display=swap" rel="stylesheet">
    <!-- FontAwesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Alpine.js for Interactivity -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-slate-50 text-slate-800 font-sans antialiased selection:bg-brand-500 selection:text-white">

    <!-- Top Announcement Bar -->
    <div class="bg-slate-900 text-slate-200 text-xs sm:text-sm py-2 px-4 text-center font-medium">
        <span>✨ Enjoy Free Shipping on orders over $50! Use code <strong class="text-white underline">AURADEALS</strong> at checkout.</span>
    </div>

    <!-- HEADER / NAVIGATION -->
    <header class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-slate-200 shadow-sm" x-data="{ mobileMenuOpen: false, searchOpen: false, cartOpen: false }">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                
                <!-- Logo & Tagline -->
                <div class="flex items-center space-x-3">
                    <a href="#" class="flex items-center space-x-2 group">
                        <div class="w-10 h-10 rounded-xl bg-brand-600 flex items-center justify-center text-white font-serif font-bold text-xl shadow-md group-hover:bg-brand-700 transition">
                            A
                        </div>
                        <div>
                            <span class="text-xl font-bold tracking-tight text-slate-900 font-serif">AuraMarket</span>
                            <span class="block text-[10px] uppercase tracking-widest text-slate-500 font-semibold">Curated Commerce</span>
                        </div>
                    </a>
                </div>

                <!-- Primary Navigation -->
                <nav class="hidden lg:flex items-center space-x-8">
                    <a href="#shop" class="text-slate-600 hover:text-brand-600 font-medium transition">Shop</a>
                    <a href="#trending" class="text-slate-600 hover:text-brand-600 font-medium transition">Trending Now</a>
                    <a href="#editor-picks" class="text-slate-600 hover:text-brand-600 font-medium transition">Editor Picks</a>
                    <a href="#sale" class="text-brand-600 font-semibold flex items-center gap-1.5 transition">
                        <i class="fa-solid fa-bolt text-xs"></i> Sale
                    </a>
                    <a href="#gift-guides" class="text-slate-600 hover:text-brand-600 font-medium transition">Gift Guides</a>
                    <a href="#orders" class="text-slate-600 hover:text-brand-600 font-medium transition">Orders</a>
                </nav>

                <!-- Utility Actions -->
                <div class="flex items-center space-x-4">
                    <button @click="searchOpen = !searchOpen" class="p-2 text-slate-600 hover:text-brand-600 transition" aria-label="Search">
                        <i class="fa-solid fa-magnifying-glass text-lg"></i>
                    </button>
                    <a href="#wishlist" class="hidden sm:block p-2 text-slate-600 hover:text-brand-600 transition relative" aria-label="Wishlist">
                        <i class="fa-regular fa-heart text-lg"></i>
                        <span class="absolute top-1 right-1 bg-brand-600 text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">3</span>
                    </a>
                    <button @click="cartOpen = true" class="p-2 bg-brand-50 text-brand-600 hover:bg-brand-100 rounded-full px-4 py-2 flex items-center space-x-2 transition font-medium text-sm">
                        <i class="fa-solid fa-bag-shopping"></i>
                        <span class="hidden sm:inline">Cart</span>
                        <span class="bg-brand-600 text-white text-xs px-1.5 py-0.5 rounded-full">2</span>
                    </button>
                    <!-- Mobile Menu Button -->
                    <button @click="mobileMenuOpen = !mobileMenuOpen" class="lg:hidden p-2 text-slate-600 hover:text-brand-600 transition">
                        <i class="fa-solid fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Search Overlay Dropdown -->
        <div x-show="searchOpen" @click.away="searchOpen = false" x-transition class="absolute top-full left-0 w-full bg-white border-b border-slate-200 p-4 shadow-lg">
            <div class="max-w-3xl mx-auto flex items-center">
                <input type="text" placeholder="Search for stock availability, brands, or gift guides..." class="w-full bg-slate-100 border-0 rounded-lg px-4 py-3 text-slate-800 focus:ring-2 focus:ring-brand-500 outline-none">
                <button class="ml-2 bg-brand-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-brand-700 transition">Search</button>
            </div>
        </div>

        <!-- Mobile Navigation Menu -->
        <div x-show="mobileMenuOpen" class="lg:hidden bg-white border-b border-slate-200 px-4 pt-2 pb-6 space-y-3">
            <a href="#shop" @click="mobileMenuOpen = false" class="block py-2 text-slate-700 font-medium">Shop</a>
            <a href="#trending" @click="mobileMenuOpen = false" class="block py-2 text-slate-700 font-medium">Trending Now</a>
            <a href="#editor-picks" @click="mobileMenuOpen = false" class="block py-2 text-slate-700 font-medium">Editor Picks</a>
            <a href="#sale" @click="mobileMenuOpen = false" class="block py-2 text-brand-600 font-semibold">Sale</a>
            <a href="#gift-guides" @click="mobileMenuOpen = false" class="block py-2 text-slate-700 font-medium">Gift Guides</a>
            <a href="#orders" @click="mobileMenuOpen = false" class="block py-2 text-slate-700 font-medium">Orders</a>
        </div>

        <!-- Slide-over Cart Drawer -->
        <div x-show="cartOpen" class="fixed inset-0 z-50 overflow-hidden" style="display: none;">
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="cartOpen = false"></div>
            <div class="absolute inset-y-0 right-0 max-w-full flex pl-10">
                <div class="w-screen max-w-md bg-white shadow-2xl flex flex-col">
                    <div class="flex items-center justify-between p-6 border-b border-slate-200">
                        <h2 class="text-lg font-serif font-bold text-slate-900">Your Shopping Bag (2)</h2>
                        <button @click="cartOpen = false" class="text-slate-400 hover:text-slate-600">
                            <i class="fa-solid fa-xmark text-xl"></i>
                        </button>
                    </div>
                    <div class="flex-1 overflow-y-auto p-6 space-y-4">
                        <!-- Cart Item 1 -->
                        <div class="flex items-center space-x-4 pb-4 border-b border-slate-100">
                            <img src="https://picsum.photos/seed/cart1/100/100" class="w-20 h-20 object-cover rounded-lg border border-slate-200" alt="Product">
                            <div class="flex-1">
                                <h4 class="font-medium text-slate-900 text-sm">Minimalist Ceramic Lamp</h4>
                                <p class="text-slate-500 text-xs">Color: Matte White</p>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="text-sm font-bold text-slate-900">$89.00</span>
                                    <span class="text-xs text-emerald-600 font-medium">In Stock</span>
                                </div>
                            </div>
                        </div>
                        <!-- Cart Item 2 -->
                        <div class="flex items-center space-x-4 pb-4 border-b border-slate-100">
                            <img src="https://picsum.photos/seed/cart2/100/100" class="w-20 h-20 object-cover rounded-lg border border-slate-200" alt="Product">
                            <div class="flex-1">
                                <h4 class="font-medium text-slate-900 text-sm">Aromatherapy Diffuser Set</h4>
                                <p class="text-slate-500 text-xs">Bundle: Lavender & Cedar</p>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="text-sm font-bold text-slate-900">$45.00</span>
                                    <span class="text-xs text-emerald-600 font-medium">In Stock</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-6 border-t border-slate-200 bg-slate-50">
                        <div class="flex justify-between text-base font-medium text-slate-900 mb-4">
                            <p>Subtotal</p>
                            <p>$134.00</p>
                        </div>
                        <p class="text-xs text-slate-500 mb-4">Shipping & taxes calculated at checkout. Free shipping applied!</p>
                        <button class="w-full bg-brand-600 text-white py-3.5 rounded-xl font-medium hover:bg-brand-700 transition shadow-md">
                            Proceed to Secure Checkout
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- MAIN CONTENT -->
    <main>
        
        <!-- HERO SECTION -->
        <section class="relative bg-gradient-to-br from-slate-900 via-slate-800 to-brand-900 text-white py-20 lg:py-32 overflow-hidden">
            <div class="absolute inset-0 opacity-20 bg-[radial-gradient(#e11d48_1px,transparent_1px)] [background-size:16px_16px]"></div>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="grid lg:grid-cols-2 gap-12 items-center">
                    <div class="space-y-6">
                        <span class="bg-brand-500/30 text-brand-300 text-xs uppercase tracking-widest px-3 py-1.5 rounded-full font-semibold border border-brand-500/30">
                            New Season Arrivals
                        </span>
                        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-serif font-bold leading-tight tracking-tight">
                            Elevate Your Everyday Living with Curated Finds.
                        </h1>
                        <p class="text-lg text-slate-300 leading-relaxed font-light">
                            Discover thoughtfully sourced retail products, limited-time daily deals, and expert gift guides designed to bring unmatched elegance and ease to your modern lifestyle. Check real-time stock availability and secure your favorites today.
                        </p>
                        <div class="flex flex-col sm:flex-row items-stretch sm:items-center space-y-3 sm:space-y-0 sm:space-x-4 pt-4">
                            <a href="#trending" class="bg-brand-600 hover:bg-brand-700 text-white text-center px-8 py-4 rounded-xl font-medium transition shadow-lg shadow-brand-600/30">
                                Shop Collection
                            </a>
                            <a href="#sale" class="bg-white/10 hover:bg-white/20 text-white text-center px-8 py-4 rounded-xl font-medium transition border border-white/20">
                                View Today's Deals
                            </a>
                        </div>
                        <div class="flex items-center space-x-6 pt-6 text-sm text-slate-300">
                            <div class="flex items-center gap-2">
                                <i class="fa-solid fa-check text-brand-400"></i> Free Express Shipping
                            </div>
                            <div class="flex items-center gap-2">
                                <i class="fa-solid fa-check text-brand-400"></i> 30-Day Easy Returns
                            </div>
                        </div>
                    </div>
                    <div class="relative">
                        <div class="relative mx-auto max-w-md lg:max-w-none">
                            <img src="https://picsum.photos/seed/hero/600/600" alt="Curated lifestyle products" class="rounded-2xl shadow-2xl object-cover w-full h-[450px] border border-white/10">
                            <div class="absolute -bottom-6 -left-6 bg-white/90 backdrop-blur-md p-4 rounded-xl shadow-xl text-slate-900 border border-slate-100 hidden sm:block">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 bg-emerald-100 text-emerald-600 rounded-lg flex items-center justify-center font-bold">
                                        <i class="fa-solid fa-star"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500 font-medium">Customer Rating</p>
                                        <p class="text-sm font-bold">4.9 / 5.0 (12k+ Reviews)</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- INTERACTIVE PRODUCT COMPARISON TOOL -->
        <section id="shop" class="py-16 bg-white border-b border-slate-200" x-data="{ 
            item1: 'lamp', 
            item2: 'diffuser',
            products: {
                lamp: { name: 'Minimalist Ceramic Lamp', price: '$89.00', rating: '4.8', stock: 'In Stock (14 left)', material: 'Matte Ceramic & Brass', shipping: 'Free', img: 'https://picsum.photos/seed/cart1/300/300' },
                diffuser: { name: 'Aromatherapy Diffuser Set', price: '$45.00', rating: '4.9', stock: 'In Stock', material: 'BPA-Free Resin & Wood', shipping: 'Free', img: 'https://picsum.photos/seed/cart2/300/300' },
                throw: { name: 'Cashmere Blend Throw Blanket', price: '$120.00', rating: '4.7', stock: 'Low Stock (3 left)', material: 'Mongolian Cashmere', shipping: 'Free', img: 'https://picsum.photos/seed/throw/300/300' },
                mug: { name: 'Handmade Artisan Coffee Mug', price: ' $28.00', rating: '4.9', stock: 'In Stock', name: 'Stoneware Ceramic', shipping: '$4.99', img: 'https://picsum.photos/seed/mug/300/300' }
            }
        }">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-2xl mx-auto mb-12">
                    <span class="text-brand-600 font-semibold text-sm uppercase tracking-wider">Smart Shopping Assistant</span>
                    <h2 class="text-3xl font-serif font-bold text-slate-900 mt-2">Interactive Product Comparison</h2>
                    <p class="text-slate-600 mt-3">Compare specifications, stock availability, and materials side-by-side to make the best choice for your wishlist.</p>
                </div>

                <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto bg-slate-50 p-6 sm:p-8 rounded-2xl border border-slate-200 shadow-sm">
                    <!-- Column 1 -->
                    <div class="bg-white p-6 rounded-xl border border-slate-200 flex flex-col justify-between">
                        <div>
                            <div class="mb-4">
                                <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Select Product A</label>
                                <select x-model="item1" class="w-full bg-slate-100 border border-slate-200 rounded-lg p-3 text-sm font-medium text-slate-800 focus:ring-2 focus:ring-brand-500 outline-none">
                                    <option value="lamp">Minimalist Ceramic Lamp</option>
                                    <option value="diffuser">Aromatherapy Diffuser Set</option>
                                    <option value="throw">Cashmere Blend Throw Blanket</option>
                                    <option value="mug">Handmade Artisan Coffee Mug</option>
                                </select>
                            </div>
                            <img :src="products[item1].img" class="w-full h-48 object-cover rounded-lg mb-4 border border-slate-100" alt="Product Image">
                            <h3 class="font-serif font-bold text-lg text-slate-900" x-text="products[item1].name"></h3>
                            <p class="text-brand-600 font-bold text-xl mt-1" x-text="products[item1].price"></p>
                            
                            <ul class="mt-4 space-y-2 text-sm text-slate-600 border-t border-slate-100 pt-4">
                                <li class="flex justify-between"><span>Rating:</span> <strong class="text-slate-900" x-text="products[item1].rating + ' / 5.0'"></strong></li>
                                <li class="flex justify-between"><span>Stock:</span> <strong class="text-emerald-600" x-text="products[item1].stock"></strong></li>
                                <li class="flex justify-between"><span>Material:</span> <strong class="text-slate-900" x-text="products[item1].material"></strong></li>
                                <li class="flex justify-between"><span>Shipping:</span> <strong class="text-slate-900" x-text="products[item1].shipping"></strong></li>
                            </ul>
                        </div>
                        <button class="mt-6 w-full bg-slate-900 hover:bg-slate-800 text-white py-2.5 rounded-lg text-sm font-medium transition">
                            Add to Cart
                        </button>
                    </div>

                    <!-- Column 2 -->
                    <div class="bg-white p-6 rounded-xl border border-slate-200 flex flex-col justify-between">
                        <div>
                            <div class="mb-4">
                                <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Select Product B</label>
                                <select x-model="item2" class="w-full bg-slate-100 border border-slate-200 rounded-lg p-3 text-sm font-medium text-slate-800 focus:ring-2 focus:ring-brand-500 outline-none">
                                    <option value="lamp">Minimalist Ceramic Lamp</option>
                                    <option value="diffuser" selected>Aromatherapy Diffuser Set</option>
                                    <option value="throw">Cashmere Blend Throw Blanket</option>
                                    <option value="mug">Handmade Artisan Coffee Mug</option>
                                </select>
                            </div>
                            <img :src="products[item2].img" class="w-full h-48 object-cover rounded-lg mb-4 border border-slate-100" alt="Product Image">
                            <h3 class="font-serif font-bold text-lg text-slate-900" x-text="products[item2].name"></h3>
                            <p class="text-brand-600 font-bold text-xl mt-1" x-text="products[item2].price"></p>
                            
                            <ul class="mt-4 space-y-2 text-sm text-slate-600 border-t border-slate-100 pt-4">
                                <li class="flex justify-between"><span>Rating:</span> <strong class="text-slate-900" x-text="products[item2].rating + ' / 5.0'"></strong></li>
                                <li class="flex justify-between"><span>Stock:</span> <strong class="text-emerald-600" x-text="products[item2].stock"></strong></li>
                                <li class="flex justify-between"><span>Material:</span> <strong class="text-slate-900" x-text="products[item2].material"></strong></li>
                                <li class="flex justify-between"><span>Shipping:</span> <strong class="text-slate-900" x-text="products[item2].shipping"></strong></li>
                            </ul>
                        </div>
                        <button class="mt-6 w-full bg-slate-900 hover:bg-slate-800 text-white py-2.5 rounded-lg text-sm font-medium transition">
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- TRENDING NOW SECTION -->
        <section id="trending" class="py-20 bg-slate-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
                    <div>
                        <span class="text-brand-600 font-semibold text-sm uppercase tracking-wider">Most Popular This Week</span>
                        <h2 class="text-3xl font-serif font-bold text-slate-900 mt-2">Trending Now</h2>
                        <p class="text-slate-600 mt-2 max-w-xl">Explore the items our community is obsessing over right now. High demand items with verified customer satisfaction.</p>
                    </div>
                    <div class="mt-4 md:mt-0">
                        <a href="#shop" class="text-brand-600 hover:text-brand-700 font-semibold flex items-center gap-2">
                            View All Products <i class="fa-solid fa-arrow-right text-sm"></i>
                        </a>
                    </div>
                </div>

                <!-- Product Grid -->
                <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    
                    <!-- Product 1 -->
                    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition group">
                        <div class="relative overflow-hidden bg-slate-100">
                            <span class="absolute top-3 left-3 z-10 bg-brand-600 text-white text-xs font-bold px-2.5 py-1 rounded-md">Bestseller</span>
                            <img src="https://picsum.photos/seed/trend1/400/400" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500" alt="Product">
                            <button class="absolute top-3 right-3 z-10 w-9 h-9 bg-white/90 rounded-full flex items-center justify-center text-slate-600 hover:text-brand-600 shadow transition">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-5">
                            <div class="text-xs text-slate-500 font-medium mb-1">Home & Decor</div>
                            <h3 class="font-serif font-bold text-slate-900 text-lg group-hover:text-brand-600 transition">Scandinavian Oak Stool</h3>
                            <div class="flex items-center space-x-1 text-amber-400 text-xs my-2">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                <span class="text-slate-500 ml-1">(128)</span>
                            </div>
                            <div class="flex items-center justify-between mt-4">
                                <span class="text-lg font-bold text-slate-900">$140.00</span>
                                <button class="bg-brand-50 text-brand-600 hover:bg-brand-600 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition">
                                    Add to Cart
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Product 2 -->
                    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition group">
                        <div class="relative overflow-hidden bg-slate-100">
                            <span class="absolute top-3 left-3 z-10 bg-emerald-600 text-white text-xs font-bold px-2.5 py-1 rounded-md">New In</span>
                            <img src="https://picsum.photos/seed/trend2/400/400" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500" alt="Product">
                            <button class="absolute top-3 right-3 z-10 w-9 h-9 bg-white/90 rounded-full flex items-center justify-center text-slate-600 hover:text-brand-600 shadow transition">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-5">
                            <div class="text-xs text-slate-500 font-medium mb-1">Tech & Living</div>
                            <h3 class="font-serif font-bold text-slate-900 text-lg group-hover:text-brand-600 transition">Wireless Charging Station</h3>
                            <div class="flex items-center space-x-1 text-amber-400 text-xs my-2">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i>
                                <span class="text-slate-500 ml-1">(94)</span>
                            </div>
                            <div class="flex items-center justify-between mt-4">
                                <span class="text-lg font-bold text-slate-900">$65.00</span>
                                <button class="bg-brand-50 text-brand-600 hover:bg-brand-600 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition">
                                    Add to Cart
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Product 3 -->
                    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition group">
                        <div class="relative overflow-hidden bg-slate-100">
                            <img src="https://picsum.photos/seed/trend3/400/400" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500" alt="Product">
                            <button class="absolute top-3 right-3 z-10 w-9 h-9 bg-white/90 rounded-full flex items-center justify-center text-slate-600 hover:text-brand-600 shadow transition">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-5">
                            <div class="text-xs text-slate-500 font-medium mb-1">Kitchenware</div>
                            <h3 class="font-serif font-bold text-slate-900 text-lg group-hover:text-brand-600 transition">Cast Iron Dutch Oven</h3>
                            <div class="flex items-center space-x-1 text-amber-400 text-xs my-2">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                <span class="text-slate-500 ml-1">(210)</span>
                            </div>
                            <div class="flex items-center justify-between mt-4">
                                <span class="text-lg font-bold text-slate-900">$115.00</span>
                                <button class="bg-brand-50 text-brand-600 hover:bg-brand-600 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition">
                                    Add to Cart
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Product 4 -->
                    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition group">
                        <div class="relative overflow-hidden bg-slate-100">
                            <span class="absolute top-3 left-3 z-10 bg-amber-500 text-white text-xs font-bold px-2.5 py-1 rounded-md">Limited Stock</span>
                            <img src="https://picsum.photos/seed/trend4/400/400" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500" alt="Product">
                            <button class="absolute top-3 right-3 z-10 w-9 h-9 bg-white/90 rounded-full flex items-center justify-center text-slate-600 hover:text-brand-600 shadow transition">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>
                        <div class="p-5">
                            <div class="text-xs text-slate-500 font-medium mb-1">Wellness & Spa</div>
                            <h3 class="font-serif font-bold text-slate-900 text-lg group-hover:text-brand-600 transition">Organic Linen Bathrobe</h3>
                            <div class="flex items-center space-x-1 text-amber-400 text-xs my-2">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i>
                                <span class="text-slate-500 ml-1">(83)</span>
                            </div>
                            <div class="flex items-center justify-between mt-4">
                                <span class="text-lg font-bold text-slate-900">$95.00</span>
                                <button class="bg-brand-50 text-brand-600 hover:bg-brand-600 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition">
                                    Add to Cart
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- EDITOR PICKS & SEASONAL COLLECTIONS -->
        <section id="editor-picks" class="py-20 bg-white border-t border-slate-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-2xl mx-auto mb-16">
                    <span class="text-brand-600 font-semibold text-sm uppercase tracking-wider">Handcrafted Selections</span>
                    <h2 class="text-3xl sm:text-4xl font-serif font-bold text-slate-900 mt-2">Editor Picks & Seasonal Collections</h2>
                    <p class="text-slate-600 mt-3">Our lead curators spend months handpicking items that reflect the distinct mood and aesthetic of the current season. Save your favorites to your wishlist and verify live stock availability instantly.</p>
                </div>

                <div class="grid lg:grid-cols-3 gap-8">
                    <!-- Editorial Card 1 -->
                    <div class="relative rounded-2xl overflow-hidden group shadow-md h-[450px]">
                        <img src="https://picsum.photos/seed/edit1/600/800" class="w-full h-full object-cover group-hover:scale-105 transition duration-700" alt="Autumn Sanctuary">
                        <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/40 to-transparent flex flex-col justify-end p-8 text-white">
                            <span class="text-brand-400 text-xs font-semibold uppercase tracking-widest mb-2">Seasonal Collection</span>
                            <h3 class="text-2xl font-serif font-bold mb-3">The Autumn Sanctuary Edit</h3>
                            <p class="text-slate-300 text-sm mb-6 line-clamp-2">Bring warmth indoors with textured throws, amber glassware, and earthy ceramics hand-selected for cooler evenings.</p>
                            <a href="#shop" class="inline-flex items-center gap-2 text-white font-semibold text-sm hover:text-brand-300 transition">
                                Shop Collection <i class="fa-solid fa-arrow-right text-xs"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Editorial Card 2 -->
                    <div class="relative rounded-2xl overflow-hidden group shadow-md h-[450px]">
                        <img src="https://picsum.photos/seed/edit2/600/800" class="w-full h-full object-cover group-hover:scale-105 transition duration-700" alt="Minimalist Workspace">
                        <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/40 to-transparent flex flex-col justify-end p-8 text-white">
                            <span class="text-brand-400 text-xs font-semibold uppercase tracking-widest mb-2">Productivity Focus</span>
                            <h3 class="text-2xl font-serif font-bold mb-3">The Minimalist Workspace</h3>
                            <p class="text-slate-300 text-sm mb-6 line-clamp-2">Optimize your daily workflow with ergonomic desk accessories, ambient lighting, and sleek organizational tools.</p>
                            <a href="#shop" class="inline-flex items-center gap-2 text-white font-semibold text-sm hover:text-brand-300 transition">
                                Shop Collection <i class="fa-solid fa-arrow-right text-xs"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Editorial Card 3 -->
                    <div class="relative rounded-2xl overflow-hidden group shadow-md h-[450px]">
                        <img src="https://picsum.photos/seed/edit3/600/800" class="w-full h-full object-cover group-hover:scale-105 transition duration-700" alt="Artisan Dining">
                        <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/40 to-transparent flex flex-col justify-end p-8 text-white">
                            <span class="text-brand-400 text-xs font-semibold uppercase tracking-widest mb-2">Hosting & Dining</span>
                            <h3 class="text-2xl font-serif font-bold mb-3">Artisan Table & Kitchen</h3>
                            <p class="text-slate-300 text-sm mb-6 line-clamp-2">Elevate dinner parties with heirloom-quality stoneware, brass flatware, and linen runners that command attention.</p>
                            <a href="#shop" class="inline-flex items-center gap-2 text-white font-semibold text-sm hover:text-brand-300 transition">
                                Shop Collection <i class="fa-solid fa-arrow-right text-xs"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- FLASH SALE & DAILY DEALS SECTION -->
        <section id="sale" class="py-20 bg-brand-900 text-white relative overflow-hidden">
            <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:20px_20px]"></div>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="grid lg:grid-cols-2 gap-12 items-center">
                    <div>
                        <div class="inline-flex items-center gap-2 bg-brand-700 text-white text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-6">
                            <i class="fa-solid fa-bolt text-amber-300"></i> Limited-Time Flash Sale
                        </div>
                        <h2 class="text-4xl sm:text-5xl font-serif font-bold leading-tight mb-6">
                            Save Up to 40% on Selected Best Sellers.
                        </h2>
                        <p class="text-brand-100 text-lg leading-relaxed mb-8">
                            Don't miss our flash deals update. Once stock availability hits zero, these special prices disappear forever. Check out our countdown and claim your discount before items sell out completely.
                        </p>
                        
                        <!-- Countdown Timer simulation -->
                        <div class="grid grid-cols-4 gap-4 max-w-md mb-8">
                            <div class="bg-brand-950/60 p-4 rounded-xl text-center border border-brand-700/50">
                                <span class="block text-2xl font-bold font-mono">08</span>
                                <span class="text-xs text-brand-300 uppercase">Hours</span>
                            </div>
                            <div class="bg-brand-950/60 p-4 rounded-xl text-center border border-brand-700/50">
                                <span class="block text-2xl font-bold font-mono">42</span>
                                <span class="text-xs text-brand-300 uppercase">Minutes</span>
                            </div>
                            <div class="bg-brand-950/60 p-4 rounded-xl text-center border border-brand-700/50">
                                <span class="block text-2xl font-bold font-mono">19</span>
                                <span class="text-xs text-brand-300 uppercase">Seconds</span>
                            </div>
                            <div class="bg-brand-950/60 p-4 rounded-xl text-center border border-brand-700/50 flex flex-col justify-center items-center">
                                <span class="text-xs font-bold text-amber-300 uppercase">Live</span>
                                <span class="text-xs text-brand-300 uppercase">Status</span>
                            </div>
                        </div>

                        <a href="#shop" class="inline-block bg-white text-brand-900 hover:bg-brand-50 px-8 py-4 rounded-xl font-bold transition shadow-lg">
                            Shop Flash Deals Now
                        </a>
                    </div>
                    
                    <div class="bg-white text-slate-900 p-8 rounded-2xl shadow-2xl">
                        <h3 class="text-2xl font-serif font-bold mb-2">Deal of the Day</h3>
                        <p class="text-slate-500 text-sm mb-6">Hand-poured luxury soy candle & marble tray bundle.</p>
                        <div class="relative rounded-xl overflow-hidden mb-6">
                            <span class="absolute top-3 left-3 bg-brand-600 text-white text-xs font-bold px-2.5 py-1 rounded">Save $35</span>
                            <img src="https://picsum.photos/seed/deal/600/350" class="w-full h-56 object-cover" alt="Deal product">
                        </div>
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <span class="text-2xl font-bold text-brand-600">$49.00</span>
                                <span class="text-slate-400 line-through ml-2">$84.00</span>
                            </div>
                            <div class="text-right">
                                <span class="text-xs text-emerald-600 font-semibold block">85% Claimed</span>
                                <div class="w-24 bg-slate-200 h-2 rounded-full mt-1 overflow-hidden">
                                    <div class="bg-brand-600 h-full w-[85%]"></div>
                                </div>
                            </div>
                        </div>
                        <button class="w-full bg-slate-900 hover:bg-slate-800 text-white py-3.5 rounded-xl font-medium transition shadow">
                            Claim Deal & Add to Bag
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- FAQ & CUSTOMER CARE SECTION -->
        <section class="py-20 bg-slate-50 border-t border-slate-200">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <span class="text-brand-600 font-semibold text-sm uppercase tracking-wider">Got Questions?</span>
                    <h2 class="text-3xl font-serif font-bold text-slate-900 mt-2">Frequently Asked Questions</h2>
                    <p class="text-slate-600 mt-2">Everything you need to know about stock availability, shipping, orders, and returns.</p>
                </div>

                <div class="space-y-4" x-data="{ selected: null }">
                    <!-- FAQ 1 -->
                    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm">
                        <button @click="selected !== 1 ? selected = 1 : selected = null" class="w-full text-left p-6 font-medium text-slate-900 flex justify-between items-center">
                            <span>How do I check real-time stock availability?</span>
                            <i class="fa-solid fa-chevron-down text-slate-400 transition" :class="selected === 1 ? 'rotate-180' : ''"></i>
                        </button>
                        <div x-show="selected === 1" class="px-6 pb-6 text-slate-600 text-sm leading-relaxed border-t border-slate-100 pt-4">
                            All product pages and our interactive comparison tool display live inventory updates. If an item is marked "In Stock," it is ready to ship from our primary fulfillment center within 24 hours.
                        </div>
                    </div>

                    <!-- FAQ 2 -->
                    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm">
                        <button @click="selected !== 2 ? selected = 2 : selected = null" class="w-full text-left p-6 font-medium text-slate-900 flex justify-between items-center">
                            <span>What is your return and exchange policy?</span>
                            <i class="fa-solid fa-chevron-down text-slate-400 transition" :class="selected === 2 ? 'rotate-180' : ''"></i>
                        </button>
                        <div x-show="selected === 2" class="px-6 pb-6 text-slate-600 text-sm leading-relaxed border-t border-slate-100 pt-4">
                            We offer hassle-free 30-day returns on all unused items in their original packaging. Simply visit our "Orders" portal to generate a pre-paid return shipping label instantly.
                        </div>
                    </div>

                    <!-- FAQ 3 -->
                    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm">
                        <button @click="selected !== 3 ? selected = 3 : selected = null" class="w-full text-left p-6 font-medium text-slate-900 flex justify-between items-center">
                            <span>How can I track my active orders?</span>
                            <i class="fa-solid fa-chevron-down text-slate-400 transition" :class="selected === 3 ? 'rotate-180' : ''"></i>
                        </button>
                        <div x-show="selected === 3" class="px-6 pb-6 text-slate-600 text-sm leading-relaxed border-t border-slate-100 pt-4">
                            Once your order ships, you will receive an email containing a secure tracking link. You can also view live delivery progress anytime by logging into your account and visiting the "Orders" section.
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!-- FOOTER -->
    <footer class="bg-slate-900 text-slate-400 pt-16 pb-12 border-t border-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 pb-12 border-b border-slate-800">
                
                <!-- Brand Info -->
                <div class="lg:col-span-2 space-y-4">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 rounded-lg bg-brand-600 flex items-center justify-center text-white font-serif font-bold text-lg">
                            A
                        </div>
                        <span class="text-lg font-bold tracking-tight text-white font-serif">AuraMarket</span>
                    </div>
                    <p class="text-sm text-slate-400 max-w-sm leading-relaxed">
                        Your trusted destination for curated online shopping, daily deals, stock availability updates, and expert gift guides. Elevating homes and lifestyles worldwide.
                    </p>
                    <div class="flex space-x-4 pt-2">
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-brand-600 hover:text-white flex items-center justify-center transition text-slate-300"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-brand-600 hover:text-white flex items-center justify-center transition text-slate-300"><i class="fa-brands fa-instagram"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-brand-600 hover:text-white flex items-center justify-center transition text-slate-300"><i class="fa-brands fa-twitter"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-800 hover:bg-brand-600 hover:text-white flex items-center justify-center transition text-slate-300"><i class="fa-brands fa-pinterest-p"></i></a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div>
                    <h4 class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Shop Categories</h4>
                    <ul class="space-y-2.5 text-sm">
                        <li><a href="#shop" class="hover:text-white transition">Trending Now</a></li>
                        <li><a href="#editor-picks" class="hover:text-white transition">Editor Picks</a></li>
                        <li><a href="#sale" class="hover:text-white transition">Daily Deals & Sale</a></li>
                        <li><a href="#gift-guides" class="hover:text-white transition">Gift Guides</a></li>
                        <li><a href="#shop" class="hover:text-white transition">New Arrivals</a></li>
                    </ul>
                </div>

                <!-- Customer Service -->
                <div>
                    <h4 class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Customer Care</h4>
                    <ul class="space-y-2.5 text-sm">
                        <li><a href="#orders" class="hover:text-white transition">Track Your Order</a></li>
                        <li><a href="#" class="hover:text-white transition">Stock Availability</a></li>
                        <li><a href="#" class="hover:text-white transition">Returns & Exchanges</a></li>
                        <li><a href="#" class="hover:text-white transition">Shipping & Delivery</a></li>
                        <li><a href="#" class="hover:text-white transition">Contact Support</a></li>
                    </ul>
                </div>

                <!-- Contact & Newsletter -->
                <div>
                    <h4 class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Stay Updated</h4>
                    <p class="text-xs text-slate-400 mb-4">Subscribe to receive secret flash sale codes and weekly gift guides.</p>
                    <form class="space-y-2">
                        <input type="email" placeholder="Your email address" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-500 outline-none">
                        <button type="submit" class="w-full bg-brand-600 hover:bg-brand-700 text-white py-2 rounded-lg text-sm font-medium transition">
                            Subscribe
                        </button>
                    </form>
                </div>

            </div>

            <!-- Copyright & Legal -->
            <div class="flex flex-col sm:flex-row items-center justify-between pt-8 text-xs text-slate-500 space-y-4 sm:space-y-0">
                <p>&copy; 2026 AuraMarket Inc. All rights reserved.</p>
                <div class="flex space-x-6">
                    <a href="#" class="hover:text-slate-400 transition">Privacy Policy</a>
                    <a href="#" class="hover:text-slate-400 transition">Terms of Service</a>
                    <a href="#" class="hover:text-slate-400 transition">Cookie Preferences</a>
                </div>
            </div>
        </div>
    </footer>

</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:44:15.867Z",
  "url": "https://benchmark.aimac.invalid/a874b6760bfa1e9eb3a05c88c8421b8a3b43d72a020a5a588f053b9235b40938.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-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-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-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": "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": "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": []
    },
    {
      "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": "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": []
    },
    {
      "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": "scrollable-region-focusable",
      "impact": null,
      "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": []
    },
    {
      "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-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": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<button @click=\"searchOpen = !searchOpen\" class=\"p-2 text-slate-600 hover:text-brand-600 transition\" aria-label=\"Search\">\n                        <i class=\"fa-solid fa-magnifying-glass text-lg\"></i>\n                    </button>",
          "target": [
            "button[\\@click=\"searchOpen = !searchOpen\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<button @click=\"searchOpen = !searchOpen\" class=\"p-2 text-slate-600 hover:text-brand-600 transition\" aria-label=\"Search\">\n                        <i class=\"fa-solid fa-magnifying-glass text-lg\"></i>\n                    </button>",
          "target": [
            "button[\\@click=\"searchOpen = !searchOpen\"]"
          ]
        }
      ]
    },
    {
      "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-slate-50 text-slate-800 font-sans antialiased selection:bg-brand-500 selection:text-white\">",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<button @click=\"searchOpen = !searchOpen\" class=\"p-2 text-slate-600 hover:text-brand-600 transition\" aria-label=\"Search\">\n                        <i class=\"fa-solid fa-magnifying-glass text-lg\"></i>\n                    </button>",
          "target": [
            "button[\\@click=\"searchOpen = !searchOpen\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<button @click=\"searchOpen = !searchOpen\" class=\"p-2 text-slate-600 hover:text-brand-600 transition\" aria-label=\"Search\">\n                        <i class=\"fa-solid fa-magnifying-glass text-lg\"></i>\n                    </button>",
          "target": [
            "button[\\@click=\"searchOpen = !searchOpen\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button @click=\"searchOpen = !searchOpen\" class=\"p-2 text-slate-600 hover:text-brand-600 transition\" aria-label=\"Search\">\n                        <i class=\"fa-solid fa-magnifying-glass text-lg\"></i>\n                    </button>",
          "target": [
            "button[\\@click=\"searchOpen = !searchOpen\"]"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": "critical",
      "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": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button @click=\"searchOpen = !searchOpen\" class=\"p-2 text-slate-600 hover:text-brand-600 transition\" aria-label=\"Search\">\n                        <i class=\"fa-solid fa-magnifying-glass text-lg\"></i>\n                    </button>",
          "target": [
            "button[\\@click=\"searchOpen = !searchOpen\"]"
          ]
        }
      ]
    },
    {
      "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": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-serif font-bold leading-tight tracking-tight\">\n                            Elevate Your Everyday Living with Curated Finds.\n                        </h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl font-serif font-bold text-slate-900 mt-2\">Interactive Product Comparison</h2>",
                  "target": [
                    ".max-w-2xl.mb-12.text-center > .text-3xl"
                  ]
                },
                {
                  "html": "<h3 class=\"font-serif font-bold text-lg text-slate-900\" x-text=\"products[item1].name\">Minimalist Ceramic Lamp</h3>",
                  "target": [
                    "h3[x-text=\"products[item1].name\"]"
                  ]
                },
                {
                  "html": "<h3 class=\"font-serif font-bold text-lg text-slate-900\" x-text=\"products[item2].name\">Aromatherapy Diffuser Set</h3>",
                  "target": [
                    "h3[x-text=\"products[item2].name\"]"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl font-serif font-bold text-slate-900 mt-2\">Trending Now</h2>",
                  "target": [
                    ".md\\:flex-row > div:nth-child(1) > .text-3xl"
                  ]
                },
                {
                  "html": "<h3 class=\"font-serif font-bold text-slate-900 text-lg group-hover:text-brand-600 transition\">Scandinavian Oak Stool</h3>",
                  "target": [
                    ".hover\\:shadow-md.group.shadow-sm:nth-child(1) > .p-5 > .group-hover\\:text-brand-600"
                  ]
                },
                {
                  "html": "<h3 class=\"font-serif font-bold text-slate-900 text-lg group-hover:text-brand-600 transition\">Wireless Charging Station</h3>",
                  "target": [
                    ".hover\\:shadow-md.group.shadow-sm:nth-child(2) > .p-5 > .group-hover\\:text-brand-600"
                  ]
                },
                {
                  "html": "<h3 class=\"font-serif font-bold text-slate-900 text-lg group-hover:text-brand-600 transition\">Cast Iron Dutch Oven</h3>",
                  "target": [
                    ".hover\\:shadow-md.group.shadow-sm:nth-child(3) > .p-5 > .group-hover\\:text-brand-600"
                  ]
                },
                {
                  "html": "<h3 class=\"font-serif font-bold text-slate-900 text-lg group-hover:text-brand-600 transition\">Organic Linen Bathrobe</h3>",
                  "target": [
                    ".hover\\:shadow-md.group.shadow-sm:nth-child(4) > .p-5 > .group-hover\\:text-brand-600"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl sm:text-4xl font-serif font-bold text-slate-900 mt-2\">Editor Picks &amp; Seasonal Collections</h2>",
                  "target": [
                    ".sm\\:text-4xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-2xl font-serif font-bold mb-3\">The Autumn Sanctuary Edit</h3>",
                  "target": [
                    ".h-\\[450px\\].shadow-md.group:nth-child(1) > .bg-gradient-to-t.from-slate-950.via-slate-950\\/40 > .mb-3.text-2xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-2xl font-serif font-bold mb-3\">The Minimalist Workspace</h3>",
                  "target": [
                    ".h-\\[450px\\].shadow-md.group:nth-child(2) > .bg-gradient-to-t.from-slate-950.via-slate-950\\/40 > .mb-3.text-2xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-2xl font-serif font-bold mb-3\">Artisan Table &amp; Kitchen</h3>",
                  "target": [
                    ".h-\\[450px\\].shadow-md.group:nth-child(3) > .bg-gradient-to-t.from-slate-950.via-slate-950\\/40 > .mb-3.text-2xl"
                  ]
                },
                {
                  "html": "<h2 class=\"text-4xl sm:text-5xl font-serif font-bold leading-tight mb-6\">\n                            Save Up to 40% on Selected Best Sellers.\n                        </h2>",
                  "target": [
                    "#sale > .max-w-7xl.sm\\:px-6.lg\\:px-8 > .lg\\:grid-cols-2.gap-12.grid > div:nth-child(1) > .text-4xl.sm\\:text-5xl.leading-tight"
                  ]
                },
                {
                  "html": "<h3 class=\"text-2xl font-serif font-bold mb-2\">Deal of the Day</h3>",
                  "target": [
                    ".mb-2.text-2xl"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl font-serif font-bold text-slate-900 mt-2\">Frequently Asked Questions</h2>",
                  "target": [
                    ".max-w-4xl.sm\\:px-6.lg\\:px-8 > .mb-16.text-center > .text-3xl"
                  ]
                },
                {
                  "html": "<h4 class=\"text-white font-semibold text-sm uppercase tracking-wider mb-4\">Shop Categories</h4>",
                  "target": [
                    ".grid-cols-1 > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"text-white font-semibold text-sm uppercase tracking-wider mb-4\">Customer Care</h4>",
                  "target": [
                    "div:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"text-white font-semibold text-sm uppercase tracking-wider mb-4\">Stay Updated</h4>",
                  "target": [
                    "div:nth-child(4) > h4"
                  ]
                }
              ],
              "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\" class=\"scroll-smooth\">",
          "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": "#e2e8f0",
                "bgColor": "#0f172a",
                "contrastRatio": 14.48,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 14.48"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span>\u2728 Enjoy Free Shipping on orders over $50! Use code <strong class=\"text-white underline\">AURADEALS</strong> at checkout.</span>",
          "target": [
            ".text-slate-200 > span"
          ]
        }
      ]
    },
    {
      "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\" class=\"scroll-smooth\">",
          "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": "<select x-model=\"item1\" class=\"w-full bg-slate-100 border border-slate-200 rounded-lg p-3 text-sm font-medium text-slate-800 focus:ring-2 focus:ring-brand-500 outline-none\">",
          "target": [
            "select[x-model=\"item1\"]"
          ]
        }
      ]
    },
    {
      "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\" class=\"scroll-smooth\">",
          "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\" class=\"scroll-smooth\">",
          "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://picsum.photos/seed/hero/600/600\" alt=\"Curated lifestyle products\" class=\"rounded-2xl shadow-2xl object-cover w-full h-[450px] border border-white/10\">",
          "target": [
            ".border-white\\/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=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-500 outline-none\">",
          "target": [
            ".border-slate-700"
          ]
        }
      ]
    },
    {
      "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=\"flex items-center space-x-2 group\">",
          "target": [
            ".space-x-2.group[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "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=\"mt-4 space-y-2 text-sm text-slate-600 border-t border-slate-100 pt-4\">",
          "target": [
            ".p-6.flex-col.bg-white:nth-child(1) > div > .space-y-2"
          ]
        }
      ]
    },
    {
      "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 class=\"flex justify-between\"><span>Rating:</span> <strong class=\"text-slate-900\" x-text=\"products[item1].rating + ' / 5.0'\">4.8 / 5.0</strong></li>",
          "target": [
            ".p-6.flex-col.bg-white:nth-child(1) > div > .space-y-2 > 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": "<button @click=\"searchOpen = !searchOpen\" class=\"p-2 text-slate-600 hover:text-brand-600 transition\" aria-label=\"Search\">\n                        <i class=\"fa-solid fa-magnifying-glass text-lg\"></i>\n                    </button>",
          "target": [
            "button[\\@click=\"searchOpen = !searchOpen\"]"
          ]
        }
      ]
    },
    {
      "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-size",
              "data": {
                "minSize": 24,
                "width": 173.5,
                "height": 43
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (173.5px by 43px, should be at least 24px by 24px)"
            },
            {
              "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=\"flex items-center space-x-2 group\">",
          "target": [
            ".space-x-2.group[href=\"#\"]"
          ]
        }
      ]
    }
  ],
  "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": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"bg-brand-500/30 text-brand-300 text-xs uppercase tracking-widest px-3 py-1.5 rounded-full font-semibold border border-brand-500/30\">\n                            New Season Arrivals\n                        </span>",
                  "target": [
                    ".bg-brand-500\\/30"
                  ]
                },
                {
                  "html": "<div class=\"absolute inset-0 opacity-20 bg-[radial-gradient(#e11d48_1px,transparent_1px)] [background-size:16px_16px]\"></div>",
                  "target": [
                    ".opacity-20"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"bg-brand-500/30 text-brand-300 text-xs uppercase tracking-widest px-3 py-1.5 rounded-full font-semibold border border-brand-500/30\">\n                            New Season Arrivals\n                        </span>",
          "target": [
            ".bg-brand-500\\/30"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "button-name",
      "impact": "critical",
      "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 does not have inner text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "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": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<button class=\"absolute top-3 right-3 z-10 w-9 h-9 bg-white/90 rounded-full flex items-center justify-center text-slate-600 hover:text-brand-600 shadow transition\">\n                                <i class=\"fa-regular fa-heart\"></i>\n                            </button>",
          "target": [
            ".hover\\:shadow-md.group.shadow-sm:nth-child(1) > .bg-slate-100.relative.overflow-hidden > .right-3.w-9.h-9"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have inner 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\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have inner text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "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": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<button class=\"absolute top-3 right-3 z-10 w-9 h-9 bg-white/90 rounded-full flex items-center justify-center text-slate-600 hover:text-brand-600 shadow transition\">\n                                <i class=\"fa-regular fa-heart\"></i>\n                            </button>",
          "target": [
            ".hover\\:shadow-md.group.shadow-sm:nth-child(2) > .bg-slate-100.relative.overflow-hidden > .right-3.w-9.h-9"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have inner 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\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have inner text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "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": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<button class=\"absolute top-3 right-3 z-10 w-9 h-9 bg-white/90 rounded-full flex items-center justify-center text-slate-600 hover:text-brand-600 shadow transition\">\n                                <i class=\"fa-regular fa-heart\"></i>\n                            </button>",
          "target": [
            ".hover\\:shadow-md.group.shadow-sm:nth-child(3) > .bg-slate-100.relative.overflow-hidden > .right-3.w-9.h-9"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have inner 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\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have inner text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "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": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<button class=\"absolute top-3 right-3 z-10 w-9 h-9 bg-white/90 rounded-full flex items-center justify-center text-slate-600 hover:text-brand-600 shadow transition\">\n                                <i class=\"fa-regular fa-heart\"></i>\n                            </button>",
          "target": [
            ".hover\\:shadow-md.group.shadow-sm:nth-child(4) > .bg-slate-100.relative.overflow-hidden > .right-3.w-9.h-9"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have inner 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\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ]
    },
    {
      "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": "#059669",
                "bgColor": "#ffffff",
                "contrastRatio": 3.76,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-xl border border-slate-200 flex flex-col justify-between\">",
                  "target": [
                    ".p-6.flex-col.bg-white:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<strong class=\"text-emerald-600\" x-text=\"products[item1].stock\">In Stock (14 left)</strong>",
          "target": [
            "strong[x-text=\"products[item1].stock\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#ffffff",
                "contrastRatio": 3.76,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-xl border border-slate-200 flex flex-col justify-between\">",
                  "target": [
                    ".p-6.flex-col.bg-white:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<strong class=\"text-emerald-600\" x-text=\"products[item2].stock\">In Stock</strong>",
          "target": [
            "strong[x-text=\"products[item2].stock\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#059669",
                "contrastRatio": 3.76,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"absolute top-3 left-3 z-10 bg-emerald-600 text-white text-xs font-bold px-2.5 py-1 rounded-md\">New In</span>",
                  "target": [
                    ".bg-emerald-600"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #ffffff, background color: #059669, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"absolute top-3 left-3 z-10 bg-emerald-600 text-white text-xs font-bold px-2.5 py-1 rounded-md\">New In</span>",
          "target": [
            ".bg-emerald-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #ffffff, background color: #059669, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f59e0b",
                "contrastRatio": 2.14,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"absolute top-3 left-3 z-10 bg-amber-500 text-white text-xs font-bold px-2.5 py-1 rounded-md\">Limited Stock</span>",
                  "target": [
                    ".bg-amber-500"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.14 (foreground color: #ffffff, background color: #f59e0b, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"absolute top-3 left-3 z-10 bg-amber-500 text-white text-xs font-bold px-2.5 py-1 rounded-md\">Limited Stock</span>",
          "target": [
            ".bg-amber-500"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.14 (foreground color: #ffffff, background color: #f59e0b, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white text-slate-900 p-8 rounded-2xl shadow-2xl\">",
                  "target": [
                    ".shadow-2xl.p-8.rounded-2xl"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-slate-400 line-through ml-2\">$84.00</span>",
          "target": [
            ".line-through"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#ffffff",
                "contrastRatio": 3.76,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white text-slate-900 p-8 rounded-2xl shadow-2xl\">",
                  "target": [
                    ".shadow-2xl.p-8.rounded-2xl"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-xs text-emerald-600 font-semibold block\">85% Claimed</span>",
          "target": [
            ".text-emerald-600.block.font-semibold"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#64748b",
                "bgColor": "#0f172a",
                "contrastRatio": 3.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"bg-slate-900 text-slate-400 pt-16 pb-12 border-t border-slate-800\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.75 (foreground color: #64748b, background color: #0f172a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>\u00a9 2026 AuraMarket Inc. All rights reserved.</p>",
          "target": [
            ".pt-8 > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.75 (foreground color: #64748b, background color: #0f172a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#64748b",
                "bgColor": "#0f172a",
                "contrastRatio": 3.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"bg-slate-900 text-slate-400 pt-16 pb-12 border-t border-slate-800\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.75 (foreground color: #64748b, background color: #0f172a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-slate-400 transition\">Privacy Policy</a>",
          "target": [
            ".hover\\:text-slate-400[href=\"#\"]:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.75 (foreground color: #64748b, background color: #0f172a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#64748b",
                "bgColor": "#0f172a",
                "contrastRatio": 3.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"bg-slate-900 text-slate-400 pt-16 pb-12 border-t border-slate-800\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.75 (foreground color: #64748b, background color: #0f172a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-slate-400 transition\">Terms of Service</a>",
          "target": [
            ".hover\\:text-slate-400[href=\"#\"]:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.75 (foreground color: #64748b, background color: #0f172a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#64748b",
                "bgColor": "#0f172a",
                "contrastRatio": 3.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"bg-slate-900 text-slate-400 pt-16 pb-12 border-t border-slate-800\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.75 (foreground color: #64748b, background color: #0f172a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-slate-400 transition\">Cookie Preferences</a>",
          "target": [
            ".hover\\:text-slate-400[href=\"#\"]:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.75 (foreground color: #64748b, background color: #0f172a, font size: 9.0pt (12px), font weight: normal). 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=\"w-10 h-10 rounded-full bg-slate-800 hover:bg-brand-600 hover:text-white flex items-center justify-center transition text-slate-300\"><i class=\"fa-brands fa-facebook-f\"></i></a>",
          "target": [
            ".bg-slate-800.w-10.h-10: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=\"w-10 h-10 rounded-full bg-slate-800 hover:bg-brand-600 hover:text-white flex items-center justify-center transition text-slate-300\"><i class=\"fa-brands fa-instagram\"></i></a>",
          "target": [
            ".bg-slate-800.w-10.h-10: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=\"w-10 h-10 rounded-full bg-slate-800 hover:bg-brand-600 hover:text-white flex items-center justify-center transition text-slate-300\"><i class=\"fa-brands fa-twitter\"></i></a>",
          "target": [
            ".bg-slate-800.w-10.h-10: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=\"w-10 h-10 rounded-full bg-slate-800 hover:bg-brand-600 hover:text-white flex items-center justify-center transition text-slate-300\"><i class=\"fa-brands fa-pinterest-p\"></i></a>",
          "target": [
            ".bg-slate-800.w-10.h-10: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": "select-name",
      "impact": "critical",
      "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": [
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "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": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<select x-model=\"item1\" class=\"w-full bg-slate-100 border border-slate-200 rounded-lg p-3 text-sm font-medium text-slate-800 focus:ring-2 focus:ring-brand-500 outline-none\">",
          "target": [
            "select[x-model=\"item1\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\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\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "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": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<select x-model=\"item2\" class=\"w-full bg-slate-100 border border-slate-200 rounded-lg p-3 text-sm font-medium text-slate-800 focus:ring-2 focus:ring-brand-500 outline-none\">",
          "target": [
            "select[x-model=\"item2\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\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\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 5093
      },
      {
        "y": 576,
        "height": 5093
      },
      {
        "y": 1152,
        "height": 5093
      },
      {
        "y": 1728,
        "height": 5093
      },
      {
        "y": 2304,
        "height": 5093
      },
      {
        "y": 2880,
        "height": 5093
      },
      {
        "y": 3456,
        "height": 5093
      },
      {
        "y": 4032,
        "height": 5093
      },
      {
        "y": 4373,
        "height": 5093
      }
    ],
    "scans": 10,
    "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 "Shopping" 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: "Shopping"
- Description: Online shopping, e-commerce, deals, retail products, and gift guides.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Shopping" 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: "Orders", "Shop", "Sale".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Shopping" category. Consider themes similar to: "Trending Now", "Editor Picks", "Seasonal Collections".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "stock availability", "wishlist", "free shipping".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Add to Cart", "View Deal", "Shop Collection".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Shopping" sector. Ideas similar but not limited to: "product comparison".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "trending products", "price drops", "recommendations".
-   **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.
← Back to Google Gemini 3.5 Flash Lite summary View all models for Shopping