Meta Muse Spark Open – Hobbies and Interests
via Modal · Generated
- AIMAC Debt 32.89
- Cost $0.06
- Total Violations 22
- HTML Size 46 KB
- Em Dashes 23
Screenshot
View Live Page
Accessibility Issues Found
9 Critical 13 Serious
-
aria-required-children critical 1 instance
Certain ARIA roles must contain particular children
Example HTML
<div class="filter-tabs" role="tablist"> <button class="tab active">All</button><button class="tab">Woodworking</button><button class="tab"... -
color-contrast serious 13 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#studio" class="btn btn-primary"> -
image-alt critical 6 instances
Images must have alternative text
Example HTML
<img src="https://i.pravatar.cc/100?u=a2"> -
label critical 2 instances
Form elements must have labels
Example HTML
<input type="range" id="sizeRange" min="24" max="72" value="48">
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>Hearthcraft Collective — Make with Meaning. Craft for Life.</title>
<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:wght@400;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
:root{
--cream:#FFF8F0;
--paper:#FFFCF8;
--ink:#1A1E1C;
--muted:#6B7280;
--line:#E8E0D6;
--terracotta:#C15B2C;
--terracotta-dark:#A84C24;
--forest:#1B4332;
--forest-light:#2D6A4F;
--moss:#E9F0E9;
--sand:#F3EDE4;
--accent:#E9A426;
--radius:18px;
--radius-sm:12px;
--shadow:0 12px 40px rgba(27,67,50,.08);
--shadow-lg:0 24px 60px rgba(27,67,50,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1240px,92vw);margin-inline:auto}
.mono{font-family:"JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--forest-light)}
h1,h2,h3{font-family:"Cormorant Garamond",serif;line-height:1.05;letter-spacing:-.02em}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.35rem;border-radius:999px;font-weight:600;font-size:.92rem;border:1px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-primary{background:var(--terracotta);color:white;box-shadow:0 8px 20px rgba(193,91,44,.25)}
.btn-primary:hover{background:var(--terracotta-dark);transform:translateY(-1px)}
.btn-ghost{background:white;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-forest{background:var(--forest);color:white}
.btn-forest:hover{background:#143326}
.badge{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.4rem .7rem;border-radius:999px;background:white;border:1px solid var(--line)}
.card{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
/* Header */
.topbar{background:var(--forest);color:#D8F3DC;text-align:center;font-size:.82rem;padding:.55rem 1rem;letter-spacing:.04em}
header{position:sticky;top:0;z-index:50;background:rgba(255,248,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.85rem}
.logo-mark{width:42px;height:42px;border-radius:12px;background:var(--forest);display:grid;place-items:center;color:white;font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.2rem}
.logo-text strong{font-family:"Cormorant Garamond",serif;font-size:1.35rem;line-height:1}
.logo-text span{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:1.6rem;font-weight:500;font-size:.92rem}
.nav-links a{position:relative;opacity:.85}
.nav-links a:hover{opacity:1}
.nav-links a.active{font-weight:700}
.nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--terracotta)}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.icon-btn{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:white;display:grid;place-items:center;cursor:pointer}
.hamburger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:white;place-items:center}
@media(max-width:1020px){
.nav-links{display:none}
.hamburger{display:grid}
.nav-actions .hide-m{ display:none }
}
/* Hero */
.hero{padding:28px 0 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:start}
@media(max-width:980px){ .hero-grid{grid-template-columns:1fr} }
.hero-copy{padding:18px 0}
.eyebrow{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--terracotta);box-shadow:0 0 0 6px rgba(193,91,44,.15)}
.hero h1{font-size:clamp(2.6rem,5vw,4.2rem);margin:.2rem 0 1rem}
.hero h1 em{font-style:italic;color:var(--terracotta);font-weight:600}
.hero p.lead{font-size:1.05rem;color:#3F4A44;max-width:58ch;margin:0 0 1.4rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.2rem 0 1.6rem}
.stats{display:flex;gap:1.6rem;border-top:1px solid var(--line);padding-top:1.2rem;margin-top:1.2rem}
.stats b{font-family:"Cormorant Garamond",serif;font-size:1.6rem;line-height:1}
.stats span{font-size:.78rem;color:var(--muted);display:block}
.hero-visual{position:relative}
.hero-main-img{height:520px;object-fit:cover;width:100%;border-radius:24px;border:1px solid var(--line)}
.float-card{position:absolute;left:-18px;bottom:28px;background:white;border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;display:flex;gap:.9rem;align-items:center;box-shadow:var(--shadow-lg);width:min(340px,92%)}
@media(max-width:980px){ .float-card{left:12px;bottom:12px} .hero-main-img{height:420px} }
.avatar-stack{display:flex}
.avatar-stack img{width:32px;height:32px;border-radius:50%;border:2px solid white;margin-left:-8px}
.avatar-stack img:first-child{margin-left:0}
.mini-pill{position:absolute;right:14px;top:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:999px;padding:.45rem .7rem;font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:.4rem;border:1px solid var(--line)}
.logos-bar{margin-top:18px;background:white;border:1px solid var(--line);border-radius:16px;padding:14px 18px;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.logos-bar small{color:var(--muted);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}
.logo-row{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;opacity:.7;font-family:"Cormorant Garamond",serif;font-weight:700}
/* Sections */
section{padding:56px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:22px}
.section-head h2{font-size:clamp(1.9rem,3.2vw,2.7rem);margin:.35rem 0}
.section-head p{max-width:56ch;color:var(--muted);margin:0}
/* Tools */
.filter-tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:18px}
.tab{padding:.55rem .95rem;border-radius:999px;border:1px solid var(--line);background:white;font-weight:600;font-size:.85rem;cursor:pointer}
.tab.active{background:var(--forest);color:white;border-color:var(--forest)}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){ .tools-grid{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .tools-grid{grid-template-columns:1fr} }
.tool-card{padding:14px}
.tool-card img{height:190px;width:100%;object-fit:cover;border-radius:12px}
.tool-meta{display:flex;align-items:center;justify-content:space-between;margin:12px 0 8px}
.stars{color:var(--accent);font-size:.85rem;letter-spacing:.08em}
.tool-card h3{font-size:1.25rem;margin:.2rem 0 .4rem}
.tool-card p{font-size:.92rem;color:#4B5563;margin:0 0 .9rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem}
.chip{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--sand);border:1px solid var(--line);padding:.32rem .55rem;border-radius:999px}
.price-row{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed var(--line);padding-top:10px}
.price{font-weight:800}
/* Two col layout with sidebar */
.split{display:grid;grid-template-columns:1.65fr .85fr;gap:22px;align-items:start}
@media(max-width:1020px){ .split{grid-template-columns:1fr} }
.sidebar{position:sticky;top:92px;display:grid;gap:18px}
.widget{padding:18px}
.widget h3{font-size:1.35rem;margin:0 0 .6rem}
.calendar-item{display:flex;gap:.9rem;padding:.7rem 0;border-bottom:1px solid var(--line);align-items:center}
.calendar-item:last-child{border:0}
.date{width:54px;height:54px;border-radius:12px;background:var(--forest);color:white;display:grid;place-items:center;text-align:center;line-height:1}
.date b{font-size:1.05rem}
.date span{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase}
.popular{display:grid;gap:.8rem}
.popular a{display:flex;gap:.8rem;align-items:center;padding:.5rem;border-radius:12px}
.popular a:hover{background:var(--sand)}
.popular img{width:56px;height:56px;border-radius:10px;object-fit:cover}
/* Tutorials */
.tutorials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){ .tutorials-grid{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .tutorials-grid{grid-template-columns:1fr} }
.tut-card img{height:170px;width:100%;object-fit:cover}
.tut-body{padding:14px}
.tut-body h3{font-size:1.2rem;margin:.3rem 0}
.tut-body p{font-size:.92rem;color:var(--muted);margin:0 0 .8rem}
.progress{height:6px;background:var(--sand);border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--terracotta);border-radius:999px}
.steps{margin-top:22px;background:white;border:1px solid var(--line);border-radius:16px;padding:18px}
.steps ol{margin:0;padding-left:1.1rem;display:grid;gap:.7rem}
.steps li{color:#374151;font-size:.95rem}
.steps li strong{color:var(--ink)}
/* Classes */
.classes-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media(max-width:980px){ .classes-wrap{grid-template-columns:1fr} }
.class-card{display:grid;grid-template-columns:160px 1fr;gap:0;overflow:hidden}
@media(max-width:560px){ .class-card{grid-template-columns:1fr} .class-card img{height:200px} }
.class-card img{height:100%;min-height:200px;object-fit:cover}
.class-body{padding:16px}
.class-body h3{margin:.2rem 0}
.loc{font-size:.82rem;color:var(--forest-light);font-weight:700;display:flex;align-items:center;gap:.35rem}
.map{background:#DDE8DD;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:0}
.map img{height:280px;width:100%;object-fit:cover}
.map-legend{padding:14px;display:flex;flex-wrap:wrap;gap:.6rem}
/* Interactive studio planner */
.studio{background:var(--forest);color:#EAF4EA;border-radius:24px;overflow:hidden;border:1px solid #143326}
.studio-inner{display:grid;grid-template-columns:1.15fr .85fr}
@media(max-width:980px){ .studio-inner{grid-template-columns:1fr} }
.studio-left{padding:28px}
.studio-left h2{color:white;font-size:2.2rem;margin:.3rem 0}
.studio-left p{color:#C7E0C7}
.controls{margin-top:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:16px;backdrop-filter:blur(6px)}
.range-row{display:grid;gap:8px;margin-bottom:14px}
.range-row label{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#D8F3DC}
input[type=range]{width:100%;accent-color:var(--terracotta)}
.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media(max-width:560px){ .skill-grid{grid-template-columns:1fr} }
.skill{ padding:12px;border-radius:12px}
.skill .bar{height:8px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden;margin:8px 0}
.skill .bar i{display:block;height:100%;background:var(--accent)}
.studio-right{background:var(--paper);color:var(--ink);padding:22px;display:grid;gap:12px}
.est-card{border:1px solid var(--line);border-radius:16px;padding:16px;background:white}
.est-row{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.est-row:last-child{border:0}
.est-total{display:flex;justify-content:space-between;font-weight:800;font-size:1.05rem;padding-top:.6rem}
/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){ .testi-grid{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .testi-grid{grid-template-columns:1fr} }
.quote{padding:18px}
.quote p{font-size:.98rem;color:#374151}
.person{display:flex;align-items:center;gap:.8rem;margin-top:12px}
.person img{width:42px;height:42px;border-radius:50%;object-fit:cover}
/* FAQ */
.faq{max-width:840px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:14px;background:white;margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:white;border:0;cursor:pointer;font-weight:600;text-align:left}
.faq-a{padding:0 18px 16px;color:var(--muted);display:none}
.faq-item.open .faq-a{display:block}
/* Newsletter */
.newsletter{background:var(--sand);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.newsletter form{display:flex;gap:.6rem;flex-wrap:wrap}
.newsletter input{padding:.9rem 1rem;border-radius:999px;border:1px solid var(--line);min-width:260px;font:inherit}
footer{background:var(--ink);color:#E5E7EB;padding:36px 0 18px;margin-top:24px}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr .9fr;gap:22px}
@media(max-width:980px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .footer-grid{grid-template-columns:1fr} }
footer h4{font-family:Inter,sans-serif;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:#A3A3A3;margin:0 0 .8rem}
footer a{color:#D1D5DB;font-size:.92rem}
footer a:hover{color:white}
.copy{border-top:1px solid #2A2E2B;margin-top:22px;padding-top:16px;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;color:#9CA3AF;font-size:.85rem}
.toast{position:fixed;right:16px;bottom:16px;background:var(--ink);color:white;padding:.9rem 1.1rem;border-radius:12px;box-shadow:var(--shadow-lg);transform:translateY(120%);opacity:0;transition:.3s;z-index:80}
.toast.show{transform:translateY(0);opacity:1}
.mobile-drawer{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index:60}
.mobile-drawer.open{display:block}
.drawer{position:absolute;right:0;top:0;bottom:0;width:min(86vw,360px);background:var(--paper);padding:18px;overflow:auto}
</style>
</head>
<body>
<div class="topbar">✦ Free shipping over $75 • Autumn Workshop Week — save 20% with code <b>HARVEST20</b> • New: Natural Dye Masterclass</div>
<header>
<div class="container nav">
<a class="logo" href="#top">
<div class="logo-mark">Hc</div>
<div class="logo-text">
<strong>Hearthcraft Collective</strong>
<span>Make with meaning. Craft for life.</span>
</div>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#tutorials">Tutorials</a>
<a href="#reviews">Tool Reviews</a>
<a href="#classes">Classes</a>
<a class="active" href="#resources">Resources</a>
<a href="#shop">Shop</a>
<a href="#community">Community</a>
</nav>
<div class="nav-actions">
<button class="icon-btn hide-m" aria-label="Search"><i data-lucide="search" style="width:18px;height:18px"></i></button>
<button class="icon-btn hide-m" aria-label="Account"><i data-lucide="user" style="width:18px;height:18px"></i></button>
<button class="icon-btn" aria-label="Cart" onclick="toast('Cart updated — 2 items')"><i data-lucide="shopping-bag" style="width:18px;height:18px"></i><span style="position:absolute;margin-left:14px;margin-top:-18px;background:var(--terracotta);color:white;font-size:.65rem;padding:2px 6px;border-radius:999px">2</span></button>
<a href="#classes" class="btn btn-forest hide-m">Join Community</a>
<button class="hamburger" id="menuBtn" aria-label="Menu"><i data-lucide="menu" style="width:20px;height:20px"></i></button>
</div>
</div>
</header>
<div class="mobile-drawer" id="drawer">
<div class="drawer">
<div style="display:flex;justify-content:space-between;align-items:center">
<strong>Hearthcraft</strong>
<button class="icon-btn" id="closeDrawer"><i data-lucide="x" style="width:18px;height:18px"></i></button>
</div>
<div style="display:grid;gap:.6rem;margin-top:1rem">
<a href="#tutorials">Tutorials</a><a href="#reviews">Tool Reviews</a><a href="#classes">Classes</a><a href="#resources">Resources</a><a href="#shop">Shop</a><a href="#community">Community</a>
<a class="btn btn-primary" href="#studio">Start Creating</a>
</div>
</div>
</div>
<main id="top">
<!-- HERO -->
<section class="hero">
<div class="container">
<div class="hero-grid">
<div class="hero-copy">
<div class="eyebrow"><span class="dot"></span><span class="mono">Est. 2014 — Portland & Online</span></div>
<h1>Where hands learn, <em>heirlooms begin.</em></h1>
<p class="lead">Hearthcraft Collective is a modern guild for makers — woodworkers, fiber artists, ceramicists, and collectors — who believe in slow craft, honest materials, and community over competition. Learn technique, source responsibly, and finish beautifully.</p>
<div class="hero-ctas">
<a href="#studio" class="btn btn-primary"><i data-lucide="sparkles" style="width:18px;height:18px"></i> Start Creating</a>
<a href="#shop" class="btn btn-ghost"><i data-lucide="store" style="width:18px;height:18px"></i> Get Supplies</a>
<a href="#classes" class="btn btn-ghost">Explore Classes →</a>
</div>
<div class="stats">
<div><b>42k+</b><span>Active members</span></div>
<div><b>1,200+</b><span>DIY tutorials</span></div>
<div><b>4.9/5</b><span>Avg. workshop rating</span></div>
</div>
</div>
<div class="hero-visual">
<div class="mini-pill"><i data-lucide="play" style="width:16px;height:16px"></i> Watch: Dovetail in 7 minutes</div>
<img class="hero-main-img" src="https://picsum.photos/800/900?random=11" alt="Maker studio">
<div class="float-card">
<img src="https://i.pravatar.cc/100?u=maker1" alt="" style="width:48px;height:48px;border-radius:50%;object-fit:cover">
<div>
<div style="font-weight:700">Mara’s First Quilt — Done!</div>
<div style="font-size:.82rem;color:var(--muted)">“Pattern design finally clicked thanks to the Studio Planner.”</div>
<div style="font-size:.75rem;color:var(--terracotta);font-weight:700;margin-top:4px">★ 4.9 • 312 finishes this week</div>
</div>
<div class="avatar-stack" style="margin-left:auto">
<img src="https://i.pravatar.cc/100?u=a2"><img src="https://i.pravatar.cc/100?u=a3"><img src="https://i.pravatar.cc/100?u=a4">
</div>
</div>
</div>
</div>
<div class="logos-bar">
<small>Featured in & trusted by</small>
<div class="logo-row"><span>Sunset Maker</span><span>•</span><span>Northwest Craft</span><span>•</span><span>Modern Heirloom</span><span>•</span><span>Kinfolk Studio</span><span>•</span><span>OPB Arts</span></div>
<span class="mono">Member-supported • No ads</span>
</div>
</div>
</section>
<!-- TOOL REVIEWS -->
<section id="reviews">
<div class="container">
<div class="section-head">
<div>
<div class="mono">Honest Gear Lab</div>
<h2>Tool Reviews you can actually trust</h2>
</div>
<p>We buy every tool ourselves. No sponsorships. Each review covers material sourcing, ergonomics, finishing methods, and long-term durability after 100 hours in the shop.</p>
<a href="#" class="btn btn-ghost">Browse all reviews</a>
</div>
<div class="filter-tabs" role="tablist">
<button class="tab active">All</button><button class="tab">Woodworking</button><button class="tab">Fiber & Textiles</button><button class="tab">Ceramics</button><button class="tab">General</button>
</div>
<div class="tools-grid" id="shop">
<article class="card tool-card">
<img src="https://picsum.photos/600/400?random=20" alt="Hand plane">
<div class="tool-meta"><span class="stars">★★★★★ 4.8</span><span class="badge">Editor’s Choice</span></div>
<h3>Veritas Low-Angle Jack Plane</h3>
<p>Exceptional balance for end-grain work. PM-V11 blade holds an edge through white oak and maple. We tested chipbreaker setup and blade camber across three finishing methods.</p>
<div class="chip-row"><span class="chip">Woodworking</span><span class="chip">Sharpening</span></div>
<div class="price-row"><span class="price">$279.00</span><button class="btn btn-primary" onclick="toast('Added Veritas Plane to cart')">Get Supplies</button></div>
</article>
<article class="card tool-card">
<img src="https://picsum.photos/600/400?random=21" alt="Loom">
<div class="tool-meta"><span class="stars">★★★★★ 4.9</span><span class="badge">Beginner Friendly</span></div>
<h3>Ashford Rigid Heddle Loom — 24"</h3>
<p>Warping is intuitive and warping board included is a gift. Perfect for exploring pattern design with pick-up sticks before committing to a floor loom.</p>
<div class="chip-row"><span class="chip">Weaving</span><span class="chip">Pattern Design</span></div>
<div class="price-row"><span class="price">$189.00</span><button class="btn btn-ghost" onclick="toast('Saved to wishlist')">Save</button></div>
</article>
<article class="card tool-card">
<img src="https://picsum.photos/600/400?random=22" alt="Kiln">
<div class="tool-meta"><span class="stars">★★★★☆ 4.6</span><span class="badge">Studio Tested</span></div>
<h3>Skutt FireBox 8x4 Kiln</h3>
<p>Even heat distribution and honest glaze results. Our ceramics lead fired 42 loads testing cone 6 oxidation and documented every firing curve.</p>
<div class="chip-row"><span class="chip">Ceramics</span><span class="chip">Finishing Methods</span></div>
<div class="price-row"><span class="price">$820.00</span><button class="btn btn-ghost" onclick="toast('Kiln inquiry sent')">Check Availability</button></div>
</article>
</div>
</div>
</section>
<!-- MAIN + SIDEBAR -->
<section id="resources">
<div class="container split">
<div>
<!-- TUTORIALS -->
<div id="tutorials">
<div class="section-head">
<div><div class="mono">Learn by Doing</div><h2>DIY Tutorials — from first stitch to final finish</h2></div>
<p>Step-by-step builds with cut lists, material sourcing notes, and video. Save progress, track skills, and share your make.</p>
</div>
<div class="tutorials-grid">
<article class="card tut-card">
<img src="https://picsum.photos/600/400?random=30" alt="">
<div class="tut-body">
<span class="mono">2.5 hrs • Intermediate</span>
<h3>Shaker-Style Cutting Board</h3>
<p>Learn grain matching, glue-up strategy, and food-safe finishing methods with tung oil and board butter. Includes printable pattern design template.</p>
<div class="progress"><i style="width:68%"></i></div>
<div style="display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:6px"><span>Your progress</span><span>68%</span></div>
<button class="btn btn-forest" style="margin-top:10px;width:100%;justify-content:center" onclick="toast('Resumed tutorial')">Continue Build</button>
</div>
</article>
<article class="card tut-card">
<img src="https://picsum.photos/600/400?random=31" alt="">
<div class="tut-body">
<span class="mono">1 hr • Beginner</span>
<h3>Visible Mending: Sashiko Sampler</h3>
<p>Transform worn denim with geometric stitching. We cover material sourcing for sashiko thread, thimbles, and marking tools that actually wash out.</p>
<div class="progress"><i style="width:22%"></i></div>
<div style="display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:6px"><span>Your progress</span><span>22%</span></div>
<button class="btn btn-ghost" style="margin-top:10px;width:100%;justify-content:center" onclick="toast('Tutorial started')">Start Creating</button>
</div>
</article>
<article class="card tut-card">
<img src="https://picsum.photos/600/400?random=32" alt="">
<div class="tut-body">
<span class="mono">4 hrs • Advanced • Video</span>
<h3>Wheel-Thrown Nesting Bowls</h3>
<p>Master centering, opening, and trimming feet. Includes kiln schedule and three glazing approaches for satin-matte finishing methods.</p>
<div class="progress"><i style="width:0%"></i></div>
<div style="display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:6px"><span>Not started</span><span>0%</span></div>
<button class="btn btn-ghost" style="margin-top:10px;width:100%;justify-content:center" onclick="toast('Added to your studio')">Add to Studio</button>
</div>
</article>
</div>
<div class="steps">
<div class="mono">Inside every tutorial</div>
<h3 style="margin:.4rem 0">What makes a Hearthcraft build different?</h3>
<ol>
<li><strong>Material sourcing done right:</strong> We list primary + budget-friendly alternatives, with vendor transparency and FSC or organic certifications where possible.</li>
<li><strong>Pattern design files included:</strong> Downloadable PDFs, SVG cut files, and loom drafts — all tested and versioned.</li>
<li><strong>Finishing methods compared:</strong> Side-by-side samples (oil vs. wax vs. lacquer) so you choose sheen, durability, and maintenance honestly.</li>
<li><strong>Community check-in:</strong> Post your progress for feedback from mentors. Weekly office hours on Zoom.</li>
</ol>
</div>
</div>
<!-- CLASSES / CLUBS -->
<div id="classes" style="margin-top:28px">
<div class="section-head">
<div><div class="mono">Gather & Make</div><h2>Classes & Local Clubs</h2></div>
<a href="#" class="btn btn-ghost">Find a club near you</a>
</div>
<div class="classes-wrap">
<div style="display:grid;gap:14px">
<article class="card class-card">
<img src="https://picsum.photos/400/400?random=40" alt="">
<div class="class-body">
<span class="badge">Portland — Pearl District</span>
<h3>Intro to Joinery: Mortise & Tenon</h3>
<div class="loc"><i data-lucide="map-pin" style="width:14px;height:14px"></i> Central Eastside Workshop • Sat, Nov 16 • 9am–4pm</div>
<p style="font-size:.92rem;color:var(--muted)">Build a hardwood stool. All tools provided. You’ll leave with a rock-solid frame and a repeatable method for future furniture.</p>
<div style="display:flex;gap:.6rem;margin-top:8px"><button class="btn btn-primary" onclick="toast('Seat reserved!')">Reserve Seat — $145</button><button class="btn btn-ghost">Details</button></div>
</div>
</article>
<article class="card class-card">
<img src="https://picsum.photos/400/400?random=41" alt="">
<div class="class-body">
<span class="badge">Online • Live</span>
<h3>Natural Dye: Onion Skin to Indigo</h3>
<div class="loc"><i data-lucide="video" style="width:14px;height:14px"></i> Zoom • Thu, Nov 21 • 6pm PT</div>
<p style="font-size:.92rem;color:var(--muted)">Explore mordanting, bundle dyeing, and over-dyeing. Kit shipped with 100% organic cotton and locally foraged dye stuffs.</p>
<div style="display:flex;gap:.6rem;margin-top:8px"><button class="btn btn-forest" onclick="toast('Joined waitlist')">Join Community</button><span style="font-size:.82rem;color:var(--muted);align-self:center">18 spots left</span></div>
</div>
</article>
</div>
<div class="card map">
<img src="https://picsum.photos/700/500?random=42" alt="Map">
<div style="padding:14px">
<h3 style="margin:0">Pacific Northwest Guild Map</h3>
<p style="font-size:.88rem;color:var(--muted);margin:.3rem 0 .6rem">43 verified clubs — from Spokane Woodturners to Seattle Weavers Guild. Drop in nights every Tuesday.</p>
<div class="map-legend"><span class="chip">● Wood</span><span class="chip">● Fiber</span><span class="chip">● Clay</span><span class="chip">● Mixed</span></div>
<button class="btn btn-ghost" style="width:100%;justify-content:center;margin-top:8px" onclick="toast('Map expanded')">Open Interactive Map</button>
</div>
</div>
</div>
</div>
<!-- STUDIO PLANNER INTERACTIVE -->
<div id="studio" style="margin-top:28px">
<div class="studio">
<div class="studio-inner">
<div class="studio-left">
<div class="mono" style="color:#A7F3D0">Interactive Studio</div>
<h2>Your Project Planner & Skill Tracker</h2>
<p>Estimate cost, time, and skill growth before you cut a board. Tweak materials and watch your budget and timeline update live.</p>
<div class="controls">
<div class="range-row">
<label>Project Size — Shelf length <span id="sizeVal">48"</span></label>
<input type="range" id="sizeRange" min="24" max="72" value="48">
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
<label style="font-size:.82rem;font-weight:700;color:#D8F3DC"><input type="radio" name="wood" value="maple" checked> Hard Maple (+$)</label>
<label style="font-size:.82rem;font-weight:700;color:#D8F3DC"><input type="radio" name="wood" value="pine"> Pine (save $)</label>
</div>
<div class="range-row" style="margin-top:12px">
<label>Weekly studio hours <span id="hoursVal">6 hrs</span></label>
<input type="range" id="hoursRange" min="2" max="14" value="6">
</div>
<div class="skill-grid">
<div class="skill" style="background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)"><div style="font-weight:700;color:white;display:flex;justify-content:space-between">Joinery <span id="sk1">42%</span></div><div class="bar"><i id="bar1" style="width:42%"></i></div><small style="color:#C7E0C7">Next: dovetails</small></div>
<div class="skill" style="background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)"><div style="font-weight:700;color:white;display:flex;justify-content:space-between">Finishing <span id="sk2">71%</span></div><div class="bar"><i id="bar2" style="width:71%"></i></div><small style="color:#C7E0C7">Next: French polish</small></div>
<div class="skill" style="background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)"><div style="font-weight:700;color:white;display:flex;justify-content:space-between">Pattern Drafting <span id="sk3">28%</span></div><div class="bar"><i id="bar3" style="width:28%"></i></div><small style="color:#C7E0C7">Next: grading</small></div>
</div>
</div>
</div>
<div class="studio-right">
<div class="est-card">
<div style="display:flex;justify-content:space-between;align-items:center"><h3 style="margin:0">Estimate</h3><span class="badge">Live</span></div>
<div class="est-row"><span>Materials (<span id="estWood">Hard Maple</span>)</span><strong id="estMat">$86</strong></div>
<div class="est-row"><span>Hardware & finish</span><strong>$34</strong></div>
<div class="est-row"><span>Est. build time</span><strong id="estTime">8.5 hrs</strong></div>
<div class="est-row"><span>Finish in</span><strong id="estWeeks">1.4 weeks</strong></div>
<div class="est-total"><span>Total</span><span id="estTotal">$120</span></div>
<button class="btn btn-primary" style="width:100%;justify-content:center;margin-top:12px" onclick="toast('Project saved to your Studio')">Save to My Studio</button>
<p style="font-size:.78rem;color:var(--muted);text-align:center;margin:.6rem 0 0">Includes cut list PDF + sourcing links. Members save 15% at checkout.</p>
</div>
<div class="est-card" style="background:var(--moss);border-color:#CBD9CB">
<div style="font-weight:700;display:flex;gap:.5rem;align-items:center"><i data-lucide="award" style="width:18px;height:18px;color:var(--forest)"></i> Level Up Challenge</div>
<p style="font-size:.88rem;color:#2F3E2F;margin:.4rem 0">Complete the Shaker shelf to unlock <b>Advanced Finishing Methods</b> workshop. 212 members leveled up this month.</p>
<div style="display:flex;gap:.6rem"><button class="btn btn-forest" onclick="toast('Challenge enrolled')">Accept Challenge</button><button class="btn btn-ghost">View Pathway</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SIDEBAR -->
<aside class="sidebar">
<div class="card widget">
<h3>Event Calendar</h3>
<div class="calendar-item">
<div class="date"><b>16</b><span>Nov</span></div><div><strong>Tool Swap & Sharpening Clinic</strong><div style="font-size:.82rem;color:var(--muted)">10am • Free — bring one, take one</div></div>
</div>
<div class="calendar-item">
<div class="date" style="background:var(--terracotta)"><b>21</b><span>Nov</span></div><div><strong>Natural Dye Live</strong><div style="font-size:.82rem;color:var(--muted)">6pm PT • Online</div></div>
</div>
<div class="calendar-item">
<div class="date" style="background:#6B7280"><b>30</b><span>Nov</span></div><div><strong>Winter Market — Makers Row</strong><div style="font-size:.82rem;color:var(--muted)">Pioneer Square • 11am–6pm</div></div>
</div>
<button class="btn btn-ghost" style="width:100%;justify-content:center;margin-top:10px" onclick="toast('Calendar synced')">Add to Calendar</button>
</div>
<div class="card widget">
<h3>Popular Projects</h3>
<div class="popular">
<a href="#"><img src="https://picsum.photos/100/100?random=50" alt=""><div><strong>Carved Spoon Set</strong><div style="font-size:.82rem;color:var(--muted)">★ 4.9 • 1.2k makes</div></div><span style="margin-left:auto">→</span></a>
<a href="#"><img src="https://picsum.photos/100/100?random=51" alt=""><div><strong>Linen Apron</strong><div style="font-size:.82rem;color:var(--muted)">★ 4.8 • 890 makes</div></div><span style="margin-left:auto">→</span></a>
<a href="#"><img src="https://picsum.photos/100/100?random=52" alt=""><div><strong>Mini Wall Loom</strong><div style="font-size:.82rem;color:var(--muted)">★ 4.7 • 640 makes</div></div><span style="margin-left:auto">→</span></a>
</div>
</div>
<div class="card widget" style="background:var(--forest);color:#D8F3DC;border-color:#143326">
<div class="mono" style="color:#A7F3D0">Community Picks</div>
<h3 style="color:white">“The finishing methods guide saved me $120 in wasted varnish.”</h3>
<p style="font-size:.9rem;color:#C7E0C7">— Lena R., Portland • Member since 2019 • 47 projects completed</p>
<img src="https://picsum.photos/400/260?random=60" alt="" style="border-radius:12px;margin-top:10px;opacity:.95">
<button class="btn btn-primary" style="width:100%;justify-content:center;margin-top:12px" onclick="toast('Joined Community')">Join Community</button>
</div>
<div class="card widget">
<h3>New in Shop</h3>
<img src="https://picsum.photos/400/300?random=70" alt="" style="border-radius:12px">
<p style="font-size:.88rem;color:var(--muted)">Japanese pull saw — 240mm, replaceable blade. Ethically sourced bamboo handle.</p>
<div style="display:flex;justify-content:space-between;align-items:center"><strong>$64.00</strong><button class="btn btn-ghost" onclick="toast('Added to cart')">Add</button></div>
</div>
</aside>
</div>
</section>
<!-- TESTIMONIALS -->
<section id="community" style="background:white;border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
<div class="container">
<div class="section-head">
<div><div class="mono">Member Stories</div><h2>Craft changes how we live</h2></div>
<p>Real members, real kitchens and studios. We check in at 30, 60, and 90 days — not just at checkout.</p>
</div>
<div class="testi-grid">
<div class="card quote">
<div class="stars">★★★★★</div>
<p>“I joined for a single class and stayed for the community. The skill tracker made pattern design feel achievable instead of mysterious. Three quilts later, I’m teaching my daughter.”</p>
<div class="person"><img src="https://i.pravatar.cc/100?u=person1"><div><strong>Sofia M.</strong><div style="font-size:.82rem;color:var(--muted)">Fiber Artist • Seattle</div></div></div>
</div>
<div class="card quote">
<div class="stars">★★★★★</div>
<p>“No fluff reviews. They actually tested the planes on white oak and showed the tearout. That honesty is why I source all my hardwood through their co-op now.”</p>
<div class="person"><img src="https://i.pravatar.cc/100?u=person2"><div><strong>James K.</strong><div style="font-size:.82rem;color:var(--muted)">Furniture Maker • Bend</div></div></div>
</div>
<div class="card quote" style="border-color:var(--forest)">
<div style="background:var(--forest);color:white;display:inline-block;padding:.3rem .6rem;border-radius:999px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700">Verified Mentor</div>
<p style="margin-top:8px">“As a ceramics mentor, I love the finishing methods comparisons. Students finally understand why cone 6 matters instead of just following steps.”</p>
<div class="person"><img src="https://i.pravatar.cc/100?u=person3"><div><strong>Aisha T.</strong><div style="font-size:.82rem;color:var(--muted)">Ceramicist • Portland</div></div></div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section>
<div class="container">
<div class="section-head" style="justify-content:center;text-align:center;flex-direction:column">
<div class="mono">Helpful Answers</div><h2>Frequently asked</h2>
</div>
<div class="faq">
<div class="faq-item open">
<button class="faq-q">Do I need my own tools to start? <span>−</span></button>
<div class="faq-a">No. Every beginner class includes a full tool kit, and our lending library ships across the US. Many members start with a $45 starter bundle — we publish honest budget paths for each project with primary and alternative material sourcing options.</div>
</div>
<div class="faq-item">
<button class="faq-q">How does the Skill Tracker work? <span>+</span></button>
<div class="faq-a">Log projects and mentors verify techniques. You earn micro-credentials in joinery, finishing methods, and pattern design. Progress unlocks advanced workshops and shop discounts.</div>
</div>
<div class="faq-item">
<button class="faq-q">Can I join a local club if I’m a total beginner? <span>+</span></button>
<div class="faq-a">Absolutely. Clubs host monthly “First Make” nights with all materials provided. Find yours on the Guild Map — most welcome drop-ins.</div>
</div>
<div class="faq-item">
<button class="faq-q">Where do you source materials? <span>+</span></button>
<div class="faq-a">We prioritize FSC-certified wood, OEKO-TEX fibers, and lead-free glazes. Each tutorial lists sourcing transparency — origin, certification, and a lower-cost alternative.</div>
</div>
</div>
<div class="newsletter" style="margin-top:22px">
<div><h3 style="margin:0">Get the Saturday Make Sheet</h3><p style="margin:.2rem 0 0;color:var(--muted);font-size:.92rem">One project, one tool tip, one community spotlight. No spam — unsubscribe anytime.</p></div>
<form onsubmit="event.preventDefault(); toast('Welcome to the Make Sheet! Check your inbox.')">
<input type="email" placeholder="you@studio.com" required>
<button class="btn btn-forest" type="submit">Subscribe</button>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div>
<div style="display:flex;gap:.8rem;align-items:center">
<div class="logo-mark" style="background:white;color:var(--forest)">Hc</div>
<div><strong style="font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:white">Hearthcraft Collective</strong><div style="font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#9CA3AF">Make with Meaning</div></div>
</div>
<p style="color:#9CA3AF;font-size:.92rem;margin:1rem 0">A member-supported guild for wood, fiber, and clay. Workshops in Portland, OR and online worldwide.</p>
<div style="display:flex;gap:.6rem">
<a class="icon-btn" style="background:#2A2E2B;border-color:#3A3F3C;color:white" href="#" aria-label="Instagram"><i data-lucide="instagram" style="width:16px;height:16px"></i></a>
<a class="icon-btn" style="background:#2A2E2B;border-color:#3A3F3C;color:white" href="#" aria-label="YouTube"><i data-lucide="youtube" style="width:16px;height:16px"></i></a>
<a class="icon-btn" style="background:#2A2E2B;border-color:#3A3F3C;color:white" href="#" aria-label="Pinterest"><i data-lucide="pin" style="width:16px;height:16px"></i></a>
</div>
</div>
<div><h4>Explore</h4><div style="display:grid;gap:.5rem"><a href="#tutorials">Tutorials</a><a href="#reviews">Tool Reviews</a><a href="#classes">Classes & Clubs</a><a href="#resources">Resources</a><a href="#shop">Shop Supplies</a></div></div>
<div><h4>Resources</h4><div style="display:grid;gap:.5rem"><a href="#">Material Sourcing Guide</a><a href="#">Finishing Methods Library</a><a href="#">Pattern Design Archive</a><a href="#">Safety & Care</a><a href="#">Gift Cards</a></div></div>
<div><h4>Visit</h4><p style="color:#D1D5DB;font-size:.92rem;margin:0 0 .6rem">1247 SE Hawthorne Blvd<br>Portland, OR 97214<br><a href="tel:15035551234">(503) 555-1234</a><br><a href="mailto:hello@hearthcraft.co">hello@hearthcraft.co</a></p><span style="font-size:.78rem;color:#9CA3AF">Open studio: Tue–Sat 10am–6pm</span></div>
</div>
<div class="copy">
<span>© 2026 Hearthcraft Collective LLC. All rights reserved. Made slowly in the Pacific Northwest.</span>
<span style="display:flex;gap:1rem"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Accessibility</a><a href="#">Contact</a></span>
</div>
</div>
</footer>
<div class="toast" id="toast">Added to cart</div>
<script>
lucide.createIcons();
const toastEl=document.getElementById('toast');
function toast(msg){ toastEl.textContent=msg; toastEl.classList.add('show'); setTimeout(()=>toastEl.classList.remove('show'),2600) }
// Drawer
const drawer=document.getElementById('drawer');
document.getElementById('menuBtn').addEventListener('click',()=>{ drawer.classList.add('open') });
document.getElementById('closeDrawer').addEventListener('click',()=> drawer.classList.remove('open'));
drawer.addEventListener('click',e=>{ if(e.target===drawer) drawer.classList.remove('open') });
// FAQ
document.querySelectorAll('.faq-q').forEach(btn=>{
btn.addEventListener('click',()=>{
const item=btn.parentElement;
const open=item.classList.contains('open');
document.querySelectorAll('.faq-item').forEach(i=>i.classList.remove('open'));
if(!open) item.classList.add('open');
item.querySelector('span').textContent = item.classList.contains('open') ? '−' : '+';
})
});
// Tabs
document.querySelectorAll('.tab').forEach(t=>{
t.addEventListener('click',()=>{
document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
t.classList.add('active'); toast(`Filtered: ${t.textContent}`)
})
});
// Studio Planner logic
const sizeRange=document.getElementById('sizeRange');
const hoursRange=document.getElementById('hoursRange');
const sizeVal=document.getElementById('sizeVal');
const hoursVal=document.getElementById('hoursVal');
const estMat=document.getElementById('estMat');
const estWood=document.getElementById('estWood');
const estTime=document.getElementById('estTime');
const estWeeks=document.getElementById('estWeeks');
const estTotal=document.getElementById('estTotal');
function updateStudio(){
const size=parseInt(sizeRange.value);
const hrs=parseInt(hoursRange.value);
const wood=document.querySelector('input[name="wood"]:checked').value;
sizeVal.textContent=size+'"';
hoursVal.textContent=hrs+' hrs';
estWood.textContent= wood==='maple' ? 'Hard Maple':'Pine';
const base = wood==='maple' ? 52 : 28;
const matCost = Math.round(base + size*0.9);
const time = (4.2 + size*0.09).toFixed(1);
const weeks = (parseFloat(time)/hrs).toFixed(1);
estMat.textContent='$'+matCost;
estTime.textContent=time+' hrs';
estWeeks.textContent=weeks+' weeks';
estTotal.textContent='$'+(matCost+34);
// playful skill bars respond to size
document.getElementById('bar1').style.width = Math.min(92, 32+ size/3)+'%';
document.getElementById('sk1').textContent = Math.round(32+size/3)+'%';
}
sizeRange.addEventListener('input',updateStudio);
hoursRange.addEventListener('input',updateStudio);
document.querySelectorAll('input[name="wood"]').forEach(r=>r.addEventListener('change',updateStudio));
updateStudio();
</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:31.670Z",
"url": "https://benchmark.aimac.invalid/c62fd03587c73956a3fb8419382a82e14ade553b511828fa4e2c95c14373d7e3.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-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-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<nav class=\"nav-links\" aria-label=\"Primary\">",
"target": [
"nav"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<nav class=\"nav-links\" aria-label=\"Primary\">",
"target": [
"nav"
]
}
]
},
{
"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": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"filter-tabs\" role=\"tablist\">\n <button class=\"tab active\">All</button><button class=\"tab\">Woodworking</button><button class=\"tab\">Fiber & Textiles</button><button class=\"tab\">Ceramics</button><button class=\"tab\">General</button>\n </div>",
"target": [
".filter-tabs"
]
}
]
},
{
"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>",
"target": [
"body"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-lucide=\"search\" aria-hidden=\"true\" style=\"width:18px;height:18px\" class=\"lucide lucide-search\">",
"target": [
".lucide-search"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<nav class=\"nav-links\" aria-label=\"Primary\">",
"target": [
"nav"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"filter-tabs\" role=\"tablist\">\n <button class=\"tab active\">All</button><button class=\"tab\">Woodworking</button><button class=\"tab\">Fiber & Textiles</button><button class=\"tab\">Ceramics</button><button class=\"tab\">General</button>\n </div>",
"target": [
".filter-tabs"
]
}
]
},
{
"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": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"filter-tabs\" role=\"tablist\">\n <button class=\"tab active\">All</button><button class=\"tab\">Woodworking</button><button class=\"tab\">Fiber & Textiles</button><button class=\"tab\">Ceramics</button><button class=\"tab\">General</button>\n </div>",
"target": [
".filter-tabs"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<nav class=\"nav-links\" aria-label=\"Primary\">",
"target": [
"nav"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"nav-links\" aria-label=\"Primary\">",
"target": [
"nav"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<span style=\"position:absolute;margin-left:14px;margin-top:-18px;background:var(--terracotta);color:white;font-size:.65rem;padding:2px 6px;border-radius:999px\">2</span>",
"target": [
"button[aria-label=\"Cart\"] > span"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"icon-btn hide-m\" aria-label=\"Search\">",
"target": [
"button[aria-label=\"Search\"]"
]
}
]
},
{
"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>Where hands learn, <em>heirlooms begin.</em></h1>",
"target": [
"h1"
]
},
{
"html": "<h2>Tool Reviews you can actually trust</h2>",
"target": [
"#reviews > .container > .section-head > div > h2"
]
},
{
"html": "<h3>Veritas Low-Angle Jack Plane</h3>",
"target": [
".tool-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Ashford Rigid Heddle Loom \u2014 24\"</h3>",
"target": [
".tool-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Skutt FireBox 8x4 Kiln</h3>",
"target": [
".tool-card:nth-child(3) > h3"
]
},
{
"html": "<h2>DIY Tutorials \u2014 from first stitch to final finish</h2>",
"target": [
"#tutorials > .section-head > div > h2"
]
},
{
"html": "<h3>Shaker-Style Cutting Board</h3>",
"target": [
".tut-card:nth-child(1) > .tut-body > h3"
]
},
{
"html": "<h3>Visible Mending: Sashiko Sampler</h3>",
"target": [
".tut-card:nth-child(2) > .tut-body > h3"
]
},
{
"html": "<h3>Wheel-Thrown Nesting Bowls</h3>",
"target": [
".tut-card:nth-child(3) > .tut-body > h3"
]
},
{
"html": "<h3 style=\"margin:.4rem 0\">What makes a Hearthcraft build different?</h3>",
"target": [
".steps > h3"
]
},
{
"html": "<h2>Classes & Local Clubs</h2>",
"target": [
"#classes > .section-head > div > h2"
]
},
{
"html": "<h3>Intro to Joinery: Mortise & Tenon</h3>",
"target": [
".class-card:nth-child(1) > .class-body > h3"
]
},
{
"html": "<h3>Natural Dye: Onion Skin to Indigo</h3>",
"target": [
".class-card:nth-child(2) > .class-body > h3"
]
},
{
"html": "<h3 style=\"margin:0\">Pacific Northwest Guild Map</h3>",
"target": [
".map > div > h3"
]
},
{
"html": "<h2>Your Project Planner & Skill Tracker</h2>",
"target": [
".studio-left > h2"
]
},
{
"html": "<h3 style=\"margin:0\">Estimate</h3>",
"target": [
".est-card:nth-child(1) > div:nth-child(1) > h3"
]
},
{
"html": "<h3>Event Calendar</h3>",
"target": [
".widget.card:nth-child(1) > h3"
]
},
{
"html": "<h3>Popular Projects</h3>",
"target": [
".widget.card:nth-child(2) > h3"
]
},
{
"html": "<h3 style=\"color:white\">\u201cThe finishing methods guide saved me $120 in wasted varnish.\u201d</h3>",
"target": [
".widget.card:nth-child(3) > h3"
]
},
{
"html": "<h3>New in Shop</h3>",
"target": [
".widget.card:nth-child(4) > h3"
]
},
{
"html": "<h2>Craft changes how we live</h2>",
"target": [
"#community > .container > .section-head > div > h2"
]
},
{
"html": "<h2>Frequently asked</h2>",
"target": [
".section-head > h2"
]
},
{
"html": "<h3 style=\"margin:0\">Get the Saturday Make Sheet</h3>",
"target": [
".newsletter > div > h3"
]
},
{
"html": "<h4>Explore</h4>",
"target": [
"div:nth-child(2) > h4"
]
},
{
"html": "<h4>Resources</h4>",
"target": [
"div:nth-child(3) > h4"
]
},
{
"html": "<h4>Visit</h4>",
"target": [
"div:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"top\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d8f3dc",
"bgColor": "#1b4332",
"contrastRatio": 9.37,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 9.37"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"topbar\">\u2726 Free shipping over $75 \u2022 Autumn Workshop Week \u2014 save 20% with code <b>HARVEST20</b> \u2022 New: Natural Dye Masterclass</div>",
"target": [
".topbar"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"range\" id=\"sizeRange\" min=\"24\" max=\"72\" value=\"48\">",
"target": [
"#sizeRange"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": "critical",
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img class=\"hero-main-img\" src=\"https://picsum.photos/800/900?random=11\" alt=\"Maker studio\">",
"target": [
".hero-main-img"
]
}
]
},
{
"id": "label",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure 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": "Hard Maple (+$)"
},
"relatedNodes": [
{
"html": "<label style=\"font-size:.82rem;font-weight:700;color:#D8F3DC\"><input type=\"radio\" name=\"wood\" value=\"maple\" checked=\"\"> Hard Maple (+$)</label>",
"target": [
"div:nth-child(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 type=\"radio\" name=\"wood\" value=\"maple\" checked=\"\">",
"target": [
"input[value=\"maple\"]"
]
}
]
},
{
"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 class=\"logo\" href=\"#top\">\n <div class=\"logo-mark\">Hc</div>\n <div class=\"logo-text\">\n <strong>Hearthcraft Collective</strong>\n <span>Make with meaning. Craft for life.</span>\n </div>\n </a>",
"target": [
".logo"
]
}
]
},
{
"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": "<ol>",
"target": [
"ol"
]
}
]
},
{
"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><strong>Material sourcing done right:</strong> We list primary + budget-friendly alternatives, with vendor transparency and FSC or organic certifications where possible.</li>",
"target": [
"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=\"icon-btn hide-m\" aria-label=\"Search\">",
"target": [
"button[aria-label=\"Search\"]"
]
}
]
},
{
"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": 320.4,
"height": 62.4
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (320.4px by 62.4px, 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 class=\"logo\" href=\"#top\">\n <div class=\"logo-mark\">Hc</div>\n <div class=\"logo-text\">\n <strong>Hearthcraft Collective</strong>\n <span>Make with meaning. Craft for life.</span>\n </div>\n </a>",
"target": [
".logo"
]
}
]
}
],
"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": "#c15b2c",
"contrastRatio": 4.37,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "normal",
"messageKey": "shortTextContent",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span style=\"position:absolute;margin-left:14px;margin-top:-18px;background:var(--terracotta);color:white;font-size:.65rem;padding:2px 6px;border-radius:999px\">2</span>",
"target": [
"button[aria-label=\"Cart\"] > span"
]
}
],
"impact": "serious",
"message": "Element content is too short to determine if it is actual text content"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span style=\"position:absolute;margin-left:14px;margin-top:-18px;background:var(--terracotta);color:white;font-size:.65rem;padding:2px 6px;border-radius:999px\">2</span>",
"target": [
"button[aria-label=\"Cart\"] > span"
],
"failureSummary": "Fix any of the following:\n Element content is too short to determine if it is actual text content"
}
]
}
],
"violations": [
{
"id": "aria-required-children",
"impact": "critical",
"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": [
{
"any": [
{
"id": "aria-required-children",
"data": {
"messageKey": "unallowed",
"values": "button[tabindex]"
},
"relatedNodes": [
{
"html": "<button class=\"tab active\">All</button>",
"target": [
".active.tab"
]
},
{
"html": "<button class=\"tab\">Woodworking</button>",
"target": [
".tab:nth-child(2)"
]
},
{
"html": "<button class=\"tab\">Fiber & Textiles</button>",
"target": [
".tab:nth-child(3)"
]
},
{
"html": "<button class=\"tab\">Ceramics</button>",
"target": [
".tab:nth-child(4)"
]
},
{
"html": "<button class=\"tab\">General</button>",
"target": [
".tab:nth-child(5)"
]
}
],
"impact": "critical",
"message": "Element has children which are not allowed: button[tabindex]"
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<div class=\"filter-tabs\" role=\"tablist\">\n <button class=\"tab active\">All</button><button class=\"tab\">Woodworking</button><button class=\"tab\">Fiber & Textiles</button><button class=\"tab\">Ceramics</button><button class=\"tab\">General</button>\n </div>",
"target": [
".filter-tabs"
],
"failureSummary": "Fix any of the following:\n Element has children which are not allowed: button[tabindex]"
}
]
},
{
"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": "#c15b2c",
"contrastRatio": 4.37,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#studio\" class=\"btn btn-primary\">",
"target": [
".hero-ctas > .btn-primary.btn[href$=\"#studio\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#studio\" class=\"btn btn-primary\">",
"target": [
".hero-ctas > .btn-primary.btn[href$=\"#studio\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c15b2c",
"bgColor": "#ffffff",
"contrastRatio": 4.37,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"float-card\">",
"target": [
".float-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.37 (foreground color: #c15b2c, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div style=\"font-size:.75rem;color:var(--terracotta);font-weight:700;margin-top:4px\">\u2605 4.9 \u2022 312 finishes this week</div>",
"target": [
".float-card > div:nth-child(2) > div:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.37 (foreground color: #c15b2c, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9a426",
"bgColor": "#ffffff",
"contrastRatio": 2.14,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card tool-card\">",
"target": [
".tool-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.14 (foreground color: #e9a426, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stars\">\u2605\u2605\u2605\u2605\u2605 4.8</span>",
"target": [
".tool-card:nth-child(1) > .tool-meta > .stars"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.14 (foreground color: #e9a426, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c15b2c",
"contrastRatio": 4.37,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary\" onclick=\"toast('Added Veritas Plane to cart')\">Get Supplies</button>",
"target": [
".price-row > .btn-primary.btn"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary\" onclick=\"toast('Added Veritas Plane to cart')\">Get Supplies</button>",
"target": [
".price-row > .btn-primary.btn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9a426",
"bgColor": "#ffffff",
"contrastRatio": 2.14,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card tool-card\">",
"target": [
".tool-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.14 (foreground color: #e9a426, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stars\">\u2605\u2605\u2605\u2605\u2605 4.9</span>",
"target": [
".tool-card:nth-child(2) > .tool-meta > .stars"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.14 (foreground color: #e9a426, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9a426",
"bgColor": "#ffffff",
"contrastRatio": 2.14,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card tool-card\">",
"target": [
".tool-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.14 (foreground color: #e9a426, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stars\">\u2605\u2605\u2605\u2605\u2606 4.6</span>",
"target": [
".tool-card:nth-child(3) > .tool-meta > .stars"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.14 (foreground color: #e9a426, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c15b2c",
"contrastRatio": 4.37,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary\" onclick=\"toast('Seat reserved!')\">Reserve Seat \u2014 $145</button>",
"target": [
"button[onclick=\"toast('Seat reserved!')\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary\" onclick=\"toast('Seat reserved!')\">Reserve Seat \u2014 $145</button>",
"target": [
"button[onclick=\"toast('Seat reserved!')\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#dde8dd",
"contrastRatio": 3.83,
"fontSize": "10.6pt (14.08px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"card map\">",
"target": [
".map"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.83 (foreground color: #6b7280, background color: #dde8dd, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p style=\"font-size:.88rem;color:var(--muted);margin:.3rem 0 .6rem\">43 verified clubs \u2014 from Spokane Woodturners to Seattle Weavers Guild. Drop in nights every Tuesday.</p>",
"target": [
".map > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.83 (foreground color: #6b7280, background color: #dde8dd, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c15b2c",
"contrastRatio": 4.37,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary\" style=\"width:100%;justify-content:center;margin-top:12px\" onclick=\"toast('Project saved to your Studio')\">Save to My Studio</button>",
"target": [
".est-card:nth-child(1) > .btn-primary.btn"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary\" style=\"width:100%;justify-content:center;margin-top:12px\" onclick=\"toast('Project saved to your Studio')\">Save to My Studio</button>",
"target": [
".est-card:nth-child(1) > .btn-primary.btn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c15b2c",
"contrastRatio": 4.37,
"fontSize": "12.6pt (16.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"date\" style=\"background:var(--terracotta)\"><b>21</b><span>Nov</span></div>",
"target": [
".calendar-item:nth-child(3) > .date"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 12.6pt (16.8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>21</b>",
"target": [
".calendar-item:nth-child(3) > .date > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 12.6pt (16.8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c15b2c",
"contrastRatio": 4.37,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"date\" style=\"background:var(--terracotta)\"><b>21</b><span>Nov</span></div>",
"target": [
".calendar-item:nth-child(3) > .date"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Nov</span>",
"target": [
".calendar-item:nth-child(3) > .date > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c15b2c",
"contrastRatio": 4.37,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary\" style=\"width:100%;justify-content:center;margin-top:12px\" onclick=\"toast('Joined Community')\">Join Community</button>",
"target": [
"button[onclick=\"toast('Joined Community')\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary\" style=\"width:100%;justify-content:center;margin-top:12px\" onclick=\"toast('Joined Community')\">Join Community</button>",
"target": [
"button[onclick=\"toast('Joined Community')\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.37 (foreground color: #ffffff, background color: #c15b2c, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b7280",
"bgColor": "#f3ede4",
"contrastRatio": 4.15,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"newsletter\" style=\"margin-top:22px\">",
"target": [
".newsletter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #6b7280, background color: #f3ede4, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p style=\"margin:.2rem 0 0;color:var(--muted);font-size:.92rem\">One project, one tool tip, one community spotlight. No spam \u2014 unsubscribe anytime.</p>",
"target": [
".newsletter > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #6b7280, background color: #f3ede4, font size: 11.0pt (14.72px), 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/100?u=a2\">",
"target": [
"img[src=\"https://i.pravatar.cc/100?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/100?u=a3\">",
"target": [
"img[src=\"https://i.pravatar.cc/100?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://i.pravatar.cc/100?u=a4\">",
"target": [
"img[src=\"https://i.pravatar.cc/100?u=a4\"]"
],
"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/100?u=person1\">",
"target": [
".quote.card:nth-child(1) > .person > img"
],
"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/100?u=person2\">",
"target": [
".quote.card:nth-child(2) > .person > img"
],
"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/100?u=person3\">",
"target": [
".quote.card:nth-child(3) > .person > img"
],
"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\""
}
]
},
{
"id": "label",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure 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": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder 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": "<input type=\"range\" id=\"sizeRange\" min=\"24\" max=\"72\" value=\"48\">",
"target": [
"#sizeRange"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder 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": "<input type=\"range\" id=\"hoursRange\" min=\"2\" max=\"14\" value=\"6\">",
"target": [
"#hoursRange"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder 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": 5386
},
{
"y": 576,
"height": 5386
},
{
"y": 1152,
"height": 5386
},
{
"y": 1728,
"height": 5386
},
{
"y": 2304,
"height": 5386
},
{
"y": 2880,
"height": 5386
},
{
"y": 3456,
"height": 5386
},
{
"y": 4032,
"height": 5386
},
{
"y": 4608,
"height": 5386
},
{
"y": 4666,
"height": 5386
}
],
"scans": 11,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Hobbies and Interests" 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: "Hobbies and Interests"
- Description: Hobbies, crafts, DIY projects, collecting, and special interest communities.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Hobbies and Interests" 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: "Resources", "Shop", "Classes".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Hobbies and Interests" category. Consider themes similar to: "Tool Reviews", "Local Clubs", "DIY Tutorials".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "pattern design", "material sourcing", "finishing methods".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Start Creating", "Get Supplies", "Join Community".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Hobbies and Interests" sector. Ideas similar but not limited to: "skill tracker".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "event calendar", "popular projects", "community picks".
- **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.