Meta Muse Spark Open – Home and Garden
via Modal · Generated
- AIMAC Debt 33.10
- Cost $0.07
- Total Violations 48
- HTML Size 51 KB
- Em Dashes 34
Screenshot
View Live Page
Accessibility Issues Found
31 Critical 17 Serious
-
button-name critical 1 instance
Buttons must have discernible text
Example HTML
<button class="hidden md:flex w-9 h-9 rounded-full border border-stone-200 items-center justify-center hover:bg-white transition"> -
color-contrast serious 17 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="hidden lg:inline ml-6 opacity-60">Free shipping on tool kits over $149</span> -
image-alt critical 30 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-cream object-cover">
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terra & Timber — Grow Beautiful. Build Better. Live Well.</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'display': ['Fraunces', 'serif'],
'serif': ['Cormorant Garamond', 'serif'],
'sans': ['Inter', 'sans-serif'],
},
colors: {
'sage': { 50: '#f6f7f4', 100: '#e8ebe3', 500: '#8a9a7b', 700: '#5c6b52', 800: '#3d4a37', 900: '#2e3729' },
'clay': { 50: '#fdf6f0', 100: '#fbeadd', 500: '#d98c5f', 600: '#c47a4e', 700: '#a65d32' },
'cream': '#fdfbf7',
'ink': '#1a1e1c',
}
}
}
}
</script>
<style>
html { scroll-behavior: smooth; }
.hero-grid { background-image: radial-gradient(#5c6b52 0.5px, transparent 0.5px); background-size: 24px 24px; opacity: 0.08; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="bg-cream text-ink font-sans antialiased selection:bg-sage-500 selection:text-white">
<!-- TOP BAR -->
<div class="bg-sage-800 text-cream text-[13px] py-2.5 px-4 text-center tracking-wide">
<span class="hidden md:inline">SPRING WORKSHOP SERIES — Early bird pricing ends April 30.</span>
<a href="#workshops" class="underline underline-offset-4 decoration-sage-500 ml-2 font-medium hover:text-white transition">Reserve Your Spot →</a>
<span class="hidden lg:inline ml-6 opacity-60">Free shipping on tool kits over $149</span>
</div>
<!-- HEADER -->
<header class="sticky top-0 z-50 bg-cream/90 backdrop-blur-xl border-b border-stone-200">
<div class="max-w-[1360px] mx-auto px-4 lg:px-6">
<div class="flex items-center justify-between py-4 lg:py-3 gap-6">
<!-- Logo -->
<a href="#" class="flex items-center gap-3 shrink-0">
<div class="w-10 h-10 bg-sage-800 rounded-[10px] flex items-center justify-center text-white">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 2C12 2 7 8 7 13a5 5 0 0 0 10 0c0-5-5-11-5-11z"/><path d="M12 13v8"/><path d="M9 16c-1.5 0-3-1-3-3"/><path d="M15 16c1.5 0 3-1 3-3"/></svg>
</div>
<div>
<div class="font-display font-semibold text-[20px] leading-none tracking-tight">TERRA & TIMBER</div>
<div class="text-[11px] tracking-[0.18em] text-stone-500 font-medium -mt-0.5">GROW BEAUTIFUL • BUILD BETTER</div>
</div>
</a>
<!-- Desktop Nav -->
<nav class="hidden lg:flex items-center gap-7 text-[14px] font-medium text-stone-700">
<a href="#garden-design" class="hover:text-sage-800 transition relative after:absolute after:-bottom-1 after:left-0 after:w-0 hover:after:w-full after:h-[2px] after:bg-clay-500 after:transition-all">Garden Design</a>
<a href="#diy" class="hover:text-sage-800 transition">DIY Projects</a>
<a href="#home-improvement" class="hover:text-sage-800 transition">Home Improvement</a>
<a href="#tool-reviews" class="hover:text-sage-800 transition">Tool Reviews</a>
<a href="#journal" class="hover:text-sage-800 transition">Journal</a>
<a href="#workshops" class="hover:text-sage-800 transition">Workshops</a>
</nav>
<!-- Actions -->
<div class="flex items-center gap-2 lg:gap-3">
<button class="hidden md:flex w-9 h-9 rounded-full border border-stone-200 items-center justify-center hover:bg-white transition">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
</button>
<button class="hidden md:flex w-9 h-9 rounded-full border border-stone-200 items-center justify-center hover:bg-white transition relative">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 7h12l-1 9H7L6 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>
<span class="absolute -top-1 -right-1 w-4 h-4 bg-clay-600 text-white text-[10px] rounded-full grid place-items-center">2</span>
</button>
<a href="#planner" class="hidden sm:inline-flex bg-sage-800 hover:bg-sage-900 text-white px-5 py-2.5 rounded-full text-sm font-semibold transition">Start Your Project</a>
<button id="mobileMenuBtn" class="lg:hidden w-10 h-10 rounded-full bg-ink text-white grid place-items-center">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
</div>
<!-- Mobile Nav -->
<div id="mobileMenu" class="hidden lg:hidden border-t border-stone-200 py-4 space-y-3 pb-6">
<a href="#garden-design" class="block font-medium py-2">Garden Design</a>
<a href="#diy" class="block font-medium py-2">DIY Projects</a>
<a href="#home-improvement" class="block font-medium py-2">Home Improvement</a>
<a href="#tool-reviews" class="block font-medium py-2">Tool Reviews</a>
<a href="#journal" class="block font-medium py-2">Journal</a>
<a href="#workshops" class="block font-medium py-2">Workshops</a>
</div>
</div>
</header>
<!-- HERO -->
<section class="relative overflow-hidden bg-[#f2ede6]">
<div class="absolute inset-0 hero-grid"></div>
<div class="max-w-[1360px] mx-auto px-4 lg:px-6 relative">
<div class="grid lg:grid-cols-[1.05fr_0.95fr] gap-8 lg:gap-10 items-center py-8 lg:py-12">
<!-- Left -->
<div class="pt-2 lg:pt-6">
<div class="inline-flex items-center gap-2 bg-white rounded-full px-3 py-1.5 text-xs font-semibold tracking-wide border border-stone-200 shadow-sm">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
2025 SPRING GROW GUIDE IS LIVE
<span class="hidden sm:inline text-stone-400 font-normal ml-1">— 40+ pages of planting calendars</span>
</div>
<h1 class="font-display text-[38px] sm:text-[52px] lg:text-[64px] font-semibold leading-[0.95] tracking-tight mt-6">
Your home<br>
should <span class="italic font-serif font-light text-sage-700">grow with you.</span>
</h1>
<p class="text-[16px] lg:text-[17px] leading-7 text-stone-600 mt-5 max-w-[560px]">
From first seedlings to full renovations — Terra & Timber is the modern resource for gardeners, makers, and homeowners who believe in doing things beautifully and doing them right.
</p>
<div class="flex flex-wrap gap-3 mt-7">
<a href="#planner" class="bg-clay-600 hover:bg-clay-700 text-white px-7 py-3.5 rounded-full font-semibold text-sm inline-flex items-center gap-2 transition">Browse Spring Ideas <span class="w-6 h-6 bg-white/20 rounded-full grid place-items-center">→</span></a>
<a href="#workshops" class="bg-white border border-stone-200 hover:border-stone-300 px-7 py-3.5 rounded-full font-semibold text-sm inline-flex items-center gap-2 transition"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polygon points="5 3 19 12 5 21 5 3"/></svg> Watch: Build a Raised Bed in 45 min</a>
</div>
<div class="flex items-center gap-6 mt-8 border-t border-stone-300/60 pt-6">
<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-cream object-cover">
<img src="https://i.pravatar.cc/40?u=a2" class="w-9 h-9 rounded-full border-2 border-cream object-cover">
<img src="https://i.pravatar.cc/40?u=a3" class="w-9 h-9 rounded-full border-2 border-cream object-cover">
</div>
<div class="text-sm leading-tight">
<div class="font-semibold flex items-center gap-1.5">Trusted by 84,000+ makers <span class="text-amber-500">★★★★★</span> <span class="text-xs text-stone-500 font-normal">4.9/5</span></div>
<div class="text-stone-500 text-xs">"The only garden site I actually bookmark." — Better Homes & Gardens</div>
</div>
</div>
<!-- Stats -->
<div class="grid grid-cols-3 gap-3 mt-8">
<div class="bg-white rounded-2xl p-4 border border-stone-200">
<div class="text-[22px] font-display font-semibold leading-none">320+</div>
<div class="text-[11px] tracking-widest text-stone-500 font-semibold mt-1">DIY GUIDES</div>
<div class="h-1.5 bg-stone-100 rounded-full mt-2 overflow-hidden"><div class="h-full w-[85%] bg-sage-500 rounded-full"></div></div>
</div>
<div class="bg-sage-800 text-white rounded-2xl p-4">
<div class="text-[22px] font-display font-semibold leading-none">12k</div>
<div class="text-[11px] tracking-widest text-white/70 font-semibold mt-1">GARDENS PLANNED</div>
<div class="text-xs text-white/80 mt-2">This season →</div>
</div>
<div class="bg-white rounded-2xl p-4 border border-stone-200">
<div class="text-[22px] font-display font-semibold leading-none">4.8</div>
<div class="text-[11px] tracking-widest text-stone-500 font-semibold mt-1">AVG. RATING</div>
<div class="text-amber-500 text-xs mt-2">★★★★★ 2,431 reviews</div>
</div>
</div>
</div>
<!-- Right Image -->
<div class="relative">
<div class="rounded-[28px] overflow-hidden bg-stone-200 relative aspect-[4/3.2] lg:aspect-[1.05/1] shadow-xl">
<img src="https://picsum.photos/800/900?random=10" class="w-full h-full object-cover">
<div class="absolute top-4 left-4 bg-white/95 backdrop-blur px-3 py-2 rounded-full text-xs font-semibold flex items-center gap-2 shadow">
<span class="w-2 h-2 bg-green-500 rounded-full"></span> Live Workshop: Today 6PM EST
</div>
<!-- Floating card -->
<div class="absolute bottom-4 left-4 right-4 bg-white rounded-2xl p-4 flex gap-4 items-center shadow-xl">
<img src="https://picsum.photos/100/100?random=11" class="w-14 h-14 rounded-xl object-cover">
<div class="flex-1">
<div class="text-xs font-semibold tracking-widest text-clay-600">FEATURED PROJECT</div>
<div class="font-display font-semibold leading-tight">Cedar Raised Bed — No Power Tools</div>
<div class="text-xs text-stone-500">45 min • Beginner • $68 in materials</div>
</div>
<a href="#diy" class="w-9 h-9 rounded-full bg-ink text-white grid place-items-center shrink-0">→</a>
</div>
</div>
<!-- Side badge -->
<div class="hidden lg:flex absolute -right-2 top-[38%] bg-white rounded-2xl p-3 shadow-xl border border-stone-100 items-center gap-3 rotate-1">
<div class="w-10 h-10 rounded-full bg-orange-50 grid place-items-center text-lg">🌱</div>
<div>
<div class="text-xs font-bold">Plant of the Week</div>
<div class="text-xs text-stone-500">Heirloom Brandywine Tomato</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- LOGO STRIP -->
<div class="border-y border-stone-200 bg-white">
<div class="max-w-[1360px] mx-auto px-4 lg:px-6 py-4 flex flex-wrap items-center justify-between gap-4 text-[11px] tracking-[0.14em] font-semibold text-stone-400">
<span>FEATURED IN</span>
<span class="font-display text-stone-700 text-[15px] tracking-normal">Dwell</span>
<span class="font-serif italic text-stone-700 text-[16px] tracking-normal">House Beautiful</span>
<span class="font-sans font-bold text-stone-700">SUNSET</span>
<span class="font-display text-stone-700">Gardenista</span>
<span class="text-stone-700">THE SPRUCE</span>
<span class="hidden md:inline text-stone-400 font-normal tracking-normal">+ 120k newsletter readers</span>
</div>
</div>
<!-- GARDEN DESIGN / FEATURED GUIDES -->
<section id="garden-design" class="py-14 lg:py-20 bg-cream">
<div class="max-w-[1360px] mx-auto px-4 lg:px-6">
<div class="flex flex-wrap items-end justify-between gap-6">
<div>
<div class="inline-flex items-center gap-2 text-xs font-semibold tracking-widest text-sage-700"><span class="w-6 h-[2px] bg-sage-500"></span> GARDEN PLANNING & DESIGN</div>
<h2 class="font-display text-[32px] lg:text-[42px] font-semibold leading-tight mt-3">Designed to thrive,<br> <span class="font-serif italic font-normal text-sage-700">season after season.</span></h2>
</div>
<p class="max-w-[520px] text-[14px] leading-6 text-stone-600">Whether you’re working with a fire escape or five acres, good design starts with soil, sun, and drainage. Our zone-specific guides take the guesswork out of what to plant, when, and where — including annual rotations and perennial structure.</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-10">
<!-- Card 1 -->
<article class="bg-white rounded-[22px] overflow-hidden border border-stone-200 flex flex-col group">
<div class="h-[220px] overflow-hidden relative">
<img src="https://picsum.photos/600/400?random=20" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
<span class="absolute top-3 left-3 bg-white px-3 py-1 rounded-full text-[11px] font-bold tracking-widest">BEGINNER</span>
</div>
<div class="p-6 flex flex-col flex-1">
<div class="text-[11px] tracking-widest font-semibold text-clay-600">SMALL SPACE • 8 MIN READ</div>
<h3 class="font-display text-[20px] font-semibold leading-tight mt-2">The Balcony Potager: A Complete Edible Layout</h3>
<p class="text-sm leading-6 text-stone-600 mt-3">Learn succession planting for containers — from first frost lettuce to heat-loving peppers — plus drainage layers, potting mix ratios, and how to prevent root rot in summer containers.</p>
<div class="flex items-center gap-2 mt-5">
<img src="https://i.pravatar.cc/28?u=author1" class="w-7 h-7 rounded-full">
<span class="text-xs font-medium">By Maya Chen, Horticulturist</span><span class="text-xs text-stone-400">• Mar 12, 2025</span>
</div>
<a href="#" class="mt-5 inline-flex items-center gap-2 text-sm font-semibold hover:gap-3 transition">Read Guide <span class="w-7 h-7 rounded-full bg-stone-900 text-white grid place-items-center text-xs">→</span></a>
</div>
</article>
<!-- Card 2 -->
<article class="bg-sage-800 text-cream rounded-[22px] overflow-hidden flex flex-col relative">
<div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-2xl"></div>
<div class="p-6 flex-1">
<div class="inline-flex bg-white/10 px-3 py-1 rounded-full text-[11px] font-bold tracking-widest">MOST SAVED ★ 4.9</div>
<h3 class="font-display text-[24px] font-semibold leading-tight mt-4">Landscaping on a Slope: Terracing, Drainage & Plant Choices</h3>
<p class="text-sm leading-6 text-white/80 mt-3">Steep grade doesn’t mean erosion and runoff. We break down French drains, dry creek beds, native groundcovers, and how to build low retaining walls that actually last through freeze-thaw cycles.</p>
<ul class="mt-5 space-y-2 text-sm">
<li class="flex gap-2"><span class="text-white/60">✓</span> Soil percolation test (5-minute DIY)</li>
<li class="flex gap-2"><span class="text-white/60">✓</span> Plant list for zones 4—9 with bloom times</li>
<li class="flex gap-2"><span class="text-white/60">✓</span> Cost breakdown: $240 vs. $1,800 contractor</li>
</ul>
<a href="#" class="mt-6 inline-flex bg-white text-ink px-5 py-2.5 rounded-full text-sm font-semibold">Browse Ideas</a>
</div>
<div class="h-[180px] mx-3 mb-3 rounded-2xl overflow-hidden">
<img src="https://picsum.photos/600/300?random=21" class="w-full h-full object-cover">
</div>
</article>
<!-- Card 3 -->
<article class="bg-white rounded-[22px] overflow-hidden border border-stone-200 flex flex-col group">
<div class="h-[220px] overflow-hidden relative">
<img src="https://picsum.photos/600/400?random=22" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
<span class="absolute top-3 left-3 bg-clay-600 text-white px-3 py-1 rounded-full text-[11px] font-bold tracking-widest">SEASONAL</span>
</div>
<div class="p-6">
<div class="text-[11px] tracking-widest font-semibold text-sage-700">ANNUAL PLANNING • ZONES 5—8</div>
<h3 class="font-display text-[20px] font-semibold leading-tight mt-2">Cut Flower Garden: From Seed to Vase</h3>
<p class="text-sm leading-6 text-stone-600 mt-3">Direct sow zinnias, cosmos, and dahlias for 16 weeks of continuous bloom. Includes spacing charts, pinching schedules, and our favorite heirloom annual varieties for pollinators.</p>
<div class="flex gap-2 mt-4">
<span class="px-3 py-1 bg-stone-100 rounded-full text-xs font-medium">Drainage tips</span>
<span class="px-3 py-1 bg-stone-100 rounded-full text-xs font-medium">Pest prevention</span>
</div>
<a href="#" class="mt-5 inline-flex items-center gap-2 text-sm font-semibold">Read Guide <span class="w-7 h-7 rounded-full border border-stone-200 grid place-items-center">→</span></a>
</div>
</article>
</div>
</div>
</section>
<!-- INTERACTIVE PLANNER -->
<section id="planner" class="py-14 bg-white border-y border-stone-200">
<div class="max-w-[1360px] mx-auto px-4 lg:px-6">
<div class="grid lg:grid-cols-[1.1fr_0.9fr] gap-8 items-start">
<!-- Left -->
<div>
<div class="inline-flex items-center gap-2 bg-sage-50 border border-sage-100 px-3 py-1 rounded-full text-xs font-bold tracking-widest text-sage-800">🌿 INTERACTIVE TOOL — TRY IT NOW</div>
<h2 class="font-display text-[30px] lg:text-[40px] font-semibold leading-tight mt-4">Find your perfect plant <span class="font-serif italic font-normal text-sage-700">in 30 seconds.</span></h2>
<p class="text-sm leading-6 text-stone-600 mt-3 max-w-[560px]">Tell us your light, space, and USDA zone. We’ll filter our nursery-tested library for annuals, perennials, and edibles that actually thrive where you live — including drainage and soil pH notes.</p>
<div class="bg-cream border border-stone-200 rounded-[20px] p-5 mt-6">
<div class="grid sm:grid-cols-3 gap-4">
<label class="space-y-2">
<span class="text-xs font-semibold tracking-widest">LIGHT</span>
<select id="filterLight" class="w-full rounded-full border border-stone-200 bg-white px-4 py-2.5 text-sm">
<option value="all">Any light</option>
<option value="full">Full sun (6h+)</option>
<option value="part">Part shade</option>
<option value="shade">Full shade</option>
</select>
</label>
<label class="space-y-2">
<span class="text-xs font-semibold tracking-widest">SPACE</span>
<select id="filterSpace" class="w-full rounded-full border border-stone-200 bg-white px-4 py-2.5 text-sm">
<option value="all">Any space</option>
<option value="container">Container / Balcony</option>
<option value="bed">Raised bed</option>
<option value="ground">In-ground</option>
</select>
</label>
<label class="space-y-2">
<span class="text-xs font-semibold tracking-widest">ZONE</span>
<select id="filterZone" class="w-full rounded-full border border-stone-200 bg-white px-4 py-2.5 text-sm">
<option value="all">All zones</option>
<option value="5">Zone 5 & colder</option>
<option value="7">Zone 7</option>
<option value="9">Zone 9 & warmer</option>
</select>
</label>
</div>
<div class="grid sm:grid-cols-3 gap-3 mt-4" id="plantResults">
<!-- JS injected -->
</div>
<div class="flex items-center justify-between mt-4 text-xs text-stone-500">
<span id="resultCount">Showing 6 plants</span>
<button onclick="resetFilters()" class="underline underline-offset-4">Reset filters</button>
</div>
</div>
</div>
<!-- Right: Raised Bed Cost Estimator -->
<div class="bg-ink text-cream rounded-[24px] p-6 lg:p-7">
<div class="flex items-start justify-between gap-4">
<div>
<div class="text-xs font-bold tracking-widest text-white/60">CALCULATOR</div>
<h3 class="font-display text-[22px] font-semibold leading-tight mt-1">Raised Bed Cost Estimator</h3>
<p class="text-sm text-white/70 mt-2">Cedar vs. pine, soil volume, and drainage gravel — get a real materials list before you shop.</p>
</div>
<div class="w-10 h-10 rounded-full bg-white/10 grid place-items-center shrink-0">🧮</div>
</div>
<div class="mt-6 space-y-4">
<div class="grid grid-cols-2 gap-4">
<label class="bg-white/5 border border-white/10 rounded-2xl p-3">
<span class="text-[11px] tracking-widest text-white/60">LENGTH (FT)</span>
<input id="bedLength" type="range" min="4" max="12" value="8" class="w-full accent-clay-500 mt-2">
<div class="text-lg font-semibold mt-1"><span id="bedLengthVal">8</span> ft</div>
</label>
<label class="bg-white/5 border border-white/10 rounded-2xl p-3">
<span class="text-[11px] tracking-widest text-white/60">WIDTH (FT)</span>
<input id="bedWidth" type="range" min="2" max="6" value="4" class="w-full accent-clay-500 mt-2">
<div class="text-lg font-semibold mt-1"><span id="bedWidthVal">4</span> ft</div>
</label>
</div>
<label class="flex items-center justify-between bg-white text-ink rounded-full px-4 py-3">
<span class="text-sm font-semibold">Material</span>
<select id="bedMaterial" class="bg-transparent text-sm font-medium text-right pr-2">
<option value="cedar">Cedar — $68</option>
<option value="pine">Pine (treated) — $42</option>
<option value="composite">Composite — $145</option>
</select>
</label>
<div class="bg-white rounded-2xl p-4 text-ink">
<div class="flex justify-between text-sm"><span class="text-stone-500">Lumber + hardware</span><span id="costLumber" class="font-semibold">$68.00</span></div>
<div class="flex justify-between text-sm mt-2"><span class="text-stone-500">Soil mix (0.9 cu yd) + drainage</span><span id="costSoil" class="font-semibold">$54.00</span></div>
<div class="border-t border-stone-200 my-3"></div>
<div class="flex justify-between items-center"><span class="font-semibold">Estimated total</span><span id="costTotal" class="font-display text-[22px] font-bold">$122.00</span></div>
<a href="#" class="mt-4 w-full bg-clay-600 hover:bg-clay-700 text-white rounded-full py-3 font-semibold text-sm flex items-center justify-center gap-2">Shop This Build →</a>
<div class="text-[11px] text-stone-500 text-center mt-2">Includes landscape fabric & gravel for drainage</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- DIY PROJECTS -->
<section id="diy" class="py-14 lg:py-20 bg-cream">
<div class="max-w-[1360px] mx-auto px-4 lg:px-6">
<div class="flex flex-wrap items-center justify-between gap-4">
<h2 class="font-display text-[30px] lg:text-[38px] font-semibold">DIY Projects for every weekend</h2>
<div class="flex gap-2">
<button class="px-4 py-2 bg-ink text-white rounded-full text-sm font-semibold">All</button>
<button class="px-4 py-2 bg-white border border-stone-200 rounded-full text-sm font-medium">Under $50</button>
<button class="px-4 py-2 bg-white border border-stone-200 rounded-full text-sm font-medium hidden sm:inline-flex">Weekend Build</button>
<button class="px-4 py-2 bg-white border border-stone-200 rounded-full text-sm font-medium">No Saw Needed</button>
</div>
</div>
<div class="grid lg:grid-cols-[1.6fr_0.9fr] gap-6 mt-8">
<!-- Projects Grid -->
<div class="grid sm:grid-cols-2 gap-5">
<article class="bg-white rounded-[20px] overflow-hidden border border-stone-200 group">
<div class="h-44 overflow-hidden"><img src="https://picsum.photos/500/300?random=30" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"></div>
<div class="p-5">
<div class="flex items-center gap-2 text-[11px] font-bold tracking-widest"><span class="px-2.5 py-1 bg-emerald-50 text-emerald-700 rounded-full">EASY</span><span class="text-stone-400">• 2 HOURS • $28</span></div>
<h3 class="font-display font-semibold text-[17px] mt-2">Self-Watering Herb Tower</h3>
<p class="text-sm text-stone-600 leading-5 mt-1">Terracotta stack with hidden reservoir. Perfect drainage, no daily watering.</p>
<div class="flex items-center gap-2 mt-3 text-xs text-stone-500"><span>★ 4.9 (312)</span><span>•</span><span>12k saves</span></div>
</div>
</article>
<article class="bg-white rounded-[20px] overflow-hidden border border-stone-200 group">
<div class="h-44 overflow-hidden"><img src="https://picsum.photos/500/300?random=31" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"></div>
<div class="p-5">
<div class="flex items-center gap-2 text-[11px] font-bold tracking-widest"><span class="px-2.5 py-1 bg-amber-50 text-amber-700 rounded-full">WEEKEND</span><span class="text-stone-400">• 6 HOURS • $140</span></div>
<h3 class="font-display font-semibold text-[17px] mt-2">Pallet Potting Bench</h3>
<p class="text-sm text-stone-600 leading-5 mt-1">Reclaimed wood build with sink basin and soil storage.</p>
<div class="flex items-center gap-2 mt-3 text-xs text-stone-500"><span>★ 4.8 (189)</span><span>•</span><span>8k saves</span></div>
</div>
</article>
<article class="bg-white rounded-[20px] overflow-hidden border border-stone-200 group">
<div class="h-44 overflow-hidden"><img src="https://picsum.photos/500/300?random=32" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"></div>
<div class="p-5">
<div class="flex items-center gap-2 text-[11px] font-bold tracking-widest"><span class="px-2.5 py-1 bg-blue-50 text-blue-700 rounded-full">KID-FRIENDLY</span><span class="text-stone-400">• 45 MIN • $18</span></div>
<h3 class="font-display font-semibold text-[17px] mt-2">Pollinator Water Station</h3>
<p class="text-sm text-stone-600 leading-5 mt-1">Simple stone & dish build that protects bees and butterflies.</p>
<div class="flex items-center gap-2 mt-3 text-xs text-stone-500"><span>★ 5.0 (94)</span><span>•</span><span>4k saves</span></div>
</div>
</article>
<article class="bg-white rounded-[20px] overflow-hidden border border-stone-200 group">
<div class="h-44 overflow-hidden"><img src="https://picsum.photos/500/300?random=33" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"></div>
<div class="p-5">
<div class="flex items-center gap-2 text-[11px] font-bold tracking-widest"><span class="px-2.5 py-1 bg-stone-100 text-stone-700 rounded-full">RENOVATION</span><span class="text-stone-400">• 1 DAY • $220</span></div>
<h3 class="font-display font-semibold text-[17px] mt-2">Garden Tool Shed Makeover</h3>
<p class="text-sm text-stone-600 leading-5 mt-1">Organization, French cleats, and weatherproofing for under $250.</p>
<div class="flex items-center gap-2 mt-3 text-xs text-stone-500"><span>★ 4.9 (421)</span><span>•</span><span>19k saves</span></div>
</div>
</article>
</div>
<!-- Sidebar: Before & After + Trending -->
<div class="space-y-6">
<div class="bg-white rounded-[20px] border border-stone-200 p-5">
<div class="flex items-center justify-between">
<h4 class="font-display font-semibold text-[18px]">Before & After</h4>
<span class="text-xs font-bold tracking-widest bg-sage-50 text-sage-800 px-2.5 py-1 rounded-full">DIY SUCCESS STORIES</span>
</div>
<div class="mt-4 rounded-2xl overflow-hidden relative">
<img src="https://picsum.photos/600/360?random=34" class="w-full h-[220px] object-cover">
<div class="absolute top-3 left-3 bg-black/70 text-white text-[11px] font-bold px-2.5 py-1 rounded-full">BEFORE</div>
<div class="absolute top-3 right-3 bg-white text-ink text-[11px] font-bold px-2.5 py-1 rounded-full">AFTER — 3 WEEKS LATER</div>
</div>
<p class="text-sm leading-6 text-stone-600 mt-4"><strong class="text-ink">Lena’s shady patio in Portland</strong> — poor drainage and compacted soil. We added a 4-inch gravel drainage layer, shade-tolerant hostas, and cedar edging. Total renovation: $310 and one weekend.</p>
<div class="flex items-center gap-3 mt-4">
<img src="https://i.pravatar.cc/36?u=lena" class="w-9 h-9 rounded-full">
<div class="text-sm"><div class="font-semibold leading-none">Lena M.</div><div class="text-xs text-stone-500">Zone 8b • Container garden</div></div>
<a href="#" class="ml-auto text-xs font-semibold underline underline-offset-4">Read story</a>
</div>
</div>
<div class="bg-sage-800 rounded-[20px] p-5 text-cream">
<h4 class="font-display font-semibold">Trending Ideas</h4>
<ul class="mt-4 space-y-3 text-sm">
<li class="flex gap-3 items-center bg-white/5 rounded-2xl p-3 border border-white/10"><span class="text-lg">🪴</span><div><div class="font-medium">No-dig beds for clay soil</div><div class="text-white/60 text-xs">Fix drainage without tilling</div></div><span class="ml-auto">→</span></li>
<li class="flex gap-3 items-center bg-white/5 rounded-2xl p-3 border border-white/10"><span class="text-lg">💡</span><div><div class="font-medium">Solar path lighting on a budget</div><div class="text-white/60 text-xs">$12 per light, no wiring</div></div><span class="ml-auto">→</span></li>
<li class="flex gap-3 items-center bg-white/5 rounded-2xl p-3 border border-white/10"><span class="text-lg">🧱</span><div><div class="font-medium">Dry-stack fire pit</div><div class="text-white/60 text-xs">Weekend renovation, $180</div></div><span class="ml-auto">→</span></li>
</ul>
<a href="#" class="mt-4 inline-flex w-full justify-center bg-white text-ink rounded-full py-2.5 text-sm font-semibold">Browse Ideas</a>
</div>
</div>
</div>
</div>
</section>
<!-- HOME IMPROVEMENT + TOOL REVIEWS -->
<section id="home-improvement" class="py-14 bg-white border-y border-stone-200">
<div class="max-w-[1360px] mx-auto px-4 lg:px-6">
<div class="grid lg:grid-cols-2 gap-10">
<!-- Left content -->
<div>
<div class="text-xs font-bold tracking-widest text-clay-600 flex items-center gap-2"><span class="w-6 h-[2px] bg-clay-500"></span> HOME IMPROVEMENT & RENOVATION</div>
<h2 class="font-display text-[32px] font-semibold leading-tight mt-3">Renovation that respects <span class="font-serif italic font-normal text-sage-700">your home’s bones.</span></h2>
<p class="text-[14px] leading-6 text-stone-600 mt-4">A fresh coat of paint won’t fix poor drainage or dated insulation. We focus on high-impact, low-regret upgrades: weatherstripping, venting, flooring that handles muddy boots, and landscape grading that keeps water away from your foundation. Every guide includes tool lists, permit notes, and honest time estimates.</p>
<p class="text-[14px] leading-6 text-stone-600 mt-3">Our editors test in real homes — not showrooms — so you get true coverage rates, dry times, and whether that “one-coat” claim survives a second winter. Annual maintenance checklists keep your investment protected year-round.</p>
<div class="grid grid-cols-3 gap-3 mt-6">
<div class="bg-cream border border-stone-200 rounded-2xl p-4 text-center"><div class="text-xl">🧰</div><div class="text-xs font-semibold mt-1">Tool Rental vs. Buy</div><div class="text-[11px] text-stone-500">Save $300+ per project</div></div>
<div class="bg-cream border border-stone-200 rounded-2xl p-4 text-center"><div class="text-xl">🏠</div><div class="text-xs font-semibold mt-1">Energy Audit DIY</div><div class="text-[11px] text-stone-500">Find drafts fast</div></div>
<div class="bg-cream border border-stone-200 rounded-2xl p-4 text-center"><div class="text-xl">🌧️</div><div class="text-xs font-semibold mt-1">Drainage 101</div><div class="text-[11px] text-stone-500">Grade & gutter fixes</div></div>
</div>
<a href="#" class="mt-6 inline-flex bg-ink text-white px-6 py-3 rounded-full text-sm font-semibold">Read Guide</a>
</div>
<!-- Tool Reviews -->
<div id="tool-reviews" class="bg-cream border border-stone-200 rounded-[24px] p-6">
<div class="flex items-center justify-between">
<h3 class="font-display text-[20px] font-semibold">Tool Reviews — Lab Tested</h3>
<span class="text-xs font-bold tracking-widest bg-white border border-stone-200 px-3 py-1 rounded-full">2025 EDITOR’S CHOICE</span>
</div>
<p class="text-sm text-stone-600 mt-2">We buy every tool ourselves. 40 hours of digging, sawing, and hard-water testing — no sponsored placements.</p>
<div class="mt-5 space-y-4">
<div class="bg-white rounded-2xl p-4 flex gap-4 border border-stone-200">
<img src="https://picsum.photos/120/120?random=40" class="w-20 h-20 rounded-xl object-cover">
<div class="flex-1">
<div class="flex items-center gap-2"><span class="text-xs font-bold bg-amber-100 text-amber-800 px-2 py-0.5 rounded-full">BEST OVERALL</span><span class="text-xs text-stone-500">Pruner • $34</span></div>
<div class="font-semibold text-sm mt-1">Felco 2 Bypass Pruner</div>
<div class="text-xs text-stone-600">Clean cuts on 1" green wood, all-day comfort. Our annual re-test winner for 3 years.</div>
<div class="flex items-center gap-2 mt-2"><span class="text-amber-500 text-xs">★★★★★</span><a href="#" class="ml-auto bg-ink text-white px-4 py-1.5 rounded-full text-xs font-semibold">Shop Tools</a></div>
</div>
</div>
<div class="bg-white rounded-2xl p-4 flex gap-4 border border-stone-200">
<img src="https://picsum.photos/120/120?random=41" class="w-20 h-20 rounded-xl object-cover">
<div class="flex-1">
<div class="flex items-center gap-2"><span class="text-xs font-bold bg-sage-100 text-sage-800 px-2 py-0.5 rounded-full">BEST VALUE</span><span class="text-xs text-stone-500">Drill • $89</span></div>
<div class="font-semibold text-sm mt-1">Ryobi 18V Drill Kit</div>
<div class="text-xs text-stone-600">Enough torque for deck screws and raised beds, without the pro price.</div>
<div class="flex items-center gap-2 mt-2"><span class="text-amber-500 text-xs">★★★★☆</span><a href="#" class="ml-auto bg-white border border-stone-200 px-4 py-1.5 rounded-full text-xs font-semibold">Read Review</a></div>
</div>
</div>
<div class="bg-white rounded-2xl p-4 flex gap-4 border border-stone-200">
<img src="https://picsum.photos/120/120?random=42" class="w-20 h-20 rounded-xl object-cover">
<div class="flex-1">
<div class="flex items-center gap-2"><span class="text-xs font-bold bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">WATER SAVER</span><span class="text-xs text-stone-500">Hose • $52</span></div>
<div class="font-semibold text-sm mt-1">Flexzilla Garden Hose 50ft</div>
<div class="text-xs text-stone-600">Kink-free with solid brass fittings — survived our freeze test.</div>
<div class="flex items-center gap-2 mt-2"><span class="text-amber-500 text-xs">★★★★★</span><a href="#" class="ml-auto bg-white border border-stone-200 px-4 py-1.5 rounded-full text-xs font-semibold">Shop Tools</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS + FAQ + JOURNAL -->
<section id="journal" class="py-14 lg:py-20 bg-cream">
<div class="max-w-[1360px] mx-auto px-4 lg:px-6">
<div class="text-center max-w-2xl mx-auto">
<div class="text-xs font-bold tracking-widest text-sage-700">COMMUNITY & JOURNAL</div>
<h2 class="font-display text-[32px] lg:text-[40px] font-semibold leading-tight mt-2">Real homes, <span class="font-serif italic font-normal text-sage-700">real progress.</span></h2>
<p class="text-sm leading-6 text-stone-600 mt-3">Every renovation starts messy. Here’s what happens when you have a plan, the right tools, and a little guidance on drainage, annual care, and design.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 mt-10">
<div class="bg-white rounded-[20px] border border-stone-200 p-6">
<div class="flex items-center gap-1 text-amber-500 text-sm">★★★★★ <span class="text-stone-500 text-xs ml-1">Verified purchase</span></div>
<p class="text-[14px] leading-6 text-stone-700 mt-3">“The raised bed calculator saved me a second trip to the lumber yard. Cut list was perfect, and the soil volume estimate was spot-on. Tomatoes are thriving despite our clay soil.”</p>
<div class="flex items-center gap-3 mt-5"><img src="https://i.pravatar.cc/40?u=test1" class="w-9 h-9 rounded-full"><div><div class="text-sm font-semibold">Jordan Patel</div><div class="text-xs text-stone-500">Denver, Zone 5b • First-time gardener</div></div></div>
</div>
<div class="bg-sage-800 text-cream rounded-[20px] p-6 relative overflow-hidden">
<div class="absolute -top-6 -right-6 w-20 h-20 bg-white/10 rounded-full"></div>
<div class="flex items-center gap-1 text-amber-300 text-sm">★★★★★</div>
<p class="text-[14px] leading-6 mt-3">“I finally fixed the drainage behind our garage — French drain guide was clear, photos helped, and I avoided a $2,000 contractor quote. No more flooded basement in spring.”</p>
<div class="flex items-center gap-3 mt-5"><img src="https://i.pravatar.cc/40?u=test2" class="w-9 h-9 rounded-full"><div><div class="text-sm font-semibold">Aisha Williams</div><div class="text-xs text-white/70">Minneapolis, 1924 bungalow</div></div></div>
</div>
<div class="bg-white rounded-[20px] border border-stone-200 p-6">
<div class="flex items-center gap-1 text-amber-500 text-sm">★★★★★ <span class="text-stone-500 text-xs ml-1">Workshop attendee</span></div>
<p class="text-[14px] leading-6 text-stone-700 mt-3">“The pruning workshop changed how I care for my annuals and perennials. Simple, respectful teaching — no gatekeeping. My hydrangeas finally bloomed!”</p>
<div class="flex items-center gap-3 mt-5"><img src="https://i.pravatar.cc/40?u=test3" class="w-9 h-9 rounded-full"><div><div class="text-sm font-semibold">Marco Ruiz</div><div class="text-xs text-stone-500">Austin, Zone 8b • Balcony grower</div></div></div>
</div>
</div>
<!-- FAQ + Newsletter -->
<div class="grid lg:grid-cols-[1.1fr_0.9fr] gap-8 mt-12">
<div class="bg-white rounded-[24px] border border-stone-200 p-6 lg:p-7">
<h3 class="font-display text-[20px] font-semibold">Frequently Asked Questions</h3>
<div class="mt-5 divide-y divide-stone-200" id="faq">
<!-- items injected -->
</div>
</div>
<div id="workshops" class="bg-[#f2ede6] border border-stone-200 rounded-[24px] p-6 lg:p-7">
<div class="inline-flex bg-white border border-stone-200 px-3 py-1 rounded-full text-xs font-bold tracking-widest">GET THE WEEKLY DIGEST</div>
<h3 class="font-display text-[24px] font-semibold leading-tight mt-3">Get planting reminders <br>for your exact zone.</h3>
<p class="text-sm text-stone-600 mt-2">Join 120,000+ gardeners. Seasonal to-dos, drainage checks, and early access to tool tests. No spam — unsubscribe anytime.</p>
<form onsubmit="event.preventDefault(); alert('Thanks for subscribing! 🌱 Check your email.');" class="mt-5 flex gap-2">
<input type="email" required placeholder="Your email address" class="flex-1 bg-white border border-stone-200 rounded-full px-5 py-3 text-sm outline-none focus:border-sage-500">
<button class="bg-clay-600 hover:bg-clay-700 text-white px-6 py-3 rounded-full text-sm font-semibold">Subscribe</button>
</form>
<div class="flex items-center gap-2 mt-3 text-xs text-stone-500"><span class="w-2 h-2 bg-green-500 rounded-full"></span> 2,341 gardeners joined this week • Free printable planting calendar included</div>
<div class="mt-6 grid grid-cols-3 gap-3">
<img src="https://picsum.photos/200/200?random=50" class="w-full h-20 object-cover rounded-xl">
<img src="https://picsum.photos/200/200?random=51" class="w-full h-20 object-cover rounded-xl">
<img src="https://picsum.photos/200/200?random=52" class="w-full h-20 object-cover rounded-xl">
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-ink text-cream pt-10">
<div class="max-w-[1360px] mx-auto px-4 lg:px-6">
<div class="grid lg:grid-cols-[1.3fr_0.7fr_0.7fr_0.7fr] gap-10 pb-10 border-b border-white/10">
<div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-white text-ink rounded-[10px] grid place-items-center font-display font-bold">T&T</div>
<div><div class="font-display font-semibold tracking-tight">TERRA & TIMBER</div><div class="text-xs tracking-widest text-white/60">GROW BEAUTIFUL • BUILD BETTER</div></div>
</div>
<p class="text-sm leading-6 text-white/70 mt-4 max-w-[420px]">Terra & Timber is an independent home and garden resource. We test tools, design gardens, and document renovations so you can create a home that works hard and feels good — with healthy soil, smart drainage, and timeless style.</p>
<div class="flex gap-2 mt-5">
<a href="#" class="w-9 h-9 rounded-full bg-white/10 grid place-items-center hover:bg-white/20">IG</a>
<a href="#" class="w-9 h-9 rounded-full bg-white/10 grid place-items-center hover:bg-white/20">YT</a>
<a href="#" class="w-9 h-9 rounded-full bg-white/10 grid place-items-center hover:bg-white/20">Pi</a>
<a href="#" class="w-9 h-9 rounded-full bg-white/10 grid place-items-center hover:bg-white/20">✉</a>
</div>
</div>
<div>
<div class="text-xs font-bold tracking-widest text-white/60">EXPLORE</div>
<ul class="mt-4 space-y-2 text-sm text-white/80">
<li><a href="#garden-design" class="hover:text-white">Garden Design</a></li>
<li><a href="#diy" class="hover:text-white">DIY Projects</a></li>
<li><a href="#home-improvement" class="hover:text-white">Home Improvement</a></li>
<li><a href="#tool-reviews" class="hover:text-white">Tool Reviews</a></li>
<li><a href="#journal" class="hover:text-white">Journal & Guides</a></li>
</ul>
</div>
<div>
<div class="text-xs font-bold tracking-widest text-white/60">SUPPORT</div>
<ul class="mt-4 space-y-2 text-sm text-white/80">
<li><a href="#" class="hover:text-white">Contact Us</a></li>
<li><a href="#" class="hover:text-white">Shipping & Returns</a></li>
<li><a href="#" class="hover:text-white">Workshops</a></li>
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white">Terms of Service</a></li>
</ul>
</div>
<div>
<div class="text-xs font-bold tracking-widest text-white/60">VISIT OUR STUDIO</div>
<div class="mt-4 text-sm leading-6 text-white/80">
412 Cedar Grove Lane<br>Portland, OR 97204<br><br>
hello@terraandtimber.co<br>(503) 555-0148<br>
Mon–Fri 9am–5pm PST
</div>
</div>
</div>
<div class="py-5 flex flex-wrap items-center justify-between gap-4 text-xs text-white/60">
<span>© 2025 Terra & Timber Co. All rights reserved. Made with soil under our nails.</span>
<span class="flex items-center gap-3">Privacy <span>•</span> Terms <span>•</span> Sitemap <span class="hidden sm:inline">• Designed for modern homes & gardens</span></span>
</div>
</div>
</footer>
<script>
// Mobile menu
document.getElementById('mobileMenuBtn').addEventListener('click', ()=> {
document.getElementById('mobileMenu').classList.toggle('hidden');
});
// Plant data
const plants = [
{ name:'Cherry Tomato', type:'Annual', light:'full', space:'container', zone:'7', img:'https://picsum.photos/300/200?random=60', drainage:'Well-drained, consistent moisture' },
{ name:'Hosta ‘Blue Angel’', type:'Perennial', light:'shade', space:'ground', zone:'5', img:'https://picsum.photos/300/200?random=61', drainage:'Moist, rich soil' },
{ name:'Lavender', type:'Perennial', light:'full', space:'bed', zone:'7', img:'https://picsum.photos/300/200?random=62', drainage:'Excellent drainage essential' },
{ name:'Kale ‘Lacinato’', type:'Annual', light:'part', space:'bed', zone:'5', img:'https://picsum.photos/300/200?random=63', drainage:'Loamy, well-drained' },
{ name:'Snake Plant', type:'Perennial', light:'shade', space:'container', zone:'9', img:'https://picsum.photos/300/200?random=64', drainage:'Very well-drained' },
{ name:'Zinnia Elegans', type:'Annual', light:'full', space:'ground', zone:'9', img:'https://picsum.photos/300/200?random=65', drainage:'Average, avoid waterlog' },
];
function renderPlants() {
const light = document.getElementById('filterLight').value;
const space = document.getElementById('filterSpace').value;
const zone = document.getElementById('filterZone').value;
const filtered = plants.filter(p =>
(light==='all' || p.light===light) &&
(space==='all' || p.space===space) &&
(zone==='all' || p.zone===zone)
);
document.getElementById('resultCount').textContent = `Showing ${filtered.length} plants`;
document.getElementById('plantResults').innerHTML = filtered.map(p=> `
<div class="bg-white border border-stone-200 rounded-2xl overflow-hidden">
<img src="${p.img}" class="h-24 w-full object-cover">
<div class="p-3">
<div class="text-[11px] tracking-widest font-bold text-sage-700">${p.type.toUpperCase()} • ZONE ${p.zone}</div>
<div class="font-semibold text-sm leading-tight">${p.name}</div>
<div class="text-[11px] text-stone-500 mt-1">${p.drainage}</div>
<button class="mt-2 w-full bg-ink text-white rounded-full py-1.5 text-xs font-semibold">Read Guide</button>
</div>
</div>
`).join('') || `<div class="col-span-3 text-center text-sm text-stone-500 py-8 bg-white rounded-2xl border border-dashed">No matches — try broadening your filters.</div>`;
}
['filterLight','filterSpace','filterZone'].forEach(id=> document.getElementById(id).addEventListener('change', renderPlants));
function resetFilters(){ document.getElementById('filterLight').value='all'; document.getElementById('filterSpace').value='all'; document.getElementById('filterZone').value='all'; renderPlants(); }
renderPlants();
// Estimator
const lengthEl=document.getElementById('bedLength'), widthEl=document.getElementById('bedWidth'), matEl=document.getElementById('bedMaterial');
function updateCost(){
const l=parseInt(lengthEl.value), w=parseInt(widthEl.value);
document.getElementById('bedLengthVal').textContent=l;
document.getElementById('bedWidthVal').textContent=w;
const prices={cedar:68, pine:42, composite:145};
const base=prices[matEl.value];
const area=l*w;
const soil = Math.max(32, Math.round(area*3.2 + 18)); // fake formula
document.getElementById('costLumber').textContent='$'+base+'.00';
document.getElementById('costSoil').textContent='$'+soil+'.00';
document.getElementById('costTotal').textContent='$'+(base+soil)+'.00';
}
[lengthEl,widthEl,matEl].forEach(e=> e.addEventListener('input', updateCost));
updateCost();
// FAQ
const faqs=[
{q:"What’s the difference between annual and perennial for beginners?",a:"Annuals complete their life in one season — think zinnias, tomatoes, and basil — and need replanting each spring. Perennials return yearly from the same roots (hostas, lavender). Start with annuals for quick color, add perennials for low-maintenance structure and better long-term drainage stability."},
{q:"How do I know if my yard has a drainage problem?",a:"Look for standing water 24 hours after rain, mossy patches, or foundation staining. A simple percolation test: dig a 12-inch hole, fill with water, and time how fast it drains. Slower than 1 inch per hour suggests compaction or clay — we recommend raised beds and French drains."},
{q:"Do I need a permit for a small renovation or deck?",a:"Most cities require permits for structural, electrical, or plumbing changes — even small decks over 30 inches high. Cosmetic work like painting or garden beds rarely needs one. Check your municipal site or ask us in the workshop chat — we include permit checklists in every guide."},
{q:"Are your tool reviews sponsored?",a:"Never. We purchase every tool at retail, test for at least 40 hours in real conditions, and we don’t accept payment for placement. If a tool fails our drainage, durability, or safety tests, we say so."},
];
document.getElementById('faq').innerHTML=faqs.map((f,i)=>`
<details class="py-4 group ${i===0?'open':''}" ${i===0?'open':''}>
<summary class="list-none flex items-center justify-between cursor-pointer">
<span class="font-semibold text-sm pr-6">${f.q}</span>
<span class="w-7 h-7 rounded-full border border-stone-200 grid place-items-center shrink-0 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-sm leading-6 text-stone-600 mt-3 pr-8">${f.a}</p>
</details>
`).join('');
</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:32.833Z",
"url": "https://benchmark.aimac.invalid/bfd78a0c004643c917a920211ac938f6888a77c591ea1f6807b0c6f339517d25.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": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "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-cream text-ink font-sans antialiased selection:bg-sage-500 selection:text-white\">",
"target": [
"body"
]
}
]
},
{
"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:flex w-9 h-9 rounded-full border border-stone-200 items-center justify-center hover:bg-white transition relative\">",
"target": [
".md\\:flex.hover\\:bg-white.justify-center:nth-child(2)"
]
}
]
},
{
"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-display text-[38px] sm:text-[52px] lg:text-[64px] font-semibold leading-[0.95] tracking-tight mt-6\">\n Your home<br>\n should <span class=\"italic font-serif font-light text-sage-700\">grow with you.</span>\n </h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"font-display text-[32px] lg:text-[42px] font-semibold leading-tight mt-3\">Designed to thrive,<br> <span class=\"font-serif italic font-normal text-sage-700\">season after season.</span></h2>",
"target": [
".lg\\:text-\\[42px\\]"
]
},
{
"html": "<h3 class=\"font-display text-[20px] font-semibold leading-tight mt-2\">The Balcony Potager: A Complete Edible Layout</h3>",
"target": [
".flex-col.flex-1.p-6 > .text-\\[20px\\]"
]
},
{
"html": "<h3 class=\"font-display text-[24px] font-semibold leading-tight mt-4\">Landscaping on a Slope: Terracing, Drainage & Plant Choices</h3>",
"target": [
".flex-1.p-6 > .text-\\[24px\\]"
]
},
{
"html": "<h3 class=\"font-display text-[20px] font-semibold leading-tight mt-2\">Cut Flower Garden: From Seed to Vase</h3>",
"target": [
".rounded-\\[22px\\].flex-col:nth-child(3) > .p-6 > .text-\\[20px\\]"
]
},
{
"html": "<h2 class=\"font-display text-[30px] lg:text-[40px] font-semibold leading-tight mt-4\">Find your perfect plant <span class=\"font-serif italic font-normal text-sage-700\">in 30 seconds.</span></h2>",
"target": [
".text-\\[30px\\].lg\\:text-\\[40px\\]"
]
},
{
"html": "<h3 class=\"font-display text-[22px] font-semibold leading-tight mt-1\">Raised Bed Cost Estimator</h3>",
"target": [
".items-start.gap-4.justify-between > div:nth-child(1) > .text-\\[22px\\]"
]
},
{
"html": "<h2 class=\"font-display text-[30px] lg:text-[38px] font-semibold\">DIY Projects for every weekend</h2>",
"target": [
".lg\\:text-\\[38px\\]"
]
},
{
"html": "<h3 class=\"font-display font-semibold text-[17px] mt-2\">Self-Watering Herb Tower</h3>",
"target": [
"article:nth-child(1) > .p-5 > .text-\\[17px\\]"
]
},
{
"html": "<h3 class=\"font-display font-semibold text-[17px] mt-2\">Pallet Potting Bench</h3>",
"target": [
"article:nth-child(2) > .p-5 > .text-\\[17px\\]"
]
},
{
"html": "<h3 class=\"font-display font-semibold text-[17px] mt-2\">Pollinator Water Station</h3>",
"target": [
"article:nth-child(3) > .p-5 > .text-\\[17px\\]"
]
},
{
"html": "<h3 class=\"font-display font-semibold text-[17px] mt-2\">Garden Tool Shed Makeover</h3>",
"target": [
"article:nth-child(4) > .p-5 > .text-\\[17px\\]"
]
},
{
"html": "<h4 class=\"font-display font-semibold text-[18px]\">Before & After</h4>",
"target": [
".text-\\[18px\\]"
]
},
{
"html": "<h4 class=\"font-display font-semibold\">Trending Ideas</h4>",
"target": [
".text-cream.bg-sage-800.p-5 > h4"
]
},
{
"html": "<h2 class=\"font-display text-[32px] font-semibold leading-tight mt-3\">Renovation that respects <span class=\"font-serif italic font-normal text-sage-700\">your home\u2019s bones.</span></h2>",
"target": [
".lg\\:grid-cols-2 > div:nth-child(1) > .text-\\[32px\\]"
]
},
{
"html": "<h3 class=\"font-display text-[20px] font-semibold\">Tool Reviews \u2014 Lab Tested</h3>",
"target": [
".justify-between.items-center.flex > .text-\\[20px\\]"
]
},
{
"html": "<h2 class=\"font-display text-[32px] lg:text-[40px] font-semibold leading-tight mt-2\">Real homes, <span class=\"font-serif italic font-normal text-sage-700\">real progress.</span></h2>",
"target": [
".lg\\:text-\\[40px\\].text-\\[32px\\]"
]
},
{
"html": "<h3 class=\"font-display text-[20px] font-semibold\">Frequently Asked Questions</h3>",
"target": [
".lg\\:p-7.rounded-\\[24px\\].p-6:nth-child(1) > .text-\\[20px\\]"
]
},
{
"html": "<h3 class=\"font-display text-[24px] font-semibold leading-tight mt-3\">Get planting reminders <br>for your exact zone.</h3>",
"target": [
"#workshops > .text-\\[24px\\]"
]
}
],
"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": "#fdfbf7",
"bgColor": "#3d4a37",
"contrastRatio": 9.09,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 9.09"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"hidden md:inline\">SPRING WORKSHOP SERIES \u2014 Early bird pricing ends April 30.</span>",
"target": [
".text-\\[13px\\] > .md\\:inline.hidden"
]
}
]
},
{
"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": [
{
"html": "<label class=\"space-y-2\">",
"target": [
".sm\\:grid-cols-3.gap-4.grid > label:nth-child(1)"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"filterLight\" class=\"w-full rounded-full border border-stone-200 bg-white px-4 py-2.5 text-sm\">",
"target": [
"#filterLight"
]
}
]
},
{
"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": "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": "implicit-label",
"data": {
"implicitLabel": "LENGTH (FT) 8 ft"
},
"relatedNodes": [
{
"html": "<label class=\"bg-white/5 border border-white/10 rounded-2xl p-3\">",
"target": [
".grid-cols-2 > label:nth-child(1)"
]
}
],
"impact": "critical",
"message": "Element has an implicit (wrapped) <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input id=\"bedLength\" type=\"range\" min=\"4\" max=\"12\" value=\"8\" class=\"w-full accent-clay-500 mt-2\">",
"target": [
"#bedLength"
]
}
]
},
{
"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",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"bg-sage-800 text-cream text-[13px] py-2.5 px-4 text-center tracking-wide\">",
"target": [
".text-\\[13px\\]"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text in some way other than by color"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"bg-sage-800 text-cream text-[13px] py-2.5 px-4 text-center tracking-wide\">",
"target": [
".text-\\[13px\\]"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#workshops\" class=\"underline underline-offset-4 decoration-sage-500 ml-2 font-medium hover:text-white transition\">Reserve Your Spot \u2192</a>",
"target": [
".decoration-sage-500"
]
}
]
},
{
"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=\"#workshops\" class=\"underline underline-offset-4 decoration-sage-500 ml-2 font-medium hover:text-white transition\">Reserve Your Spot \u2192</a>",
"target": [
".decoration-sage-500"
]
}
]
},
{
"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-5 space-y-2 text-sm\">",
"target": [
".flex-1.p-6 > 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 class=\"flex gap-2\"><span class=\"text-white/60\">\u2713</span> Soil percolation test (5-minute DIY)</li>",
"target": [
".flex-1.p-6 > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"hidden md:flex w-9 h-9 rounded-full border border-stone-200 items-center justify-center hover:bg-white transition\">",
"target": [
".md\\:flex.hover\\:bg-white.justify-center:nth-child(1)"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "implicit-label",
"data": {
"implicitLabel": "LIGHT"
},
"relatedNodes": [
{
"html": "<label class=\"space-y-2\">",
"target": [
".sm\\:grid-cols-3.gap-4.grid > label:nth-child(1)"
]
}
],
"impact": "critical",
"message": "Element has an implicit (wrapped) <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"filterLight\" class=\"w-full rounded-full border border-stone-200 bg-white px-4 py-2.5 text-sm\">",
"target": [
"#filterLight"
]
}
]
},
{
"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=\"list-none flex items-center justify-between cursor-pointer\">",
"target": [
".open > 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-size",
"data": {
"minSize": 24,
"width": 296.9,
"height": 40
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (296.9px by 40px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"flex items-center gap-3 shrink-0\">",
"target": [
".shrink-0.gap-3[href=\"#\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c47a4e",
"contrastRatio": 3.36,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": "shortTextContent",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute -top-1 -right-1 w-4 h-4 bg-clay-600 text-white text-[10px] rounded-full grid place-items-center\">2</span>",
"target": [
".-top-1"
]
}
],
"impact": "serious",
"message": "Element content is too short to determine if it is actual text content"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute -top-1 -right-1 w-4 h-4 bg-clay-600 text-white text-[10px] rounded-full grid place-items-center\">2</span>",
"target": [
".-top-1"
],
"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=\"hidden md:flex w-9 h-9 rounded-full border border-stone-200 items-center justify-center hover:bg-white transition\">",
"target": [
".md\\:flex.hover\\:bg-white.justify-center:nth-child(1)"
],
"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": "#b0b4aa",
"bgColor": "#3d4a37",
"contrastRatio": 4.45,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-sage-800 text-cream text-[13px] py-2.5 px-4 text-center tracking-wide\">",
"target": [
".text-\\[13px\\]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.45 (foreground color: #b0b4aa, background color: #3d4a37, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"hidden lg:inline ml-6 opacity-60\">Free shipping on tool kits over $149</span>",
"target": [
".lg\\:inline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.45 (foreground color: #b0b4aa, background color: #3d4a37, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a8a29e",
"bgColor": "#ffffff",
"contrastRatio": 2.52,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border-y border-stone-200 bg-white\">",
"target": [
".border-y.bg-white.border-stone-200:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>FEATURED IN</span>",
"target": [
".tracking-\\[0\\.14em\\] > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a8a29e",
"bgColor": "#ffffff",
"contrastRatio": 2.52,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border-y border-stone-200 bg-white\">",
"target": [
".border-y.bg-white.border-stone-200:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"hidden md:inline text-stone-400 font-normal tracking-normal\">+ 120k newsletter readers</span>",
"target": [
".md\\:inline.tracking-normal.font-normal"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c47a4e",
"bgColor": "#ffffff",
"contrastRatio": 3.36,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white rounded-[22px] overflow-hidden border border-stone-200 flex flex-col group\">",
"target": [
".rounded-\\[22px\\].flex-col:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.36 (foreground color: #c47a4e, background color: #ffffff, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-[11px] tracking-widest font-semibold text-clay-600\">SMALL SPACE \u2022 8 MIN READ</div>",
"target": [
".text-clay-600.text-\\[11px\\].tracking-widest"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.36 (foreground color: #c47a4e, background color: #ffffff, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a8a29e",
"bgColor": "#ffffff",
"contrastRatio": 2.52,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white rounded-[22px] overflow-hidden border border-stone-200 flex flex-col group\">",
"target": [
".rounded-\\[22px\\].flex-col:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-stone-400\">\u2022 Mar 12, 2025</span>",
"target": [
".text-stone-400.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, 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": "#c47a4e",
"contrastRatio": 3.36,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute top-3 left-3 bg-clay-600 text-white px-3 py-1 rounded-full text-[11px] font-bold tracking-widest\">SEASONAL</span>",
"target": [
".left-3.top-3.bg-clay-600"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.36 (foreground color: #ffffff, background color: #c47a4e, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute top-3 left-3 bg-clay-600 text-white px-3 py-1 rounded-full text-[11px] font-bold tracking-widest\">SEASONAL</span>",
"target": [
".left-3.top-3.bg-clay-600"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.36 (foreground color: #ffffff, background color: #c47a4e, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c47a4e",
"contrastRatio": 3.36,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"mt-4 w-full bg-clay-600 hover:bg-clay-700 text-white rounded-full py-3 font-semibold text-sm flex items-center justify-center gap-2\">Shop This Build \u2192</a>",
"target": [
".text-ink.p-4.rounded-2xl > .hover\\:bg-clay-700.bg-clay-600.py-3"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.36 (foreground color: #ffffff, background color: #c47a4e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"mt-4 w-full bg-clay-600 hover:bg-clay-700 text-white rounded-full py-3 font-semibold text-sm flex items-center justify-center gap-2\">Shop This Build \u2192</a>",
"target": [
".text-ink.p-4.rounded-2xl > .hover\\:bg-clay-700.bg-clay-600.py-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.36 (foreground color: #ffffff, background color: #c47a4e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a8a29e",
"bgColor": "#ffffff",
"contrastRatio": 2.52,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white rounded-[20px] overflow-hidden border border-stone-200 group\">",
"target": [
".sm\\:grid-cols-2 > article:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-stone-400\">\u2022 2 HOURS \u2022 $28</span>",
"target": [
"article:nth-child(1) > .p-5 > .font-bold.gap-2.text-\\[11px\\] > .text-stone-400"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a8a29e",
"bgColor": "#ffffff",
"contrastRatio": 2.52,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white rounded-[20px] overflow-hidden border border-stone-200 group\">",
"target": [
".sm\\:grid-cols-2 > article:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-stone-400\">\u2022 6 HOURS \u2022 $140</span>",
"target": [
"article:nth-child(2) > .p-5 > .font-bold.gap-2.text-\\[11px\\] > .text-stone-400"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a8a29e",
"bgColor": "#ffffff",
"contrastRatio": 2.52,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white rounded-[20px] overflow-hidden border border-stone-200 group\">",
"target": [
".sm\\:grid-cols-2 > article:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-stone-400\">\u2022 45 MIN \u2022 $18</span>",
"target": [
"article:nth-child(3) > .p-5 > .font-bold.gap-2.text-\\[11px\\] > .text-stone-400"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a8a29e",
"bgColor": "#ffffff",
"contrastRatio": 2.52,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"bg-white rounded-[20px] overflow-hidden border border-stone-200 group\">",
"target": [
"article:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-stone-400\">\u2022 1 DAY \u2022 $220</span>",
"target": [
"article:nth-child(4) > .p-5 > .font-bold.gap-2.text-\\[11px\\] > .text-stone-400"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a8a29e, background color: #ffffff, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5bab3",
"bgColor": "#475341",
"contrastRatio": 4.12,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"flex gap-3 items-center bg-white/5 rounded-2xl p-3 border border-white/10\"><span class=\"text-lg\">\ud83e\udeb4</span><div><div class=\"font-medium\">No-dig beds for clay soil</div><div class=\"text-white/60 text-xs\">Fix drainage without tilling</div></div><span class=\"ml-auto\">\u2192</span></li>",
"target": [
".space-y-3 > .bg-white\\/5.border-white\\/10.p-3:nth-child(1)"
]
},
{
"html": "<div class=\"bg-sage-800 rounded-[20px] p-5 text-cream\">",
"target": [
".text-cream.bg-sage-800.p-5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #b5bab3, background color: #475341, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-white/60 text-xs\">Fix drainage without tilling</div>",
"target": [
".bg-white\\/5.border-white\\/10.p-3:nth-child(1) > div > .text-white\\/60.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #b5bab3, background color: #475341, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5bab3",
"bgColor": "#475341",
"contrastRatio": 4.12,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"flex gap-3 items-center bg-white/5 rounded-2xl p-3 border border-white/10\"><span class=\"text-lg\">\ud83d\udca1</span><div><div class=\"font-medium\">Solar path lighting on a budget</div><div class=\"text-white/60 text-xs\">$12 per light, no wiring</div></div><span class=\"ml-auto\">\u2192</span></li>",
"target": [
".space-y-3 > .bg-white\\/5.border-white\\/10.p-3:nth-child(2)"
]
},
{
"html": "<div class=\"bg-sage-800 rounded-[20px] p-5 text-cream\">",
"target": [
".text-cream.bg-sage-800.p-5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #b5bab3, background color: #475341, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-white/60 text-xs\">$12 per light, no wiring</div>",
"target": [
".bg-white\\/5.border-white\\/10.p-3:nth-child(2) > div > .text-white\\/60.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #b5bab3, background color: #475341, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5bab3",
"bgColor": "#475341",
"contrastRatio": 4.12,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<li class=\"flex gap-3 items-center bg-white/5 rounded-2xl p-3 border border-white/10\"><span class=\"text-lg\">\ud83e\uddf1</span><div><div class=\"font-medium\">Dry-stack fire pit</div><div class=\"text-white/60 text-xs\">Weekend renovation, $180</div></div><span class=\"ml-auto\">\u2192</span></li>",
"target": [
".bg-white\\/5.border-white\\/10.p-3:nth-child(3)"
]
},
{
"html": "<div class=\"bg-sage-800 rounded-[20px] p-5 text-cream\">",
"target": [
".text-cream.bg-sage-800.p-5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #b5bab3, background color: #475341, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-white/60 text-xs\">Weekend renovation, $180</div>",
"target": [
".bg-white\\/5.border-white\\/10.p-3:nth-child(3) > div > .text-white\\/60.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #b5bab3, background color: #475341, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c47a4e",
"bgColor": "#ffffff",
"contrastRatio": 3.36,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"home-improvement\" class=\"py-14 bg-white border-y border-stone-200\">",
"target": [
"#home-improvement"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.36 (foreground color: #c47a4e, 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-600 flex items-center gap-2\"><span class=\"w-6 h-[2px] bg-clay-500\"></span> HOME IMPROVEMENT & RENOVATION</div>",
"target": [
".text-clay-600.font-bold.gap-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.36 (foreground color: #c47a4e, 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": "#c47a4e",
"contrastRatio": 3.36,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"bg-clay-600 hover:bg-clay-700 text-white px-6 py-3 rounded-full text-sm font-semibold\">Subscribe</button>",
"target": [
".px-6.hover\\:bg-clay-700.bg-clay-600"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.36 (foreground color: #ffffff, background color: #c47a4e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"bg-clay-600 hover:bg-clay-700 text-white px-6 py-3 rounded-full text-sm font-semibold\">Subscribe</button>",
"target": [
".px-6.hover\\:bg-clay-700.bg-clay-600"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.36 (foreground color: #ffffff, background color: #c47a4e, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#78716c",
"bgColor": "#f2ede6",
"contrastRatio": 4.11,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"workshops\" class=\"bg-[#f2ede6] border border-stone-200 rounded-[24px] p-6 lg:p-7\">",
"target": [
"#workshops"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.11 (foreground color: #78716c, background color: #f2ede6, 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-stone-500\"><span class=\"w-2 h-2 bg-green-500 rounded-full\"></span> 2,341 gardeners joined this week \u2022 Free printable planting calendar included</div>",
"target": [
"#workshops > .mt-3.text-stone-500.gap-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.11 (foreground color: #78716c, background color: #f2ede6, font size: 9.0pt (12px), font weight: normal). 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-cream object-cover\">",
"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-cream object-cover\">",
"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-cream object-cover\">",
"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/800/900?random=10\" class=\"w-full h-full object-cover\">",
"target": [
".rounded-\\[28px\\] > .h-full.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/100/100?random=11\" class=\"w-14 h-14 rounded-xl object-cover\">",
"target": [
".w-14"
],
"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/600/400?random=20\" class=\"w-full h-full object-cover group-hover:scale-105 transition duration-700\">",
"target": [
".rounded-\\[22px\\].flex-col:nth-child(1) > .h-\\[220px\\].relative.overflow-hidden > .duration-700.group-hover\\:scale-105.h-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/28?u=author1\" class=\"w-7 h-7 rounded-full\">",
"target": [
".mt-5.gap-2.items-center:nth-child(4) > .w-7.h-7"
],
"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/600/300?random=21\" class=\"w-full h-full object-cover\">",
"target": [
".h-\\[180px\\] > .h-full.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/600/400?random=22\" class=\"w-full h-full object-cover group-hover:scale-105 transition duration-700\">",
"target": [
".rounded-\\[22px\\].flex-col:nth-child(3) > .h-\\[220px\\].relative.overflow-hidden > .duration-700.group-hover\\:scale-105.h-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=60\" class=\"h-24 w-full object-cover\">",
"target": [
".rounded-2xl.overflow-hidden.bg-white:nth-child(1) > .h-24.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/200?random=61\" class=\"h-24 w-full object-cover\">",
"target": [
".rounded-2xl.overflow-hidden.bg-white:nth-child(2) > .h-24.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/200?random=62\" class=\"h-24 w-full object-cover\">",
"target": [
".rounded-2xl.overflow-hidden.bg-white:nth-child(3) > .h-24.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/200?random=63\" class=\"h-24 w-full object-cover\">",
"target": [
".rounded-2xl.overflow-hidden.bg-white:nth-child(4) > .h-24.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/200?random=64\" class=\"h-24 w-full object-cover\">",
"target": [
".rounded-2xl.overflow-hidden.bg-white:nth-child(5) > .h-24.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/200?random=65\" class=\"h-24 w-full object-cover\">",
"target": [
".rounded-2xl.overflow-hidden.bg-white:nth-child(6) > .h-24.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/500/300?random=30\" class=\"w-full h-full object-cover group-hover:scale-105 transition duration-500\">",
"target": [
"article:nth-child(1) > .h-44.overflow-hidden > .duration-500.group-hover\\:scale-105.h-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/500/300?random=31\" class=\"w-full h-full object-cover group-hover:scale-105 transition duration-500\">",
"target": [
"article:nth-child(2) > .h-44.overflow-hidden > .duration-500.group-hover\\:scale-105.h-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/500/300?random=32\" class=\"w-full h-full object-cover group-hover:scale-105 transition duration-500\">",
"target": [
"article:nth-child(3) > .h-44.overflow-hidden > .duration-500.group-hover\\:scale-105.h-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/500/300?random=33\" class=\"w-full h-full object-cover group-hover:scale-105 transition duration-500\">",
"target": [
"article:nth-child(4) > .h-44.overflow-hidden > .duration-500.group-hover\\:scale-105.h-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/600/360?random=34\" class=\"w-full h-[220px] object-cover\">",
"target": [
".h-\\[220px\\].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://i.pravatar.cc/36?u=lena\" class=\"w-9 h-9 rounded-full\">",
"target": [
".gap-3.mt-4.items-center > .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://picsum.photos/120/120?random=40\" class=\"w-20 h-20 rounded-xl object-cover\">",
"target": [
".gap-4.p-4.rounded-2xl:nth-child(1) > .w-20.h-20.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/120/120?random=41\" class=\"w-20 h-20 rounded-xl object-cover\">",
"target": [
".gap-4.p-4.rounded-2xl:nth-child(2) > .w-20.h-20.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/120/120?random=42\" class=\"w-20 h-20 rounded-xl object-cover\">",
"target": [
".gap-4.p-4.rounded-2xl:nth-child(3) > .w-20.h-20.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=test1\" class=\"w-9 h-9 rounded-full\">",
"target": [
".rounded-\\[20px\\].p-6.bg-white:nth-child(1) > .mt-5.gap-3.items-center > .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://i.pravatar.cc/40?u=test2\" class=\"w-9 h-9 rounded-full\">",
"target": [
".text-cream.bg-sage-800.rounded-\\[20px\\] > .mt-5.gap-3.items-center > .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://i.pravatar.cc/40?u=test3\" class=\"w-9 h-9 rounded-full\">",
"target": [
".rounded-\\[20px\\].p-6.bg-white:nth-child(3) > .mt-5.gap-3.items-center > .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://picsum.photos/200/200?random=50\" class=\"w-full h-20 object-cover rounded-xl\">",
"target": [
".grid-cols-3.mt-6.gap-3 > .h-20.rounded-xl.object-cover:nth-child(1)"
],
"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/200/200?random=51\" class=\"w-full h-20 object-cover rounded-xl\">",
"target": [
".h-20.rounded-xl.object-cover:nth-child(2)"
],
"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/200/200?random=52\" class=\"w-full h-20 object-cover rounded-xl\">",
"target": [
".h-20.rounded-xl.object-cover:nth-child(3)"
],
"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": 6021
},
{
"y": 576,
"height": 6021
},
{
"y": 1152,
"height": 6021
},
{
"y": 1728,
"height": 6021
},
{
"y": 2304,
"height": 6021
},
{
"y": 2880,
"height": 6021
},
{
"y": 3456,
"height": 6021
},
{
"y": 4032,
"height": 6021
},
{
"y": 4608,
"height": 6021
},
{
"y": 5184,
"height": 6021
},
{
"y": 5301,
"height": 6021
}
],
"scans": 12,
"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 "Home and Garden" 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: "Home and Garden"
- Description: Home improvement, gardening, DIY guides, landscaping, and decor resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Home and Garden" 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: "Garden Design", "DIY Projects", "Home Improvement".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Home and Garden" category. Consider themes similar to: "Garden Planning", "Tool Reviews", "Landscaping Tips".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "drainage", "renovation", "annual".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Shop Tools", "Read Guide", "Browse Ideas".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Home and Garden" sector. Ideas similar but not limited to: "plant identifier".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "trending ideas", "before & after", "DIY success stories".
- **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.