Meta Muse Spark Open – Shopping
via Modal · Generated
- AIMAC Debt 39.16
- Cost $0.07
- Total Violations 50
- HTML Size 51 KB
- Em Dashes 21
Screenshot
View Live Page
Accessibility Issues Found
34 Critical 16 Serious
-
button-name critical 3 instances
Buttons must have discernible text
Example HTML
<button class="absolute right-1.5 top-1.5 w-9 h-9 rounded-full bg-ink text-white grid place-items-center"><i class="fa-solid fa-magnifying-glass te... -
color-contrast serious 16 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#flash" class="px-4 py-2 rounded-full bg-clay text-white">Deals 🔥</a> -
image-alt critical 31 instances
Images must have alternative text
Example HTML
<img src="https://i.pravatar.cc/40?u=a1" class="w-9 h-9 rounded-full border-2 border-moss">
Artifacts
View Generated HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>MERCANTILE & Co. — Curated Finds for Everyday Living</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<script>
tailwind.config={
theme:{
extend:{
fontFamily:{ serif:['Libre Baskerville','serif'], sans:['Inter','sans-serif'], display:['Space Grotesk','sans-serif']},
colors:{
ink:'#121214', paper:'#FFFBF5', sand:'#F3ECE2', clay:'#E85D3F', moss:'#1A3A2F', mustard:'#F2C14E', line:'#E8DDD0'
}
}
}
}
</script>
<style>
html{scroll-behavior:smooth}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
</style>
</head>
<body class="bg-paper text-ink font-sans antialiased">
<!-- TOP PROMO BAR -->
<div class="bg-moss text-white text-[12px] tracking-wide">
<div class="max-w-[1440px] mx-auto px-4 md:px-8 py-2.5 flex flex-wrap gap-3 justify-between items-center">
<div class="flex items-center gap-6">
<span class="hidden md:inline-flex items-center gap-2"><i class="fa-solid fa-truck-fast"></i> Free shipping over $75 • Free returns within 30 days</span>
<span class="inline-flex items-center gap-2"><i class="fa-solid fa-tag"></i> Use code <b class="bg-white text-moss px-1.5 py-0.5 rounded">WELCOME20</b> for 20% off first order</span>
</div>
<div class="flex items-center gap-5 opacity-90">
<a href="#" class="hover:underline">Track Order</a>
<a href="#" class="hover:underline">Help</a>
<a href="#" class="hover:underline hidden sm:inline">Store Locator</a>
</div>
</div>
</div>
<!-- HEADER -->
<header class="sticky top-0 z-40 bg-paper/95 backdrop-blur border-b border-line">
<div class="max-w-[1440px] mx-auto px-4 md:px-8">
<div class="flex items-center gap-6 py-4">
<!-- Logo -->
<a href="#" class="flex items-center gap-3 shrink-0">
<img src="https://placehold.co/44x44/1A3A2F/FFFFFF?text=M&font=poppins" class="w-11 h-11 rounded-lg object-cover" alt="logo"/>
<div class="leading-tight">
<div class="font-display font-bold text-[19px] tracking-tight">MERCANTILE & Co.</div>
<div class="text-[10px] tracking-[0.18em] uppercase text-black/60 font-semibold">Curated Finds for Everyday Living</div>
</div>
</a>
<!-- Search -->
<div class="hidden lg:flex flex-1 max-w-[520px] mx-6 relative">
<input id="searchInput" placeholder="Search 12,000+ products — try “linen throw”" class="w-full bg-white border border-line rounded-full pl-5 pr-12 py-3 text-sm outline-none focus:border-moss focus:ring-4 focus:ring-moss/10"/>
<button class="absolute right-1.5 top-1.5 w-9 h-9 rounded-full bg-ink text-white grid place-items-center"><i class="fa-solid fa-magnifying-glass text-sm"></i></button>
</div>
<!-- Actions -->
<div class="ml-auto flex items-center gap-3 md:gap-5">
<button class="hidden md:inline-flex items-center gap-2 text-sm font-medium"><i class="fa-regular fa-user text-lg"></i> Account</button>
<button class="hidden md:inline-flex items-center gap-2 text-sm font-medium"><i class="fa-regular fa-heart text-lg"></i> <span class="hidden xl:inline">Wishlist</span> <span class="bg-clay text-white text-[11px] px-1.5 rounded-full">3</span></button>
<button id="cartBtn" class="relative inline-flex items-center gap-3 bg-ink text-white rounded-full px-4 md:px-5 py-2.5 font-semibold text-sm">
<i class="fa-solid fa-bag-shopping"></i> <span class="hidden sm:inline">Bag</span> <span id="cartCount" class="bg-mustard text-ink w-6 h-6 grid place-items-center rounded-full text-xs font-bold">0</span>
</button>
<button id="mobileMenuBtn" class="lg:hidden w-10 h-10 grid place-items-center border border-line rounded-full"><i class="fa-solid fa-bars"></i></button>
</div>
</div>
<!-- Navigation -->
<nav class="hidden lg:flex items-center gap-1 pb-3 overflow-x-auto no-scrollbar text-sm font-semibold">
<a href="#flash" class="px-4 py-2 rounded-full bg-clay text-white">Deals 🔥</a>
<a href="#" class="px-4 py-2 rounded-full hover:bg-white border border-transparent hover:border-line">New In</a>
<div class="relative group">
<a href="#categories" class="px-4 py-2 rounded-full hover:bg-white border border-transparent hover:border-line inline-flex items-center gap-1">Categories <i class="fa-solid fa-chevron-down text-[10px]"></i></a>
</div>
<a href="#seasonal" class="px-4 py-2 rounded-full hover:bg-white border border-transparent hover:border-line">Seasonal Collections</a>
<a href="#favorites" class="px-4 py-2 rounded-full hover:bg-white border border-transparent hover:border-line">Customer Favorites</a>
<a href="#gift-guide" class="px-4 py-2 rounded-full hover:bg-white border border-transparent hover:border-line">Gift Guides</a>
<a href="#" class="px-4 py-2 rounded-full hover:bg-white border border-transparent hover:border-line">Account</a>
<a href="#" class="ml-auto inline-flex items-center gap-2 text-clay"><i class="fa-solid fa-location-dot"></i> Check Store Inventory</a>
</nav>
</div>
<!-- mobile nav -->
<div id="mobileNav" class="hidden lg:hidden border-t border-line bg-white px-4 py-4 space-y-2">
<a class="block py-2 font-semibold" href="#flash">Deals</a>
<a class="block py-2 font-semibold" href="#categories">Categories</a>
<a class="block py-2 font-semibold" href="#seasonal">Seasonal Collections</a>
<a class="block py-2 font-semibold" href="#favorites">Customer Favorites</a>
<a class="block py-2 font-semibold" href="#gift-guide">Gift Guides</a>
<a class="block py-2 font-semibold" href="#">Account</a>
</div>
</header>
<!-- HERO -->
<section class="max-w-[1440px] mx-auto px-4 md:px-8 pt-6">
<div class="grid lg:grid-cols-[1.15fr_0.85fr] gap-6">
<div class="bg-moss rounded-[28px] overflow-hidden text-white relative flex flex-col">
<div class="p-8 md:p-10 lg:p-12 pb-4">
<div class="inline-flex items-center gap-2 bg-white/10 border border-white/15 rounded-full px-3 py-1.5 text-xs tracking-wide font-semibold"><span class="w-2 h-2 bg-mustard rounded-full animate-pulse"></span> FALL EDIT IS LIVE — UP TO 60% OFF</div>
<h1 class="font-serif text-[38px] md:text-[52px] leading-[0.95] mt-5">The Art of <br/><span class="italic font-light">Thoughtful</span><br/> Living.</h1>
<p class="text-white/80 mt-4 max-w-[44ch] leading-relaxed text-sm md:text-[15px]">Discover our most intentional collection yet. From heritage ceramics to organic linens, every piece is sourced from independent makers and vetted for quality, sustainability, and timeless design.</p>
<div class="flex flex-wrap gap-3 mt-6">
<a href="#seasonal" class="inline-flex items-center gap-2 bg-mustard text-ink px-6 py-3 rounded-full font-bold text-sm">Shop Fall Collection <i class="fa-solid fa-arrow-right"></i></a>
<a href="#flash" class="inline-flex items-center gap-2 bg-white text-ink px-6 py-3 rounded-full font-bold text-sm">Explore Deals</a>
</div>
<div class="flex items-center gap-4 mt-8">
<div class="flex -space-x-2">
<img src="https://i.pravatar.cc/40?u=a1" class="w-9 h-9 rounded-full border-2 border-moss"/>
<img src="https://i.pravatar.cc/40?u=a2" class="w-9 h-9 rounded-full border-2 border-moss"/>
<img src="https://i.pravatar.cc/40?u=a3" class="w-9 h-9 rounded-full border-2 border-moss"/>
</div>
<div class="text-xs leading-tight">
<div class="flex text-mustard text-[12px]"><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-white ml-1">4.9/5</span></div>
<div class="text-white/70">Trusted by 82,000+ happy homes</div>
</div>
</div>
</div>
<img src="https://picsum.photos/800/560?random=1" class="w-full h-[320px] md:h-[360px] object-cover mt-4 lg:mt-6 rounded-t-[28px]" alt="hero"/>
<div class="absolute right-6 bottom-[340px] hidden md:flex bg-white text-ink rounded-2xl p-3 gap-3 shadow-xl items-center">
<img src="https://picsum.photos/60/60?random=11" class="w-12 h-12 rounded-xl object-cover"/>
<div class="pr-2">
<div class="text-xs font-bold">Harvest Stoneware Set</div>
<div class="text-xs text-black/60">$128.00 <span class="line-through ml-1">$180</span></div>
</div>
<button onclick="addToCart('Harvest Stoneware Set',128)" class="w-9 h-9 rounded-full bg-ink text-white grid place-items-center"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
<!-- Right stack -->
<div class="grid gap-6">
<div class="bg-sand border border-line rounded-[28px] p-6 md:p-8 relative overflow-hidden">
<div class="flex justify-between items-start">
<h3 class="font-serif text-2xl leading-tight">Find Your<br/>Perfect Gift <br/><span class="italic">in 30 seconds</span></h3>
<span class="bg-mustard text-ink text-xs font-bold px-3 py-1 rounded-full">NEW QUIZ</span>
</div>
<p class="text-sm text-black/60 mt-3 max-w-[32ch]">Answer 3 quick questions and we’ll curate a gift box that feels personal, not generic.</p>
<button onclick="document.getElementById('gift-guide').scrollIntoView()" class="mt-5 inline-flex items-center gap-2 border-2 border-ink rounded-full px-5 py-2.5 font-bold text-sm">Start Gift Finder <i class="fa-solid fa-wand-magic-sparkles"></i></button>
<img src="https://picsum.photos/300/180?random=2" class="rounded-2xl w-full h-[160px] object-cover mt-6" alt=""/>
<div class="flex gap-2 mt-4 text-xs font-semibold">
<span class="bg-white border border-line px-3 py-1.5 rounded-full">For Him</span>
<span class="bg-white border border-line px-3 py-1.5 rounded-full">For Her</span>
<span class="bg-ink text-white px-3 py-1.5 rounded-full">Under $50</span>
</div>
</div>
<div class="bg-white border border-line rounded-[28px] p-6">
<div class="flex items-center justify-between">
<h4 class="font-bold">Inventory Checker</h4>
<span class="text-xs bg-green-100 text-green-800 px-2.5 py-1 rounded-full font-bold">Real-time</span>
</div>
<p class="text-sm text-black/60 mt-1">Check if an item is in-stock near you before you check out.</p>
<div class="mt-4 flex gap-2">
<input id="invSku" placeholder="Enter SKU or product name" class="flex-1 bg-sand border border-line rounded-full px-4 py-3 text-sm outline-none"/>
<input id="invZip" placeholder="ZIP" class="w-[110px] bg-sand border border-line rounded-full px-4 py-3 text-sm outline-none"/>
</div>
<button onclick="checkInventory()" class="w-full mt-3 bg-ink text-white rounded-full py-3 font-bold text-sm">Check Availability</button>
<div id="invResult" class="mt-3 text-sm hidden p-3 rounded-xl border"></div>
<div class="flex items-center gap-2 mt-3 text-xs text-black/50"><i class="fa-solid fa-shield-halved"></i> 2-year warranty • 30-day returns</div>
</div>
</div>
</div>
</section>
<!-- TRUST BAR -->
<div class="max-w-[1440px] mx-auto px-4 md:px-8 mt-6">
<div class="bg-white border border-line rounded-full px-4 md:px-8 py-4 flex flex-wrap justify-between gap-4 text-xs md:text-sm font-semibold">
<span class="inline-flex items-center gap-2"><i class="fa-solid fa-leaf text-moss"></i> Sustainably Sourced</span>
<span class="inline-flex items-center gap-2"><i class="fa-solid fa-award text-mustard"></i> Voted Best Home Retailer 2024</span>
<span class="inline-flex items-center gap-2"><i class="fa-solid fa-box-open text-clay"></i> Ships in plastic-free packaging</span>
<span class="inline-flex items-center gap-2"><i class="fa-solid fa-rotate-left text-ink"></i> Easy 30-day returns</span>
</div>
</div>
<!-- FLASH SALES -->
<section id="flash" class="max-w-[1440px] mx-auto px-4 md:px-8 mt-10">
<div class="flex flex-wrap items-end justify-between gap-4">
<div>
<div class="inline-flex items-center gap-2 bg-clay text-white px-3 py-1 rounded-full text-xs font-bold tracking-wide"><i class="fa-solid fa-bolt"></i> FLASH SALE — ENDS SOON</div>
<h2 class="font-serif text-[30px] md:text-4xl mt-2">Weekend Flash: Up to 60% Off</h2>
<p class="text-black/60 text-sm mt-1 max-w-[60ch]">Limited quantities, once they're gone they're gone. Add to cart now and lock in your price — checkout reserves your items for 15 minutes.</p>
</div>
<div class="flex items-center gap-3">
<div class="text-right hidden sm:block">
<div class="text-xs font-bold tracking-widest">TIME LEFT</div>
<div id="countdown" class="font-display font-bold text-xl tracking-tight">14 : 22 : 09</div>
</div>
<a href="#" class="bg-white border border-line px-5 py-2.5 rounded-full font-bold text-sm">View All Deals <i class="fa-solid fa-arrow-right ml-1"></i></a>
</div>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5 mt-6">
<!-- Product Cards -->
<div class="bg-white border border-line rounded-[24px] overflow-hidden group">
<div class="relative">
<img src="https://picsum.photos/400/400?random=10" class="w-full h-[240px] object-cover"/>
<span class="absolute top-3 left-3 bg-clay text-white text-xs font-bold px-2.5 py-1 rounded-full">-45%</span>
<span class="absolute top-3 right-3 bg-white/90 backdrop-blur px-2 py-1 rounded-full text-xs font-bold">Only 3 left!</span>
<button class="absolute bottom-3 right-3 w-9 h-9 bg-white rounded-full grid place-items-center shadow"><i class="fa-regular fa-heart"></i></button>
</div>
<div class="p-4">
<div class="text-xs tracking-widest font-bold text-black/50">LIVING • BESTSELLER</div>
<h3 class="font-bold leading-tight mt-1">Cloud Bouclé Armchair</h3>
<div class="flex items-center gap-1 text-mustard text-xs mt-1"><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-black/60">(1,248)</span></div>
<div class="flex items-baseline gap-2 mt-2"><span class="font-bold text-lg">$549</span> <span class="line-through text-black/40 text-sm">$999</span> <span class="text-green-700 text-xs font-bold">Save $450</span></div>
<div class="w-full bg-sand rounded-full h-2 mt-3"><div class="bg-clay h-2 rounded-full" style="width:82%"></div></div>
<div class="text-xs text-black/60 mt-1">82% claimed</div>
<button onclick="addToCart('Cloud Bouclé Armchair',549)" class="w-full mt-4 bg-ink text-white rounded-full py-3 font-bold text-sm">Add to Cart — Secure Price</button>
<div class="text-center text-xs text-black/50 mt-2">Free shipping • Promo code applied at checkout</div>
</div>
</div>
<div class="bg-white border border-line rounded-[24px] overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/400/400?random=11" class="w-full h-[240px] object-cover"/>
<span class="absolute top-3 left-3 bg-mustard text-ink text-xs font-bold px-2.5 py-1 rounded-full">-30%</span>
</div>
<div class="p-4">
<div class="text-xs tracking-widest font-bold text-black/50">KITCHEN • STAFF PICK</div>
<h3 class="font-bold leading-tight mt-1">Artisan Ceramic Dinner Set (16pc)</h3>
<div class="flex items-center gap-1 text-mustard text-xs mt-1"><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-regular fa-star"></i> <span class="text-black/60">(892)</span></div>
<div class="flex items-baseline gap-2 mt-2"><span class="font-bold text-lg">$128</span> <span class="line-through text-black/40 text-sm">$184</span></div>
<div class="flex gap-2 mt-3">
<span class="w-6 h-6 rounded-full border-2 border-ink" style="background:#E8DDD0"></span>
<span class="w-6 h-6 rounded-full border" style="background:#1A3A2F"></span>
<span class="w-6 h-6 rounded-full border" style="background:#E85D3F"></span>
</div>
<button onclick="addToCart('Artisan Ceramic Dinner Set',128)" class="w-full mt-4 bg-white border-2 border-ink rounded-full py-3 font-bold text-sm">Add to Cart</button>
</div>
</div>
<div class="bg-white border border-line rounded-[24px] overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/400/400?random=12" class="w-full h-[240px] object-cover"/>
<span class="absolute top-3 left-3 bg-ink text-white text-xs font-bold px-2.5 py-1 rounded-full">Bundle & Save</span>
</div>
<div class="p-4">
<div class="text-xs tracking-widest font-bold text-black/50">BEDROOM • ORGANIC</div>
<h3 class="font-bold leading-tight mt-1">Washed Linen Duvet + Pillows</h3>
<div class="flex items-center gap-1 text-mustard text-xs mt-1"><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-black/60">(2,104)</span></div>
<div class="flex items-baseline gap-2 mt-2"><span class="font-bold text-lg">$199</span> <span class="text-green-700 text-xs font-bold">Free pillow set $60 value</span></div>
<button onclick="addToCart('Washed Linen Duvet Bundle',199)" class="w-full mt-4 bg-white border-2 border-ink rounded-full py-3 font-bold text-sm">Add Bundle to Cart</button>
</div>
</div>
<div class="bg-mustard rounded-[24px] p-5 flex flex-col">
<div class="bg-white rounded-2xl p-3 inline-flex items-center gap-2 self-start text-xs font-bold"><i class="fa-solid fa-ticket"></i> Extra 10% with code: FLASH10</div>
<h3 class="font-serif text-2xl mt-4 leading-tight">Spend $250,<br/>get $50 back</h3>
<p class="text-sm text-black/70 mt-2">Add promo code at checkout. Valid until midnight PST. Stacks with free shipping.</p>
<div class="bg-ink text-white rounded-2xl p-4 mt-4 flex items-center justify-between">
<div>
<div class="text-xs opacity-70">Your potential savings</div>
<div id="savingsDemo" class="font-bold text-lg">$0.00</div>
</div>
<button onclick="applyDemoCode()" class="bg-mustard text-ink px-4 py-2 rounded-full font-bold text-sm">Apply Code</button>
</div>
<img src="https://picsum.photos/300/180?random=13" class="rounded-2xl mt-4 w-full h-[150px] object-cover"/>
<a href="#" class="mt-4 text-sm font-bold underline">Terms & details →</a>
</div>
</div>
</section>
<!-- CATEGORIES + MAIN WITH SIDEBAR -->
<section id="categories" class="max-w-[1440px] mx-auto px-4 md:px-8 mt-10 grid lg:grid-cols-[1fr_380px] gap-6">
<div>
<div class="flex items-center justify-between">
<h2 class="font-serif text-2xl md:text-3xl">Shop by Category</h2>
<a href="#" class="hidden md:inline-flex text-sm font-bold border border-line bg-white px-4 py-2 rounded-full">See all categories</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-5">
<a class="bg-white border border-line rounded-[22px] overflow-hidden">
<img src="https://picsum.photos/300/200?random=20" class="w-full h-[150px] object-cover"/>
<div class="p-4"><div class="font-bold">Living Room</div><div class="text-xs text-black/60">1,240 products • From $19</div></div>
</a>
<a class="bg-white border border-line rounded-[22px] overflow-hidden">
<img src="https://picsum.photos/300/200?random=21" class="w-full h-[150px] object-cover"/>
<div class="p-4"><div class="font-bold">Kitchen & Dining</div><div class="text-xs text-black/60">980 products • From $12</div></div>
</a>
<a class="bg-white border border-line rounded-[22px] overflow-hidden">
<img src="https://picsum.photos/300/200?random=22" class="w-full h-[150px] object-cover"/>
<div class="p-4"><div class="font-bold">Bed & Bath</div><div class="text-xs text-black/60">740 products • From $16</div></div>
</a>
<a class="bg-white border border-line rounded-[22px] overflow-hidden">
<img src="https://picsum.photos/300/200?random=23" class="w-full h-[150px] object-cover"/>
<div class="p-4"><div class="font-bold">Outdoor</div><div class="text-xs text-black/60">420 products • From $29</div></div>
</a>
<a class="bg-white border border-line rounded-[22px] overflow-hidden">
<img src="https://picsum.photos/300/200?random=24" class="w-full h-[150px] object-cover"/>
<div class="p-4"><div class="font-bold">Decor & Gifts</div><div class="text-xs text-black/60">1,560 products • From $8</div></div>
</a>
<a class="bg-white border border-line rounded-[22px] overflow-hidden">
<img src="https://picsum.photos/300/200?random=25" class="w-full h-[150px] object-cover"/>
<div class="p-4"><div class="font-bold">Lighting</div><div class="text-xs text-black/60">310 products • From $34</div></div>
</a>
</div>
<!-- SEASONAL COLLECTIONS -->
<section id="seasonal" class="mt-10 bg-white border border-line rounded-[28px] overflow-hidden">
<div class="grid md:grid-cols-2">
<div class="p-8 md:p-10">
<div class="text-xs font-bold tracking-widest text-clay">SEASONAL COLLECTIONS — FALL 2024</div>
<h3 class="font-serif text-[28px] leading-tight mt-2">Harvest Hues,<br/> Woven to Last</h3>
<p class="text-sm text-black/65 leading-relaxed mt-3">Our fall edit leans into warm ochres, deep moss, and raw textures. Think chunky knits, reclaimed wood, and stoneware glazed by hand in Kyoto. Each piece is designed to layer through seasons, so you invest once and love it for years.</p>
<p class="text-sm text-black/65 leading-relaxed mt-3">We visited six independent studios to co-develop exclusive colorways you won’t find elsewhere. Every textile is OEKO-TEX certified, and every wood piece is FSC-approved. Add to cart with confidence — our checkout shows full provenance, care, and carbon footprint.</p>
<div class="flex gap-2 mt-5">
<span class="bg-sand border border-line px-3 py-1.5 rounded-full text-xs font-semibold">Organic Cotton</span>
<span class="bg-sand border border-line px-3 py-1.5 rounded-full text-xs font-semibold">Small Batch</span>
<span class="bg-sand border border-line px-3 py-1.5 rounded-full text-xs font-semibold">Carbon Neutral Ship</span>
</div>
<div class="flex gap-3 mt-6">
<a href="#" class="bg-ink text-white px-6 py-3 rounded-full font-bold text-sm">Shop Seasonal</a>
<a href="#" class="bg-white border-2 border-ink px-6 py-3 rounded-full font-bold text-sm">Lookbook</a>
</div>
</div>
<div class="relative bg-sand p-6 grid grid-cols-2 gap-4">
<img src="https://picsum.photos/300/380?random=30" class="rounded-2xl w-full h-[320px] object-cover"/>
<div class="space-y-4">
<img src="https://picsum.photos/300/180?random=31" class="rounded-2xl w-full h-[150px] object-cover"/>
<div class="bg-white rounded-2xl p-4 border border-line">
<div class="text-xs font-bold">Editor’s Note</div>
<p class="text-xs text-black/60 mt-1 leading-relaxed">“The ribbed throw is unreal — heavy but breathable. I use a promo code FALL20 and track my order in seconds.” — Maya, Buyer</p>
<button class="mt-3 text-xs font-bold underline">Write Review</button>
</div>
<img src="https://picsum.photos/300/160?random=32" class="rounded-2xl w-full h-[100px] object-cover"/>
</div>
</div>
</div>
<!-- feature grid -->
<div class="grid md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-line border-t border-line bg-sand">
<div class="p-6 flex gap-3">
<i class="fa-solid fa-recycle text-moss text-xl"></i>
<div><div class="font-bold text-sm">Circular Design</div><p class="text-xs text-black/60">Repair kits and take-back program included at checkout.</p></div>
</div>
<div class="p-6 flex gap-3">
<i class="fa-solid fa-hand-holding-heart text-clay text-xl"></i>
<div><div class="font-bold text-sm">Maker Direct</div><p class="text-xs text-black/60">We cut out middlemen so artisans earn 3× fair-trade wages.</p></div>
</div>
<div class="p-6 flex gap-3">
<i class="fa-solid fa-box text-ink text-xl"></i>
<div><div class="font-bold text-sm">Ready to Gift</div><p class="text-xs text-black/60">Plastic-free gift wrap and handwritten note for $5 at cart.</p></div>
</div>
</div>
</section>
<!-- CUSTOMER FAVORITES -->
<section id="favorites" class="mt-10">
<div class="flex items-baseline justify-between">
<h2 class="font-serif text-2xl md:text-3xl">Customer Favorites</h2>
<span class="text-sm text-black/60">Based on 14k verified reviews</span>
</div>
<div class="grid md:grid-cols-3 gap-5 mt-5">
<div class="bg-white border border-line rounded-[22px] overflow-hidden">
<img src="https://picsum.photos/400/360?random=40" class="w-full h-[220px] object-cover"/>
<div class="p-4">
<h4 class="font-bold text-sm">Ember Glass Table Lamp</h4>
<p class="text-xs text-black/60 mt-1 line-clamp-2">Warm, diffused light with dimmer. Customers love it for cozy reading nooks. Add to cart and see estimated delivery before checkout.</p>
<div class="flex items-center justify-between mt-3">
<span class="font-bold">$89.00</span>
<div class="text-xs text-mustard"><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></div>
</div>
<button onclick="addToCart('Ember Glass Table Lamp',89)" class="w-full mt-3 bg-moss text-white rounded-full py-2.5 text-sm font-bold">Add to Cart</button>
</div>
</div>
<div class="bg-white border border-line rounded-[22px] overflow-hidden">
<img src="https://picsum.photos/400/360?random=41" class="w-full h-[220px] object-cover"/>
<div class="p-4">
<h4 class="font-bold text-sm">Suri Wool Runner — Oat</h4>
<p class="text-xs text-black/60 mt-1 line-clamp-2">Hand-loomed, naturally stain-resistant. One of our most reordered items this year.</p>
<div class="flex items-center justify-between mt-3">
<span class="font-bold">$149.00</span>
<div class="text-xs text-mustard"><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></div>
</div>
<button onclick="addToCart('Suri Wool Runner',149)" class="w-full mt-3 bg-moss text-white rounded-full py-2.5 text-sm font-bold">Add to Cart</button>
</div>
</div>
<div class="bg-white border border-line rounded-[22px] overflow-hidden">
<img src="https://picsum.photos/400/360?random=42" class="w-full h-[220px] object-cover"/>
<div class="p-4">
<h4 class="font-bold text-sm">Terra Plant Pot Trio</h4>
<p class="text-xs text-black/60 mt-1 line-clamp-2">Matte terracotta with drainage system. Customers rave about gifting this set.</p>
<div class="flex items-center justify-between mt-3">
<span class="font-bold">$62.00</span>
<div class="text-xs text-mustard"><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></div>
</div>
<button onclick="addToCart('Terra Plant Pot Trio',62)" class="w-full mt-3 bg-moss text-white rounded-full py-2.5 text-sm font-bold">Add to Cart</button>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="grid md:grid-cols-3 gap-5 mt-5">
<div class="bg-white border border-line rounded-2xl p-5">
<div class="flex text-mustard text-xs"><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></div>
<p class="text-sm mt-2 leading-relaxed">“Checkout was seamless, Apple Pay worked instantly, and my order arrived 2 days early. The quality exceeds the photos.”</p>
<div class="flex items-center gap-3 mt-4">
<img src="https://i.pravatar.cc/40?u=rev1" class="w-8 h-8 rounded-full"/><div class="text-xs"><div class="font-bold">Jenna R.</div><div class="text-black/60">Verified Buyer • Portland</div></div>
</div>
</div>
<div class="bg-white border border-line rounded-2xl p-5">
<div class="flex text-mustard text-xs"><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></div>
<p class="text-sm mt-2 leading-relaxed">“I used the gift guide quiz for my dad — spot on! He actually wrote a review saying it was his favorite gift.”</p>
<div class="flex items-center gap-3 mt-4">
<img src="https://i.pravatar.cc/40?u=rev2" class="w-8 h-8 rounded-full"/><div class="text-xs"><div class="font-bold">Marcus T.</div><div class="text-black/60">Verified Buyer • Austin</div></div>
</div>
</div>
<div class="bg-white border border-line rounded-2xl p-5">
<div class="flex text-mustard text-xs"><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></div>
<p class="text-sm mt-2 leading-relaxed">“The inventory checker saved me a trip — picked up curbside in 20 minutes. Will definitely track order again.”</p>
<div class="flex items-center gap-3 mt-4">
<img src="https://i.pravatar.cc/40?u=rev3" class="w-8 h-8 rounded-full"/><div class="text-xs"><div class="font-bold">Sofia L.</div><div class="text-black/60">Verified Buyer • Brooklyn</div></div>
</div>
</div>
</div>
</section>
<!-- GIFT GUIDE + FAQ -->
<section id="gift-guide" class="mt-10 bg-ink text-white rounded-[28px] p-7 md:p-10">
<div class="flex flex-wrap justify-between gap-4">
<div>
<div class="text-mustard text-xs font-bold tracking-widest">GIFT GUIDES • QUIZ</div>
<h2 class="font-serif text-3xl mt-1">Not sure what to gift?</h2>
<p class="text-white/70 text-sm max-w-[50ch] mt-2">Build a curated box in three taps. We’ll suggest products that match your budget and style, then you can add to cart as a bundle and apply one promo code.</p>
</div>
<div class="bg-white/10 border border-white/15 rounded-2xl px-4 py-3 text-sm">
<div class="font-bold">Popular now</div>
<div class="text-white/70">Housewarming • Under $50 • For Hosts</div>
</div>
</div>
<div class="grid md:grid-cols-3 gap-4 mt-6">
<button onclick="giftSuggest('cozy')" class="bg-white text-ink rounded-2xl p-4 text-left hover:scale-[1.01] transition">
<div class="text-xs font-bold tracking-widest">QUIZ • STEP 1</div>
<div class="font-bold mt-1">Cozy Homebody</div>
<div class="text-xs text-black/60">Candles, throws, tea rituals</div>
<img src="https://picsum.photos/300/160?random=50" class="rounded-xl w-full h-[110px] object-cover mt-3"/>
<span class="inline-flex mt-3 bg-ink text-white px-4 py-2 rounded-full text-xs font-bold">Choose →</span>
</button>
<button onclick="giftSuggest('minimal')" class="bg-white text-ink rounded-2xl p-4 text-left hover:scale-[1.01] transition">
<div class="text-xs font-bold tracking-widest">QUIZ • STEP 1</div>
<div class="font-bold mt-1">Minimalist</div>
<div class="text-xs text-black/60">Clean lines, natural materials</div>
<img src="https://picsum.photos/300/160?random=51" class="rounded-xl w-full h-[110px] object-cover mt-3"/>
<span class="inline-flex mt-3 bg-ink text-white px-4 py-2 rounded-full text-xs font-bold">Choose →</span>
</button>
<button onclick="giftSuggest('entertainer')" class="bg-white text-ink rounded-2xl p-4 text-left hover:scale-[1.01] transition">
<div class="text-xs font-bold tracking-widest">QUIZ • STEP 1</div>
<div class="font-bold mt-1">The Entertainer</div>
<div class="text-xs text-black/60">Barware, serveware, hosting</div>
<img src="https://picsum.photos/300/160?random=52" class="rounded-xl w-full h-[110px] object-cover mt-3"/>
<span class="inline-flex mt-3 bg-ink text-white px-4 py-2 rounded-full text-xs font-bold">Choose →</span>
</button>
</div>
<div id="giftResult" class="hidden mt-6 bg-white text-ink rounded-2xl p-5"></div>
</section>
<section class="mt-10 bg-white border border-line rounded-[28px] p-6 md:p-8">
<h3 class="font-serif text-2xl">Shopping with us, explained</h3>
<p class="text-sm text-black/60 mt-2 max-w-[70ch]">We believe online shopping should feel as trustworthy as a neighborhood store. Every product page lists materials, maker story, and real customer photos. At checkout you’ll see shipping, taxes, and promo code discounts before you pay — no surprises.</p>
<div class="mt-6 grid md:grid-cols-2 gap-4">
<div class="bg-sand rounded-2xl p-5 border border-line">
<h4 class="font-bold">How checkout works</h4>
<p class="text-sm text-black/60 mt-1 leading-relaxed">Add to cart, apply a promo code if you have one, and choose delivery or curbside pickup. You can track order status via email or account dashboard. Need to change something? Edit your cart up to 30 minutes after purchase.</p>
<a href="#" class="inline-flex mt-3 text-sm font-bold underline">Go to checkout demo</a>
</div>
<div class="bg-sand rounded-2xl p-5 border border-line">
<h4 class="font-bold">Reviews you can trust</h4>
<p class="text-sm text-black/60 mt-1 leading-relaxed">Only verified buyers can write review posts. We incentivize honesty, not just positivity, and we show 1- to 5-star breakdowns plus Q&A from real owners.</p>
<a href="#" class="inline-flex mt-3 text-sm font-bold underline">Write Review</a>
</div>
</div>
<!-- FAQ Accordion -->
<div class="mt-6 divide-y divide-line border border-line rounded-2xl overflow-hidden">
<details class="bg-white p-5 open:bg-sand" open><summary class="font-bold cursor-pointer list-none flex justify-between">What’s your return policy? <span>+</span></summary><p class="text-sm text-black/60 mt-2">Free returns within 30 days. Start a return from your account, print a label, and refunds hit in 2–3 business days after we receive the item.</p></details>
<details class="bg-white p-5"><summary class="font-bold cursor-pointer list-none flex justify-between">Do promo codes stack? <span>+</span></summary><p class="text-sm text-black/60 mt-2">One promo code per order, but it stacks with automatic bundle savings and free shipping thresholds.</p></details>
<details class="bg-white p-5"><summary class="font-bold cursor-pointer list-none flex justify-between">Can I track my order in real time? <span>+</span></summary><p class="text-sm text-black/60 mt-2">Yes — use “Track Order” in the top bar or your account page for live carrier updates.</p></details>
</div>
</section>
</div>
<!-- SIDEBAR -->
<aside class="space-y-6 lg:sticky lg:top-[124px] h-fit">
<div class="bg-white border border-line rounded-[24px] p-6">
<div class="flex items-center justify-between"><h4 class="font-bold">Trending Now</h4><span class="text-xs bg-clay text-white px-2 py-1 rounded-full font-bold">Live</span></div>
<div class="space-y-4 mt-4">
<div class="flex gap-3">
<img src="https://picsum.photos/80/80?random=60" class="w-16 h-16 rounded-xl object-cover"/>
<div class="flex-1"><div class="text-sm font-bold leading-tight">Ribbed Stone Vase — Sand</div><div class="text-xs text-black/60">$34 • 872 sold today</div><div class="w-full bg-sand h-1.5 rounded-full mt-1"><div class="bg-moss h-1.5 rounded-full" style="width:74%"></div></div></div>
</div>
<div class="flex gap-3">
<img src="https://picsum.photos/80/80?random=61" class="w-16 h-16 rounded-xl object-cover"/>
<div class="flex-1"><div class="text-sm font-bold leading-tight">Loom Knit Throw</div><div class="text-xs text-black/60">$89 • Add to cart trending</div><button onclick="addToCart('Loom Knit Throw',89)" class="mt-1 text-xs font-bold underline">Add to Cart</button></div>
</div>
<div class="flex gap-3">
<img src="https://picsum.photos/80/80?random=62" class="w-16 h-16 rounded-xl object-cover"/>
<div class="flex-1"><div class="text-sm font-bold leading-tight">Olive Wood Board</div><div class="text-xs text-black/60">$44 • 4.9★ (3k)</div></div>
</div>
</div>
<a href="#" class="block text-center mt-4 bg-sand border border-line rounded-full py-2.5 text-sm font-bold">View Trending Products</a>
</div>
<div class="bg-moss text-white rounded-[24px] p-6">
<h4 class="font-bold">Popular Categories</h4>
<div class="flex flex-wrap gap-2 mt-3 text-sm">
<span class="bg-white text-ink px-3 py-1.5 rounded-full font-semibold">Candles</span>
<span class="bg-white/10 border border-white/20 px-3 py-1.5 rounded-full">Throw Pillows</span>
<span class="bg-white/10 border border-white/20 px-3 py-1.5 rounded-full">Dinnerware</span>
<span class="bg-white/10 border border-white/20 px-3 py-1.5 rounded-full">Rugs</span>
<span class="bg-white/10 border border-white/20 px-3 py-1.5 rounded-full">Lamps</span>
</div>
<div class="bg-white text-ink rounded-2xl p-4 mt-5 flex gap-3">
<img src="https://i.pravatar.cc/40?u=side1" class="w-9 h-9 rounded-full"/>
<div class="text-sm"><div class="font-bold">Customer Review Spotlight</div><p class="text-black/60 text-xs leading-relaxed">“My cart was huge but checkout applied the best promo code automatically. Love that.”</p></div>
</div>
</div>
<div class="bg-white border border-line rounded-[24px] p-6">
<h4 class="font-bold">Need help?</h4>
<p class="text-sm text-black/60 mt-1">Our stylists can help you find sizes, colors, and gift notes.</p>
<div class="mt-3 grid grid-cols-2 gap-2 text-sm font-bold">
<a href="#" class="bg-sand border border-line rounded-full py-2.5 text-center">Chat Now</a>
<a href="#" class="bg-ink text-white rounded-full py-2.5 text-center">Track Order</a>
</div>
<div class="mt-4 text-xs text-black/50">Average response: 2 min • 9am–9pm ET</div>
</div>
<div class="bg-mustard rounded-[24px] p-6">
<h4 class="font-bold text-ink text-lg leading-tight">Become a Member & Save 15%</h4>
<p class="text-sm text-ink/70 mt-1">Early access to deals, free gift wrap, and member-only promo codes.</p>
<div class="mt-3 flex gap-2">
<input placeholder="Email address" class="flex-1 rounded-full px-4 py-3 text-sm outline-none"/>
<button class="bg-ink text-white px-5 rounded-full font-bold text-sm">Join</button>
</div>
<div class="text-xs text-ink/60 mt-2">No spam. Unsubscribe anytime.</div>
</div>
</aside>
</section>
<!-- NEWSLETTER STRIP -->
<section class="max-w-[1440px] mx-auto px-4 md:px-8 mt-10">
<div class="bg-white border border-line rounded-[24px] px-6 md:px-10 py-6 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-sand border border-line grid place-items-center"><i class="fa-regular fa-envelope"></i></div>
<div><div class="font-bold">Get $20 off your first $100</div><div class="text-sm text-black/60">Plus early access to flash sales and gift guides.</div></div>
</div>
<div class="flex gap-2 w-full md:w-auto">
<input placeholder="Enter your email" class="flex-1 md:w-[320px] bg-sand border border-line rounded-full px-5 py-3 text-sm outline-none"/>
<button class="bg-clay text-white px-6 rounded-full font-bold">Subscribe</button>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="mt-10 bg-ink text-white">
<div class="max-w-[1440px] mx-auto px-4 md:px-8 pt-10 pb-6">
<div class="grid md:grid-cols-5 gap-8">
<div class="md:col-span-2">
<div class="flex items-center gap-3">
<img src="https://placehold.co/44x44/FFFFFF/121214?text=M&font=poppins" class="w-11 h-11 rounded-lg"/>
<div><div class="font-display font-bold">MERCANTILE & Co.</div><div class="text-xs text-white/60 tracking-widest">CURATED FINDS FOR EVERYDAY LIVING</div></div>
</div>
<p class="text-sm text-white/70 mt-4 max-w-[40ch] leading-relaxed">We’re a curated marketplace for the modern home — thoughtfully sourced, fairly made, and designed to last. Shop seasonal collections, flash sales, and gift guides all in one checkout.</p>
<div class="flex gap-3 mt-5">
<a class="w-9 h-9 rounded-full bg-white text-ink grid place-items-center"><i class="fa-brands fa-instagram"></i></a>
<a class="w-9 h-9 rounded-full bg-white text-ink grid place-items-center"><i class="fa-brands fa-tiktok"></i></a>
<a class="w-9 h-9 rounded-full bg-white text-ink grid place-items-center"><i class="fa-brands fa-pinterest"></i></a>
<a class="w-9 h-9 rounded-full bg-white text-ink grid place-items-center"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
<div>
<div class="font-bold text-sm tracking-wide">Shop</div>
<ul class="mt-3 space-y-2 text-sm text-white/70">
<li><a href="#">Deals</a></li><li><a href="#">Categories</a></li><li><a href="#">Seasonal Collections</a></li><li><a href="#">Gift Guides</a></li><li><a href="#">New Arrivals</a></li>
</ul>
</div>
<div>
<div class="font-bold text-sm tracking-wide">Help</div>
<ul class="mt-3 space-y-2 text-sm text-white/70">
<li><a href="#">Track Order</a></li><li><a href="#">Returns & Exchanges</a></li><li><a href="#">Shipping</a></li><li><a href="#">Promo Codes</a></li><li><a href="#">FAQ</a></li>
</ul>
</div>
<div>
<div class="font-bold text-sm tracking-wide">Contact</div>
<ul class="mt-3 space-y-2 text-sm text-white/70">
<li>hello@mercantile-co.com</li>
<li>1 (888) 482-7610</li>
<li>214 Mercer Street, New York, NY 10012</li>
<li class="pt-2"><a href="#" class="bg-white text-ink px-4 py-2 rounded-full font-bold inline-flex">Account →</a></li>
</ul>
</div>
</div>
<div class="mt-8 border-t border-white/10 pt-6 flex flex-wrap gap-4 justify-between text-xs text-white/60">
<div>© 2026 Mercantile & Co. All rights reserved.</div>
<div class="flex gap-4"><a href="#">Privacy Policy</a><a href="#">Terms of Service</a><a href="#">Accessibility</a><a href="#">Sitemap</a></div>
</div>
</div>
</footer>
<!-- CART DRAWER -->
<div id="cartDrawer" class="fixed inset-0 hidden z-50">
<div class="absolute inset-0 bg-ink/40" onclick="toggleCart(false)"></div>
<div class="absolute right-0 top-0 h-full w-[420px] max-w-[92vw] bg-paper flex flex-col">
<div class="p-6 flex items-center justify-between border-b border-line">
<h3 class="font-bold text-lg">Your Bag <span id="cartCount2" class="bg-ink text-white px-2 py-0.5 rounded-full text-xs">0</span></h3>
<button onclick="toggleCart(false)" class="w-9 h-9 rounded-full bg-white border border-line grid place-items-center"><i class="fa-solid fa-xmark"></i></button>
</div>
<div id="cartItems" class="flex-1 overflow-auto p-6 space-y-4">
<div class="text-sm text-black/60">Your bag is empty. Add a few favorites to see savings at checkout.</div>
</div>
<div class="p-6 border-t border-line bg-white space-y-3">
<div class="flex gap-2">
<input id="promoInput" placeholder="Promo code (try WELCOME20)" class="flex-1 bg-sand border border-line rounded-full px-4 py-3 text-sm outline-none"/>
<button onclick="applyPromo()" class="bg-ink text-white px-5 rounded-full font-bold text-sm">Apply</button>
</div>
<div id="promoMsg" class="text-xs hidden"></div>
<div class="flex justify-between text-sm"><span>Subtotal</span><span id="subtotal">$0.00</span></div>
<div class="flex justify-between text-sm text-green-700 font-bold"><span>Discount</span><span id="discount">-$0.00</span></div>
<div class="flex justify-between font-bold text-lg"><span>Total</span><span id="total">$0.00</span></div>
<button class="w-full bg-clay text-white rounded-full py-3 font-bold">Proceed to Checkout</button>
<div class="text-xs text-center text-black/50">Secure checkout • Apple Pay, PayPal, Card</div>
</div>
</div>
</div>
<div id="toast" class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-ink text-white px-5 py-3 rounded-full text-sm font-semibold hidden shadow-xl"></div>
<script>
let cart=[]; let promo=0;
const mobileBtn=document.getElementById('mobileMenuBtn');
mobileBtn.addEventListener('click',()=>document.getElementById('mobileNav').classList.toggle('hidden'));
document.getElementById('cartBtn').addEventListener('click',()=>toggleCart(true));
function toggleCart(show){ document.getElementById('cartDrawer').classList.toggle('hidden', !show); }
function showToast(msg){
const t=document.getElementById('toast'); t.textContent=msg; t.classList.remove('hidden');
setTimeout(()=>t.classList.add('hidden'),2500);
}
function addToCart(name,price){
const found=cart.find(c=>c.name===name);
if(found) found.qty++; else cart.push({name,price,qty:1});
renderCart(); toggleCart(true); showToast(name+' added to cart');
}
function renderCart(){
const c=document.getElementById('cartItems');
const count=cart.reduce((a,b)=>a+b.qty,0);
document.getElementById('cartCount').textContent=count;
document.getElementById('cartCount2').textContent=count;
if(cart.length===0){ c.innerHTML='<div class="text-sm text-black/60">Your bag is empty. Add a few favorites to see savings at checkout.</div>'; }
else{
c.innerHTML=cart.map((it,i)=>`
<div class="flex gap-3 items-center bg-white border border-line rounded-2xl p-3">
<img src="https://picsum.photos/80/80?random=${10+i}" class="w-16 h-16 rounded-xl object-cover"/>
<div class="flex-1"><div class="font-bold text-sm leading-tight">${it.name}</div><div class="text-xs text-black/60">Qty ${it.qty} • $${it.price.toFixed(2)}</div></div>
<button onclick="removeItem(${i})" class="text-xs font-bold underline">Remove</button>
</div>`).join('');
}
const sub=cart.reduce((a,b)=>a+b.price*b.qty,0);
const disc=sub*promo;
document.getElementById('subtotal').textContent='$'+sub.toFixed(2);
document.getElementById('discount').textContent='-$'+disc.toFixed(2);
document.getElementById('total').textContent='$'+(sub-disc).toFixed(2);
document.getElementById('savingsDemo').textContent='$'+disc.toFixed(2);
}
function removeItem(i){ cart.splice(i,1); renderCart(); }
function applyPromo(){
const code=document.getElementById('promoInput').value.trim().toUpperCase();
const msg=document.getElementById('promoMsg');
if(code==='WELCOME20' || code==='FLASH10'){ promo= code==='WELCOME20'?0.2:0.1; msg.textContent='Promo code applied! '+ (promo*100)+'% off.'; msg.className='text-xs text-green-700 bg-green-50 border border-green-200 p-2 rounded-xl'; msg.classList.remove('hidden'); renderCart(); }
else { promo=0; msg.textContent='Invalid promo code. Try WELCOME20 or FLASH10.'; msg.className='text-xs text-red-700 bg-red-50 border border-red-200 p-2 rounded-xl'; msg.classList.remove('hidden'); renderCart(); }
}
function applyDemoCode(){ document.getElementById('promoInput').value='FLASH10'; applyPromo(); toggleCart(true); }
function checkInventory(){
const sku=document.getElementById('invSku').value.trim();
const zip=document.getElementById('invZip').value.trim();
const res=document.getElementById('invResult');
if(!sku || !zip){ res.className='mt-3 text-sm p-3 rounded-xl border border-amber-300 bg-amber-50'; res.textContent='Please enter a product name/SKU and ZIP code.'; res.classList.remove('hidden'); return; }
const inStock=Math.random()>0.3;
if(inStock){
res.className='mt-3 text-sm p-3 rounded-xl border border-green-200 bg-green-50';
res.innerHTML='<b>'+sku+'</b> is <span class="text-green-700 font-bold">In Stock</span> at 3 stores near '+zip+'. Closest: Mercer St (0.4 mi) — Ready for pickup in 2 hours. <a class="underline font-bold" href="#">Reserve & Track Order</a>';
} else {
res.className='mt-3 text-sm p-3 rounded-xl border border-red-200 bg-red-50';
res.innerHTML='<b>'+sku+'</b> is <span class="text-red-700 font-bold">Out of Stock</span> near '+zip+', but available online. Add to cart for free 3-day shipping.';
}
res.classList.remove('hidden');
}
function giftSuggest(type){
const el=document.getElementById('giftResult');
const data={
cozy:{title:'Cozy Homebody Box — $94', items:'Ribbed Candle + Oat Throw + Herbal Tea Set', img:50},
minimal:{title:'Minimalist Box — $112', items:'Stone Vase + Linen Napkins + Oak Tray', img:51},
entertainer:{title:'Entertainer Box — $129', items:'Ceramic Bowls + Olive Wood Board + Bar Spoon', img:52}
};
const d=data[type];
el.innerHTML=`
<div class="flex flex-col md:flex-row gap-4 items-center">
<img src="https://picsum.photos/200/140?random=${d.img}" class="w-full md:w-[200px] h-[140px] object-cover rounded-xl"/>
<div class="flex-1">
<div class="font-bold">${d.title}</div>
<div class="text-sm text-black/60">${d.items}</div>
<div class="text-xs mt-2">Bundle savings applied. Use promo code at checkout.</div>
<div class="flex gap-2 mt-3">
<button onclick="addToCart('${d.title}',99)" class="bg-ink text-white px-5 py-2.5 rounded-full font-bold text-sm">Add Bundle to Cart</button>
<button class="bg-white border border-ink px-5 py-2.5 rounded-full font-bold text-sm">Write Review</button>
</div>
</div>
</div>`;
el.classList.remove('hidden');
el.scrollIntoView({behavior:'smooth', block:'nearest'});
}
// countdown
let secs=14*3600+22*60+9;
setInterval(()=>{
secs=Math.max(0,secs-1);
const h=String(Math.floor(secs/3600)).padStart(2,'0');
const m=String(Math.floor((secs%3600)/60)).padStart(2,'0');
const s=String(secs%60).padStart(2,'0');
const el=document.getElementById('countdown');
if(el) el.textContent=`${h} : ${m} : ${s}`;
},1000);
// search filter demo
document.getElementById('searchInput').addEventListener('keydown', e=>{
if(e.key==='Enter'){ showToast('Searching for: '+ e.target.value); }
});
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:09:38.725Z",
"url": "https://benchmark.aimac.invalid/eefef5b568b1464aca3d9d5ea5af5e33977f64b10e4b89ccc99e1ec9b7a0fd9c.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": []
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body class=\"bg-paper text-ink font-sans antialiased\">",
"target": [
"body"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<div class=\"bg-clay h-2 rounded-full\" style=\"width:82%\"></div>",
"target": [
".h-2.bg-clay.rounded-full"
]
}
]
},
{
"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 has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"hidden md:inline-flex items-center gap-2 text-sm font-medium\"><i class=\"fa-regular fa-user text-lg\"></i> Account</button>",
"target": [
".font-medium.md\\:inline-flex.hidden:nth-child(1)"
]
}
]
},
{
"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=\"font-serif text-[38px] md:text-[52px] leading-[0.95] mt-5\">The Art of <br><span class=\"italic font-light\">Thoughtful</span><br> Living.</h1>",
"target": [
"h1"
]
},
{
"html": "<h3 class=\"font-serif text-2xl leading-tight\">Find Your<br>Perfect Gift <br><span class=\"italic\">in 30 seconds</span></h3>",
"target": [
".items-start > .text-2xl"
]
},
{
"html": "<h4 class=\"font-bold\">Inventory Checker</h4>",
"target": [
".rounded-\\[28px\\].p-6.border-line:nth-child(2) > .justify-between.items-center.flex > h4"
]
},
{
"html": "<h2 class=\"font-serif text-[30px] md:text-4xl mt-2\">Weekend Flash: Up to 60% Off</h2>",
"target": [
".text-\\[30px\\]"
]
},
{
"html": "<h3 class=\"font-bold leading-tight mt-1\">Cloud Boucl\u00e9 Armchair</h3>",
"target": [
".group.rounded-\\[24px\\].overflow-hidden > .p-4 > h3"
]
},
{
"html": "<h3 class=\"font-bold leading-tight mt-1\">Artisan Ceramic Dinner Set (16pc)</h3>",
"target": [
".rounded-\\[24px\\].overflow-hidden.border-line:nth-child(2) > .p-4 > h3"
]
},
{
"html": "<h3 class=\"font-bold leading-tight mt-1\">Washed Linen Duvet + Pillows</h3>",
"target": [
".rounded-\\[24px\\].overflow-hidden.border-line:nth-child(3) > .p-4 > h3"
]
},
{
"html": "<h3 class=\"font-serif text-2xl mt-4 leading-tight\">Spend $250,<br>get $50 back</h3>",
"target": [
".flex-col.bg-mustard.rounded-\\[24px\\] > .text-2xl"
]
},
{
"html": "<h2 class=\"font-serif text-2xl md:text-3xl\">Shop by Category</h2>",
"target": [
".justify-between.items-center.flex > .md\\:text-3xl"
]
},
{
"html": "<h3 class=\"font-serif text-[28px] leading-tight mt-2\">Harvest Hues,<br> Woven to Last</h3>",
"target": [
".text-\\[28px\\]"
]
},
{
"html": "<h2 class=\"font-serif text-2xl md:text-3xl\">Customer Favorites</h2>",
"target": [
".items-baseline.justify-between.flex > .md\\:text-3xl"
]
},
{
"html": "<h4 class=\"font-bold text-sm\">Ember Glass Table Lamp</h4>",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(1) > .p-4 > h4"
]
},
{
"html": "<h4 class=\"font-bold text-sm\">Suri Wool Runner \u2014 Oat</h4>",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(2) > .p-4 > h4"
]
},
{
"html": "<h4 class=\"font-bold text-sm\">Terra Plant Pot Trio</h4>",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(3) > .p-4 > h4"
]
},
{
"html": "<h2 class=\"font-serif text-3xl mt-1\">Not sure what to gift?</h2>",
"target": [
".text-3xl"
]
},
{
"html": "<h3 class=\"font-serif text-2xl\">Shopping with us, explained</h3>",
"target": [
".md\\:p-8.rounded-\\[28px\\] > .text-2xl"
]
},
{
"html": "<h4 class=\"font-bold\">How checkout works</h4>",
"target": [
".p-5.bg-sand.rounded-2xl:nth-child(1) > h4"
]
},
{
"html": "<h4 class=\"font-bold\">Reviews you can trust</h4>",
"target": [
".p-5.bg-sand.rounded-2xl:nth-child(2) > h4"
]
},
{
"html": "<h4 class=\"font-bold\">Trending Now</h4>",
"target": [
".rounded-\\[24px\\].p-6.border-line:nth-child(1) > .justify-between.items-center.flex > h4"
]
},
{
"html": "<h4 class=\"font-bold\">Popular Categories</h4>",
"target": [
".bg-moss.rounded-\\[24px\\].p-6 > h4"
]
},
{
"html": "<h4 class=\"font-bold\">Need help?</h4>",
"target": [
".rounded-\\[24px\\].p-6.border-line:nth-child(3) > h4"
]
},
{
"html": "<h4 class=\"font-bold text-ink text-lg leading-tight\">Become a Member & Save 15%</h4>",
"target": [
".bg-mustard.rounded-\\[24px\\].p-6 > .text-lg"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#1a3a2f",
"contrastRatio": 12.42,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 12.42"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"hidden md:inline-flex items-center gap-2\"><i class=\"fa-solid fa-truck-fast\"></i> Free shipping over $75 \u2022 Free returns within 30 days</span>",
"target": [
".gap-6.items-center.flex > .md\\:inline-flex.hidden.gap-2"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input id=\"searchInput\" placeholder=\"Search 12,000+ products \u2014 try \u201clinen throw\u201d\" class=\"w-full bg-white border border-line rounded-full pl-5 pr-12 py-3 text-sm outline-none focus:border-moss focus:ring-4 focus:ring-moss/10\">",
"target": [
"#searchInput"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": "critical",
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/44x44/1A3A2F/FFFFFF?text=M&font=poppins\" class=\"w-11 h-11 rounded-lg object-cover\" alt=\"logo\">",
"target": [
"img[alt=\"logo\"]"
]
}
]
},
{
"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 id=\"searchInput\" placeholder=\"Search 12,000+ products \u2014 try \u201clinen throw\u201d\" class=\"w-full bg-white border border-line rounded-full pl-5 pr-12 py-3 text-sm outline-none focus:border-moss focus:ring-4 focus:ring-moss/10\">",
"target": [
"#searchInput"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"bg-sand rounded-2xl p-5 border border-line\">",
"target": [
".p-5.bg-sand.rounded-2xl:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"inline-flex mt-3 text-sm font-bold underline\">Go to checkout demo</a>",
"target": [
".p-5.bg-sand.rounded-2xl:nth-child(1) > .underline.inline-flex.mt-3"
]
}
]
},
{
"id": "link-name",
"impact": null,
"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=\"hover:underline\">Track Order</a>",
"target": [
".hover\\:underline[href=\"#\"]:nth-child(1)"
]
}
]
},
{
"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-3 space-y-2 text-sm text-white/70\">\n <li><a href=\"#\">Deals</a></li><li><a href=\"#\">Categories</a></li><li><a href=\"#\">Seasonal Collections</a></li><li><a href=\"#\">Gift Guides</a></li><li><a href=\"#\">New Arrivals</a></li>\n </ul>",
"target": [
"div:nth-child(2) > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#\">Deals</a></li>",
"target": [
"div:nth-child(2) > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/44x44/1A3A2F/FFFFFF?text=M&font=poppins\" class=\"w-11 h-11 rounded-lg object-cover\" alt=\"logo\">",
"target": [
"img[alt=\"logo\"]"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary class=\"font-bold cursor-pointer list-none flex justify-between\">What\u2019s your return policy? <span>+</span></summary>",
"target": [
".open\\:bg-sand > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"hover:underline\">Track Order</a>",
"target": [
".hover\\:underline[href=\"#\"]:nth-child(1)"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e85d3f",
"contrastRatio": 3.46,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": "shortTextContent",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"bg-clay text-white text-[11px] px-1.5 rounded-full\">3</span>",
"target": [
".text-\\[11px\\]"
]
}
],
"impact": "serious",
"message": "Element content is too short to determine if it is actual text content"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"bg-clay text-white text-[11px] px-1.5 rounded-full\">3</span>",
"target": [
".text-\\[11px\\]"
],
"failureSummary": "Fix any of the following:\n Element content is too short to determine if it is actual text content"
}
]
}
],
"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 right-1.5 top-1.5 w-9 h-9 rounded-full bg-ink text-white grid place-items-center\"><i class=\"fa-solid fa-magnifying-glass text-sm\"></i></button>",
"target": [
".right-1\\.5"
],
"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 onclick=\"addToCart('Harvest Stoneware Set',128)\" class=\"w-9 h-9 rounded-full bg-ink text-white grid place-items-center\"><i class=\"fa-solid fa-plus\"></i></button>",
"target": [
".right-6 > .place-items-center.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 bottom-3 right-3 w-9 h-9 bg-white rounded-full grid place-items-center shadow\"><i class=\"fa-regular fa-heart\"></i></button>",
"target": [
".bottom-3"
],
"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": "#ffffff",
"bgColor": "#e85d3f",
"contrastRatio": 3.46,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#flash\" class=\"px-4 py-2 rounded-full bg-clay text-white\">Deals \ud83d\udd25</a>",
"target": [
".bg-clay.py-2[href$=\"#flash\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #e85d3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#flash\" class=\"px-4 py-2 rounded-full bg-clay text-white\">Deals \ud83d\udd25</a>",
"target": [
".bg-clay.py-2[href$=\"#flash\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #e85d3f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e85d3f",
"bgColor": "#fffbf5",
"contrastRatio": 3.35,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"sticky top-0 z-40 bg-paper/95 backdrop-blur border-b border-line\">",
"target": [
"header"
]
},
{
"html": "<body class=\"bg-paper text-ink font-sans antialiased\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.35 (foreground color: #e85d3f, background color: #fffbf5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"ml-auto inline-flex items-center gap-2 text-clay\"><i class=\"fa-solid fa-location-dot\"></i> Check Store Inventory</a>",
"target": [
".ml-auto.text-clay.inline-flex"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.35 (foreground color: #e85d3f, background color: #fffbf5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#808080",
"bgColor": "#ffffff",
"contrastRatio": 3.94,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-line rounded-[28px] p-6\">",
"target": [
".rounded-\\[28px\\].p-6.border-line:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"flex items-center gap-2 mt-3 text-xs text-black/50\"><i class=\"fa-solid fa-shield-halved\"></i> 2-year warranty \u2022 30-day returns</div>",
"target": [
".text-black\\/50.gap-2.mt-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e85d3f",
"contrastRatio": 3.46,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"inline-flex items-center gap-2 bg-clay text-white px-3 py-1 rounded-full text-xs font-bold tracking-wide\"><i class=\"fa-solid fa-bolt\"></i> FLASH SALE \u2014 ENDS SOON</div>",
"target": [
".tracking-wide.bg-clay.py-1"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #e85d3f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"inline-flex items-center gap-2 bg-clay text-white px-3 py-1 rounded-full text-xs font-bold tracking-wide\"><i class=\"fa-solid fa-bolt\"></i> FLASH SALE \u2014 ENDS SOON</div>",
"target": [
".tracking-wide.bg-clay.py-1"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #e85d3f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e85d3f",
"contrastRatio": 3.46,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-3 left-3 bg-clay text-white text-xs font-bold px-2.5 py-1 rounded-full\">-45%</span>",
"target": [
".group.rounded-\\[24px\\].overflow-hidden > .relative > .left-3.top-3.px-2\\.5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #e85d3f, 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 bg-clay text-white text-xs font-bold px-2.5 py-1 rounded-full\">-45%</span>",
"target": [
".group.rounded-\\[24px\\].overflow-hidden > .relative > .left-3.top-3.px-2\\.5"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #e85d3f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#808080",
"bgColor": "#ffffff",
"contrastRatio": 3.94,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-line rounded-[24px] overflow-hidden group\">",
"target": [
".group.rounded-\\[24px\\].overflow-hidden"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-xs tracking-widest font-bold text-black/50\">LIVING \u2022 BESTSELLER</div>",
"target": [
".group.rounded-\\[24px\\].overflow-hidden > .p-4 > .text-black\\/50.tracking-widest.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#999999",
"bgColor": "#ffffff",
"contrastRatio": 2.84,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-line rounded-[24px] overflow-hidden group\">",
"target": [
".group.rounded-\\[24px\\].overflow-hidden"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"line-through text-black/40 text-sm\">$999</span>",
"target": [
".group.rounded-\\[24px\\].overflow-hidden > .p-4 > .items-baseline.mt-2.gap-2 > .text-black\\/40.line-through"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#808080",
"bgColor": "#ffffff",
"contrastRatio": 3.94,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-line rounded-[24px] overflow-hidden group\">",
"target": [
".group.rounded-\\[24px\\].overflow-hidden"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-center text-xs text-black/50 mt-2\">Free shipping \u2022 Promo code applied at checkout</div>",
"target": [
".text-center.text-black\\/50.mt-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#808080",
"bgColor": "#ffffff",
"contrastRatio": 3.94,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-line rounded-[24px] overflow-hidden\">",
"target": [
".rounded-\\[24px\\].overflow-hidden.border-line:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-xs tracking-widest font-bold text-black/50\">KITCHEN \u2022 STAFF PICK</div>",
"target": [
".rounded-\\[24px\\].overflow-hidden.border-line:nth-child(2) > .p-4 > .text-black\\/50.tracking-widest.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#999999",
"bgColor": "#ffffff",
"contrastRatio": 2.84,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-line rounded-[24px] overflow-hidden\">",
"target": [
".rounded-\\[24px\\].overflow-hidden.border-line:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"line-through text-black/40 text-sm\">$184</span>",
"target": [
".rounded-\\[24px\\].overflow-hidden.border-line:nth-child(2) > .p-4 > .items-baseline.mt-2.gap-2 > .text-black\\/40.line-through"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#808080",
"bgColor": "#ffffff",
"contrastRatio": 3.94,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-line rounded-[24px] overflow-hidden\">",
"target": [
".rounded-\\[24px\\].overflow-hidden.border-line:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-xs tracking-widest font-bold text-black/50\">BEDROOM \u2022 ORGANIC</div>",
"target": [
".rounded-\\[24px\\].overflow-hidden.border-line:nth-child(3) > .p-4 > .text-black\\/50.tracking-widest.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e85d3f",
"bgColor": "#ffffff",
"contrastRatio": 3.46,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"seasonal\" class=\"mt-10 bg-white border border-line rounded-[28px] overflow-hidden\">",
"target": [
"#seasonal"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.46 (foreground color: #e85d3f, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-xs font-bold tracking-widest text-clay\">SEASONAL COLLECTIONS \u2014 FALL 2024</div>",
"target": [
".text-clay.tracking-widest.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.46 (foreground color: #e85d3f, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e85d3f",
"contrastRatio": 3.46,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-xs bg-clay text-white px-2 py-1 rounded-full font-bold\">Live</span>",
"target": [
".px-2.bg-clay.py-1"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #e85d3f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs bg-clay text-white px-2 py-1 rounded-full font-bold\">Live</span>",
"target": [
".px-2.bg-clay.py-1"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #e85d3f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#808080",
"bgColor": "#ffffff",
"contrastRatio": 3.94,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-line rounded-[24px] p-6\">",
"target": [
".rounded-\\[24px\\].p-6.border-line:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mt-4 text-xs text-black/50\">Average response: 2 min \u2022 9am\u20139pm ET</div>",
"target": [
".text-black\\/50.mt-4.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6c582b",
"bgColor": "#f2c14e",
"contrastRatio": 4.07,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-mustard rounded-[24px] p-6\">",
"target": [
".bg-mustard.rounded-\\[24px\\].p-6"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.07 (foreground color: #6c582b, background color: #f2c14e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-xs text-ink/60 mt-2\">No spam. Unsubscribe anytime.</div>",
"target": [
".text-ink\\/60"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.07 (foreground color: #6c582b, background color: #f2c14e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e85d3f",
"contrastRatio": 3.46,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"bg-clay text-white px-6 rounded-full font-bold\">Subscribe</button>",
"target": [
".px-6.bg-clay"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #e85d3f, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"bg-clay text-white px-6 rounded-full font-bold\">Subscribe</button>",
"target": [
".px-6.bg-clay"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #e85d3f, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "image-alt",
"impact": "critical",
"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 does not have an alt attribute"
},
{
"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": "<img src=\"https://i.pravatar.cc/40?u=a1\" class=\"w-9 h-9 rounded-full border-2 border-moss\">",
"target": [
"img[src=\"https://i.pravatar.cc/40?u=a1\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://i.pravatar.cc/40?u=a2\" class=\"w-9 h-9 rounded-full border-2 border-moss\">",
"target": [
"img[src=\"https://i.pravatar.cc/40?u=a2\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://i.pravatar.cc/40?u=a3\" class=\"w-9 h-9 rounded-full border-2 border-moss\">",
"target": [
"img[src=\"https://i.pravatar.cc/40?u=a3\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/60/60?random=11\" class=\"w-12 h-12 rounded-xl object-cover\">",
"target": [
".w-12"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/400/400?random=10\" class=\"w-full h-[240px] object-cover\">",
"target": [
".group.rounded-\\[24px\\].overflow-hidden > .relative > .h-\\[240px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/400/400?random=11\" class=\"w-full h-[240px] object-cover\">",
"target": [
".rounded-\\[24px\\].overflow-hidden.border-line:nth-child(2) > .relative > .h-\\[240px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/400/400?random=12\" class=\"w-full h-[240px] object-cover\">",
"target": [
".rounded-\\[24px\\].overflow-hidden.border-line:nth-child(3) > .relative > .h-\\[240px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/180?random=13\" class=\"rounded-2xl mt-4 w-full h-[150px] object-cover\">",
"target": [
".h-\\[150px\\].mt-4.rounded-2xl"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/200?random=20\" class=\"w-full h-[150px] object-cover\">",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(1) > .h-\\[150px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/200?random=21\" class=\"w-full h-[150px] object-cover\">",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(2) > .h-\\[150px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/200?random=22\" class=\"w-full h-[150px] object-cover\">",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(3) > .h-\\[150px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/200?random=23\" class=\"w-full h-[150px] object-cover\">",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(4) > .h-\\[150px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/200?random=24\" class=\"w-full h-[150px] object-cover\">",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(5) > .h-\\[150px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/200?random=25\" class=\"w-full h-[150px] object-cover\">",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(6) > .h-\\[150px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/380?random=30\" class=\"rounded-2xl w-full h-[320px] object-cover\">",
"target": [
".h-\\[320px\\].rounded-2xl.object-cover"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/180?random=31\" class=\"rounded-2xl w-full h-[150px] object-cover\">",
"target": [
".space-y-4 > .h-\\[150px\\].rounded-2xl.object-cover"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/160?random=32\" class=\"rounded-2xl w-full h-[100px] object-cover\">",
"target": [
".h-\\[100px\\]"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/400/360?random=40\" class=\"w-full h-[220px] object-cover\">",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(1) > .h-\\[220px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/400/360?random=41\" class=\"w-full h-[220px] object-cover\">",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(2) > .h-\\[220px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/400/360?random=42\" class=\"w-full h-[220px] object-cover\">",
"target": [
".rounded-\\[22px\\].overflow-hidden.border-line:nth-child(3) > .h-\\[220px\\].object-cover.w-full"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://i.pravatar.cc/40?u=rev1\" class=\"w-8 h-8 rounded-full\">",
"target": [
".p-5.rounded-2xl.border-line:nth-child(1) > .mt-4.gap-3.items-center > .w-8.h-8"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://i.pravatar.cc/40?u=rev2\" class=\"w-8 h-8 rounded-full\">",
"target": [
".p-5.rounded-2xl.border-line:nth-child(2) > .mt-4.gap-3.items-center > .w-8.h-8"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://i.pravatar.cc/40?u=rev3\" class=\"w-8 h-8 rounded-full\">",
"target": [
".p-5.rounded-2xl.border-line:nth-child(3) > .mt-4.gap-3.items-center > .w-8.h-8"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/160?random=50\" class=\"rounded-xl w-full h-[110px] object-cover mt-3\">",
"target": [
"button[onclick=\"giftSuggest('cozy')\"] > .h-\\[110px\\].rounded-xl.object-cover"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/160?random=51\" class=\"rounded-xl w-full h-[110px] object-cover mt-3\">",
"target": [
"button[onclick=\"giftSuggest('minimal')\"] > .h-\\[110px\\].rounded-xl.object-cover"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/300/160?random=52\" class=\"rounded-xl w-full h-[110px] object-cover mt-3\">",
"target": [
"button[onclick=\"giftSuggest('entertainer')\"] > .h-\\[110px\\].rounded-xl.object-cover"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/80/80?random=60\" class=\"w-16 h-16 rounded-xl object-cover\">",
"target": [
".gap-3.flex:nth-child(1) > .w-16.h-16.rounded-xl"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/80/80?random=61\" class=\"w-16 h-16 rounded-xl object-cover\">",
"target": [
".gap-3.flex:nth-child(2) > .w-16.h-16.rounded-xl"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://picsum.photos/80/80?random=62\" class=\"w-16 h-16 rounded-xl object-cover\">",
"target": [
".gap-3.flex:nth-child(3) > .w-16.h-16.rounded-xl"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://i.pravatar.cc/40?u=side1\" class=\"w-9 h-9 rounded-full\">",
"target": [
".mt-5.p-4.rounded-2xl > .w-9.h-9"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"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": "<img src=\"https://placehold.co/44x44/FFFFFF/121214?text=M&font=poppins\" class=\"w-11 h-11 rounded-lg\">",
"target": [
".md\\:col-span-2 > .gap-3.items-center.flex > .w-11.h-11.rounded-lg"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\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": 5782
},
{
"y": 576,
"height": 5782
},
{
"y": 1152,
"height": 5782
},
{
"y": 1728,
"height": 5782
},
{
"y": 2304,
"height": 5782
},
{
"y": 2880,
"height": 5782
},
{
"y": 3456,
"height": 5782
},
{
"y": 4032,
"height": 5782
},
{
"y": 4608,
"height": 5782
},
{
"y": 5062,
"height": 5782
}
],
"scans": 11,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "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: "Deals", "Account", "Categories".
- **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: "Seasonal Collections", "Flash Sales", "Customer Favorites".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "checkout", "promo code", "add to cart".
- **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", "Write Review", "Track Order".
- **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: "inventory checker".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "trending products", "customer reviews", "popular categories".
- **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.