Meta Muse Wonder – Shopping
via Meta · Generated
- AIMAC Debt 8.46
- Cost $0.26
- Total Violations 40
- HTML Size 41 KB
- Em Dashes 37
Screenshot
View Live Page
Accessibility Issues Found
40 Serious
-
color-contrast serious 38 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="tagline-small">Velora Market</span> -
target-size serious 2 instances
All touch targets must be 24px large, or leave sufficient space
Example HTML
<input type="checkbox" onchange="toggleCompare('AuraSound Pro Wireless Headphones',this.checked)">
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>VELORA — Curated Deals. Delivered Delight. | Shop Best Sellers & Flash Sales</title>
<meta name="description" content="Velora is your destination for best sellers, flash sales, customer favorites and gift guides. Secure checkout, verified product reviews, free shipping over $49.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@700;800;900&family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--navy:#0f1b2e;--navy2:#162a46;--coral:#ff5a3c;--coral2:#ff7a3d;--gold:#ffb81c;--teal:#0fb5a3;--bg:#fff8f1;--card:#ffffff;--text:#17233a;--muted:#6b778e;--line:#e9e2da;--radius:20px}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.topbar{background:var(--navy);color:#fff;font-size:13px;letter-spacing:.02em}
.topbar-in{max-width:1240px;margin:auto;padding:9px 20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar b{color:var(--gold)}
.topbar span{opacity:.9}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 6px 24px rgba(15,27,46,.06)}
.header-in{max-width:1240px;margin:auto;padding:14px 20px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo img{border-radius:12px;width:150px;height:42px;object-fit:cover}
.tagline-small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);font-weight:800;line-height:1}
.search{flex:1;display:flex;background:#f3efe9;border:1px solid var(--line);border-radius:999px;overflow:hidden;min-width:180px}
.search input{flex:1;border:0;background:transparent;padding:12px 18px;outline:none;font-size:14px}
.search button{border:0;background:var(--navy);color:#fff;padding:0 20px;font-weight:700;cursor:pointer}
nav{background:#fff;border-top:1px solid #f0e9e1}
.nav-in{max-width:1240px;margin:auto;padding:0 20px;display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav-in a{padding:13px 14px;font-size:14px;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent}
.nav-in a:hover,.nav-in a.active{color:var(--coral);border-color:var(--coral)}
.nav-in a.pill{margin-left:auto;background:#fff1ec;color:#c93a22;border:1px solid #ffd7cc;border-bottom:1px solid #ffd7cc;border-radius:999px;padding:7px 14px;margin-top:6px;margin-bottom:6px}
.actions{display:flex;gap:10px;align-items:center;flex-shrink:0}
.icon-btn{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:18px;cursor:pointer}
.badge{position:absolute;top:-4px;right:-4px;background:var(--coral);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:800;font-size:14px;cursor:pointer;border:0;transition:.2s}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 22px rgba(255,90,60,.32)}
.btn-primary:hover{background:#e94a30;transform:translateY(-1px)}
.btn-dark{background:var(--navy);color:#fff}
.btn-light{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-gold{background:var(--gold);color:#231600}
.hero{max-width:1240px;margin:26px auto 0;padding:0 20px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:22px}
.hero-copy{background:var(--navy);color:#fff;border-radius:28px;padding:42px 40px;position:relative;overflow:hidden}
.hero-copy:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,#ff5a3c 0%,transparent 65%);opacity:.45;right:-90px;top:-90px}
.eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:12px;font-weight:900;color:var(--gold)}
.hero-copy h1{font-family:'Fraunces',serif;font-size:56px;line-height:.95;letter-spacing:-.02em;margin:14px 0 18px;position:relative;z-index:1}
.hero-copy h1 i{color:var(--gold);font-style:normal}
.hero-copy p{color:#d6deeb;max-width:560px;position:relative;z-index:1}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;position:relative;z-index:1}
.hero-stats{display:flex;gap:28px;margin-top:30px;position:relative;z-index:1;flex-wrap:wrap}
.hero-stats b{font-size:22px;display:block;line-height:1}
.hero-stats span{font-size:12px;color:#aebbd1;letter-spacing:.06em;text-transform:uppercase}
.hero-media{border-radius:28px;overflow:hidden;position:relative;min-height:420px;background:#ddd}
.hero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-card{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(255,255,255,.97);border-radius:18px;padding:16px 18px;display:flex;justify-content:space-between;gap:16px;align-items:center;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.hero-card b{font-size:15px}
.hero-card p{font-size:13px;color:var(--muted)}
.price{font-weight:900;color:var(--coral);font-size:20px;white-space:nowrap}
.price s{color:#9aa3b2;font-size:13px;font-weight:600}
.trust{max-width:1240px;margin:20px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center}
.trust i{font-size:22px;font-style:normal}
.trust b{font-size:13px;display:block;line-height:1.2}
.trust span{font-size:12px;color:var(--muted);line-height:1.3;display:block}
.section{max-width:1240px;margin:auto;padding:54px 20px 8px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.kicker{color:var(--coral);font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:12px}
h2{font-family:'Fraunces',serif;font-size:38px;line-height:1.05;letter-spacing:-.02em;margin-top:6px}
.section-head p{color:var(--muted);max-width:620px;font-size:15px}
.flash{background:linear-gradient(90deg,#ff5a3c,#ff8a3d);border-radius:24px;color:#fff;padding:24px;display:grid;grid-template-columns:1.2fr auto 1fr;gap:20px;align-items:center}
.flash h3{font-family:'Fraunces',serif;font-size:32px;line-height:1}
.flash p{opacity:.9;font-size:14px}
.timer{display:flex;gap:8px}
.timer div{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.25);border-radius:14px;min-width:62px;text-align:center;padding:10px 6px}
.timer b{font-size:22px;display:block;line-height:1}
.timer span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.progress{height:8px;background:rgba(255,255,255,.35);border-radius:999px;overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;width:78%;background:#fff;border-radius:999px}
.layout{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13px;cursor:pointer}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(15,27,46,.12)}
.card-img{position:relative;height:210px;background:#eee}
.card-img img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:12px;left:12px;background:var(--coral);color:#fff;font-size:11px;font-weight:900;letter-spacing:.06em;padding:6px 9px;border-radius:999px;text-transform:uppercase}
.tag.green{background:var(--teal)}
.heart{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.card-body{padding:16px}
.card-body h3{font-size:16px;line-height:1.3;margin:4px 0 6px}
.meta{font-size:12px;color:var(--muted)}
.stars{color:#ff9f1a;font-size:13px;letter-spacing:1px}
.card-body p.desc{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:8px 0}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.card-actions button{padding:10px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:800;font-size:13px;cursor:pointer}
.card-actions button:first-child{background:var(--navy);color:#fff;border-color:var(--navy)}
.compare-line{font-size:12px;color:var(--muted);margin-top:10px;display:flex;gap:6px;align-items:center}
aside{display:grid;gap:16px;position:sticky;top:118px}
.side{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px}
.side h4{font-size:15px;margin-bottom:12px}
.drop{display:flex;gap:12px;padding:11px 0;border-top:1px solid #f1ebe4}
.drop:first-of-type{border-top:0}
.drop img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.drop b{font-size:13px;line-height:1.3;display:block}
.drop span{font-size:12px;color:var(--muted)}
.drop strong{color:#0a9d84;font-size:13px}
.promo{background:var(--navy);color:#fff;border-radius:20px;padding:20px}
.promo h4{font-size:18px;line-height:1.2}
.promo p{color:#cbd6e6;font-size:13px;margin:8px 0 14px}
.promo input{width:100%;padding:12px;border-radius:10px;border:0;margin-bottom:8px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{border-radius:20px;overflow:hidden;position:relative;height:220px;color:#fff;cursor:pointer}
.cat img{width:100%;height:100%;object-fit:cover}
.cat div{position:absolute;inset:auto 0 0 0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.cat b{font-size:18px}
.cat p{font-size:13px;opacity:.9}
.guide{background:#fff;border:1px solid var(--line);border-radius:26px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.guide-copy{padding:34px}
.guide-copy p{color:var(--muted);margin:12px 0}
.checklist{list-style:none;margin:18px 0;display:grid;gap:10px}
.checklist li{font-size:14px}
.checklist li:before{content:"✓ ";color:var(--teal);font-weight:900}
.guide img{width:100%;height:100%;object-fit:cover;min-height:340px}
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testi{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.testi p{font-size:14px;color:#3d4a63;margin:12px 0}
.person{display:flex;gap:12px;align-items:center}
.person img{width:48px;height:48px;border-radius:50%}
.person b{font-size:14px;display:block;line-height:1.2}
.person span{font-size:12px;color:var(--muted)}
.faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:start}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:#fff;border:0;padding:18px;font-weight:800;cursor:pointer;display:flex;justify-content:space-between;gap:12px;font-size:15px}
.faq-a{display:none;padding:0 18px 18px;color:var(--muted);font-size:14px}
.faq-item.open .faq-a{display:block}
.newsletter{margin:54px auto 0;max-width:1240px;padding:0 20px}
.news-in{background:var(--gold);border-radius:26px;padding:34px;display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center}
.news-in h3{font-family:'Fraunces',serif;font-size:32px;line-height:1.05}
.news-form{display:flex;background:#fff;border-radius:999px;padding:5px;overflow:hidden}
.news-form input{flex:1;border:0;padding:12px 16px;outline:none;min-width:0}
.compare-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:var(--navy);color:#fff;padding:12px 16px;border-radius:999px;box-shadow:0 18px 40px rgba(0,0,0,.25);display:none;z-index:80;gap:14px;align-items:center;font-size:13px}
.compare-bar.show{display:flex}
.modal{position:fixed;inset:0;background:rgba(10,18,32,.65);display:none;place-items:center;z-index:90;padding:18px}
.modal.show{display:grid}
.modal-box{background:#fff;border-radius:24px;max-width:560px;width:100%;padding:28px;max-height:90vh;overflow:auto}
.modal-box h3{font-family:'Fraunces',serif;font-size:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.form-grid label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.form-grid input,.form-grid select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;margin-top:5px}
.result{background:#e9fbf7;border:1px solid #bdeedd;border-radius:14px;padding:14px;font-size:14px;display:none}
.toast{position:fixed;right:18px;bottom:18px;background:#111827;color:#fff;padding:14px 18px;border-radius:14px;z-index:100;display:none;box-shadow:0 16px 36px rgba(0,0,0,.25);font-size:14px;max-width:340px}
footer{background:var(--navy);color:#cbd6e6;margin-top:60px}
.foot{max-width:1240px;margin:auto;padding:48px 20px 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot h5{color:#fff;margin-bottom:12px;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.foot a{display:block;padding:5px 0;font-size:14px}
.foot p{font-size:14px}
.bottom{max-width:1240px;margin:auto;padding:18px 20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px}
@media(max-width:980px){.hero-grid,.layout,.guide,.faq,.news-in{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.cats,.trust{grid-template-columns:repeat(2,1fr)}.testis{grid-template-columns:1fr}.flash{grid-template-columns:1fr}.foot{grid-template-columns:1fr 1fr}aside{position:static}.search{display:none}.hero-copy h1{font-size:42px}}
@media(max-width:560px){.grid,.cats,.trust{grid-template-columns:1fr}.header-in{flex-wrap:wrap}.hero-copy{padding:28px 22px}}
</style>
</head>
<body>
<div class="topbar"><div class="topbar-in"><span>🚚 <b>FREE SHIPPING</b> on orders over $49 • Extended returns until Jan 31</span><span>Flash Sale ends tonight — Up to <b>60% OFF</b> | Code: <b>VELORA20</b></span><span>USD $ EN Sell on Velora</span></div></div>
<header>
<div class="header-in">
<a href="#" class="logo"><img src="https://placehold.co/300x84/0f1b2e/ffffff?text=VELORA+%E2%9C%A6&font=poppins" alt="Velora logo"><span><span class="tagline-small">Velora Market</span><br><small style="color:#6b778e;font-weight:600">Curated Deals. Delivered Delight.</small></span></a>
<form class="search" onsubmit="event.preventDefault();showToast('🔍 Searching 48,000+ products, deals and brands for you...')"><input placeholder="Search headphones, air fryers, sneakers, gifts & more..." aria-label="Search products"><button>Search</button></form>
<div class="actions">
<button class="icon-btn" onclick="showToast('❤️ Your wishlist has 6 saved items. Price drop alerts are ON.')" aria-label="Wishlist">♡</button>
<button class="icon-btn" onclick="openSizeGuide()" aria-label="Size guide">📏</button>
<button class="icon-btn" onclick="showToast('🛒 Your cart is ready for secure checkout.')" aria-label="Cart">🛒<span class="badge" id="cartCount">3</span></button>
</div>
</div>
<nav><div class="nav-in">
<a href="#" class="active">Home</a><a href="#shop">Shop</a><a href="#deals">Today's Deals</a><a href="#bestsellers">Best Sellers</a><a href="#gifts">Gift Guides</a><a href="#categories">Categories</a><a href="#reviews">Reviews</a><a href="#help">Help</a><a href="#account">Account</a>
<a href="#deals" class="pill">⚡ Flash Sale: Up to 60% OFF</a>
</div></nav>
</header>
<main>
<!-- HERO -->
<section class="hero">
<div class="hero-grid">
<div class="hero-copy">
<div class="eyebrow">★ New Season Edit — Live Now</div>
<h1>Shop smarter.<br>Live <i>brighter.</i></h1>
<p>Welcome to Velora — the shopping destination where best sellers, honest product reviews, and real price drops meet. From viral tech and cozy home upgrades to thoughtful gifts under $50, every product is vetted, every SKU is tracked for value, and every checkout is secure, fast, and hassle-free.</p>
<p style="margin-top:10px">Join 2.4 million shoppers who compare, save, and discover customer favorites before they sell out.</p>
<div class="hero-cta"><a href="#bestsellers" class="btn btn-primary">Shop Best Sellers →</a><button class="btn btn-light" onclick="openSizeGuide()">📏 Open Size Guide</button></div>
<div class="hero-stats"><div><b>4.8/5</b><span>128k Reviews</span></div><div><b>48k+</b><span>Products</span></div><div><b>24h</b><span>Fast Dispatch</span></div><div><b>$12.6M</b><span>Saved This Month</span></div></div>
</div>
<div class="hero-media">
<img src="https://picsum.photos/900/700" alt="Curated shopping lifestyle">
<div class="hero-card"><div><b>AuraSound Pro Wireless Headphones</b><p>⭐⭐⭐⭐⭐ 12,438 reviews • SKU VL-AUD-8841 • In Stock</p></div><div class="price"><s>$189</s> $119</div></div>
</div>
</div>
<div class="trust">
<div><i>🚚</i><p><b>Free & Fast Shipping</b><span>Free over $49, delivery in 2-4 days</span></p></div>
<div><i>↩️</i><p><b>60-Day Easy Returns</b><span>No questions, prepaid label included</span></p></div>
<div><i>🔒</i><p><b>Secure Checkout</b><span>256-bit encrypted, Apple Pay & Klarna</span></p></div>
<div><i>🏆</i><p><b>Price-Match Promise</b><span>Find it cheaper? We refund the difference</span></p></div>
</div>
</section>
<!-- FLASH SALE -->
<section class="section" id="deals">
<div class="flash">
<div><div class="kicker" style="color:#ffe1a8">⚡ Flash Sales — Today Only</div><h3>Up to 60% OFF Customer Favorites</h3><p>Limited stock at these prices. When the timer ends, deals reset. No code needed on marked items — discount auto-applies at checkout.</p></div>
<div class="timer"><div><b id="hrs">07</b><span>Hours</span></div><div><b id="mins">42</b><span>Mins</span></div><div><b id="secs">18</b><span>Secs</span></div></div>
<div><b style="font-size:14px">🔥 78% claimed — selling fast</b><div class="progress"><i></i></div><p style="margin-top:8px">Extra 20% off $75+ with code <b style="background:#fff;color:#e94a30;padding:2px 8px;border-radius:999px">VELORA20</b></p><a href="#bestsellers" class="btn btn-dark" style="margin-top:12px;padding:11px 18px">View Deal →</a></div>
</div>
</section>
<!-- BEST SELLERS + SIDEBAR -->
<section class="section" id="bestsellers">
<div class="section-head"><div><div class="kicker">🏆 Best Sellers & Customer Favorites</div><h2>Loved, reviewed<br>& bought again.</h2></div><p>Our best sellers are ranked daily by real orders, verified product reviews, return rates, and value for money — not just ads. Filter by category, Compare specs side-by-side, check the SKU, and add to cart with confidence. Every listing shows live stock so you never checkout on a sold-out deal.</p></div>
<div class="layout">
<div>
<div class="filters" id="shop">
<button class="chip active" onclick="filterProducts('all',this)">All Products</button>
<button class="chip" onclick="filterProducts('tech',this)">Tech & Audio</button>
<button class="chip" onclick="filterProducts('home',this)">Home & Kitchen</button>
<button class="chip" onclick="filterProducts('style',this)">Style & Beauty</button>
<button class="chip" onclick="filterProducts('gift',this)">Gifts Under $50</button>
</div>
<div class="grid" id="productGrid"></div>
<p style="font-size:13px;color:#6b778e;margin-top:14px">Showing <b id="countLabel">6 products</b> • Prices include taxes where applicable. Stock and pricing updated every 15 minutes. Use Compare to evaluate features, warranty, and shipping before checkout.</p>
</div>
<aside>
<div class="side">
<h4>📉 Biggest Price Drops Today</h4>
<div class="drop"><img src="https://picsum.photos/100/100" alt="Product"><div><b>EspressoGo Portable Maker</b><span>Was $129 • SKU VL-KIT-2210</span><br><strong>▼ 38% — Now $79.99</strong></div></div>
<div class="drop"><img src="https://picsum.photos/101/101" alt="Product"><div><b>LumiGlow Smart Lamp</b><span>Was $69 • SKU VL-HOM-1094</span><br><strong>▼ 31% — Now $47.50</strong></div></div>
<div class="drop"><img src="https://picsum.photos/102/102" alt="Product"><div><b>CloudStep Running Shoes</b><span>Was $110 • SKU VL-STY-7732</span><br><strong>▼ 27% — Now $79.99</strong></div></div>
<a href="#deals" class="btn btn-light" style="width:100%;margin-top:12px">View All Deals →</a>
</div>
<div class="side">
<h4>⭐ Top Picks For You</h4>
<p style="font-size:13px;color:#6b778e">Based on your browsing and wishlist, our editors recommend breathable summer layers, compact travel tech, and home refresh picks under $75 — all with 4.6★+ ratings.</p>
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:12px"><span class="chip">Travel</span><span class="chip">Under $50</span><span class="chip">Eco Picks</span><span class="chip">New In</span></div>
</div>
<div class="promo">
<h4>Get $15 OFF your first order</h4><p>Subscribe for early flash sale access, exclusive coupons, and gift guide drops. No spam — just savings.</p>
<input id="promoEmail" type="email" placeholder="Your email address"><button class="btn btn-gold" style="width:100%" onclick="subscribePromo()">Subscribe & Save $15</button>
<small style="opacity:.7;font-size:11px;display:block;margin-top:8px">By subscribing you agree to our Privacy Policy. Unsubscribe anytime.</small>
</div>
</aside>
</div>
</section>
<!-- CATEGORIES -->
<section class="section" id="categories">
<div class="section-head"><div><div class="kicker">🛍️ Shop By Category</div><h2>Everything you love,<br>beautifully organized.</h2></div><p>Browse curated departments built around how you actually shop — refresh your home, upgrade your tech, restock beauty essentials, or find a gift in under five minutes with filters for price, rating, delivery speed, and brand.</p></div>
<div class="cats">
<article class="cat" onclick="showToast('🎧 Opening Tech & Audio — 8,240 products with verified reviews')"><img src="https://picsum.photos/600/440" alt="Tech"><div><b>Tech & Audio →</b><p>Headphones, wearables & smart home • From $19</p></div></article>
<article class="cat" onclick="showToast('🏠 Opening Home & Kitchen — best sellers from $12')"><img src="https://picsum.photos/601/441" alt="Home"><div><b>Home & Kitchen →</b><p>Air fryers, decor & organization • From $12</p></div></article>
<article class="cat" onclick="showToast('👟 Opening Style & Beauty — new season edit live')"><img src="https://picsum.photos/602/442" alt="Style"><div><b>Style & Beauty →</b><p>Sneakers, skincare & accessories • From $9</p></div></article>
<article class="cat" onclick="showToast('🎁 Opening Gifts — top-rated gifts under $50')"><img src="https://picsum.photos/603/443" alt="Gifts"><div><b>Gifts & Occasions →</b><p>Birthdays, weddings & thank-yous • From $14</p></div></article>
</div>
</section>
<!-- GIFT GUIDE -->
<section class="section" id="gifts">
<div class="guide">
<div class="guide-copy">
<div class="kicker">🎁 The Velora Gift Guide 2026</div><h2>Gifts they'll actually love — without the guesswork.</h2>
<p>Stuck for ideas? Our gift editors test hundreds of products, read thousands of product reviews, and track what gets re-ordered as gifts. The result is a guide sorted by person, occasion, and budget — with gift wrap, personalized notes, and direct-to-recipient shipping at checkout.</p>
<ul class="checklist"><li><b>For Her / For Him / For Teens</b> — curated by real gift-givers</li><li><b>Under $25, $50 & Luxury</b> — clear budgets, no surprises</li><li><b>Gift wrap & note</b> added in one click at checkout</li><li><b>60-day returns</b> for the recipient, no receipt needed</li></ul>
<div style="display:flex;gap:10px;flex-wrap:wrap"><a href="#bestsellers" class="btn btn-primary">Shop Gift Guide →</a><button class="btn btn-light" onclick="showToast('🎲 Gift Finder: Tell us who you are shopping for and we will recommend 5 perfect picks!')">🎲 Try Gift Finder</button></div>
</div>
<img src="https://picsum.photos/800/600" alt="Gift guide shopping">
</div>
</section>
<!-- TESTIMONIALS -->
<section class="section" id="reviews">
<div class="section-head"><div><div class="kicker">💬 Customer Favorites</div><h2>2.4 million shoppers.<br>One trusted checkout.</h2></div><p>We publish every verified review — good or bad — and label each SKU with its true return rate and repurchase score, so you can shop with complete transparency.</p></div>
<div class="testis">
<article class="testi"><div class="stars">★★★★★</div><p>"I compared three air fryers on Velora, read the detailed reviews, and saved $64 during a flash sale. Checkout took 40 seconds with Apple Pay and it arrived in two days. This is now my first stop for home shopping."</p><div class="person"><img src="https://i.pravatar.cc/100?u=maya-velora" alt="Maya"><div><b>Maya Thompson</b><span>Verified Buyer • Chicago, IL • SKU VL-KIT-9041</span></div></div></article>
<article class="testi"><div class="stars">★★★★★</div><p>"The size guide actually works. I entered my measurements, got a perfect fit on the CloudStep runners, and the price-drop alert saved me another $18 a week later. Customer service replied in under an hour."</p><div class="person"><img src="https://i.pravatar.cc/100?u=jordan-velora" alt="Jordan"><div><b>Jordan Lee</b><span>Verified Buyer • Austin, TX • 14 orders</span></div></div></article>
<article class="testi"><div class="stars">★★★★★</div><p>"I send all my gifts through Velora. Gift wrap, handwritten-style note, tracking for the recipient — and if they need an exchange, they don't even need my receipt. My family thinks I'm a gifting genius now."</p><div class="person"><img src="https://i.pravatar.cc/100?u=sofia-velora" alt="Sofia"><div><b>Sofia Ramirez</b><span>Velora Plus Member • Miami, FL</span></div></div></article>
</div>
</section>
<!-- FAQ + HELP -->
<section class="section" id="help">
<div class="faq">
<div><div class="kicker">❓ Help Center & FAQ</div><h2>Questions?<br>We've got answers.</h2><p style="color:#6b778e;margin-top:12px">Can't find what you need? Our US-based support team is available 7 days a week via live chat, email, and phone. Average first response time is under 12 minutes during business hours.</p><div style="background:#fff;border:1px solid #e9e2da;border-radius:18px;padding:18px;margin-top:18px"><b>📞 1-800-VELORA-1</b><p style="font-size:13px;color:#6b778e">Mon-Sun 8am-10pm ET<br>support@velora.shop • 428 Market Street, Suite 900, San Francisco, CA 94105</p><button class="btn btn-dark" style="margin-top:10px" onclick="showToast('💬 Live chat connecting you to a Velora specialist...')">Start Live Chat</button></div></div>
<div>
<div class="faq-item open"><button class="faq-q" onclick="toggleFaq(this)">How fast is shipping and when is it free? <span>−</span></button><div class="faq-a">Orders placed before 2pm ET ship the same day. Standard delivery is 2-4 business days and is free on all orders over $49 (otherwise $4.95). Express 1-2 day and same-day options in select cities appear at checkout based on your ZIP and the product SKU warehouse location.</div></div>
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)">What is your return and exchange policy? <span>+</span></button><div class="faq-a">You have 60 days to return or exchange almost anything — even if you've opened it. Start a return from your Account page, print the prepaid label, and refunds are issued within 3-5 business days of arrival at our warehouse. Gift recipients can exchange without a receipt.</div></div>
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)">How do Compare and product reviews work? <span>+</span></button><div class="faq-a">Tick Compare on any products to see specs, warranty, ratings, and price history side-by-side. All product reviews marked Verified Buyer come from completed orders. We never pay for reviews and we show the full rating distribution on every listing.</div></div>
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)">Is checkout secure? Which payments do you accept? <span>+</span></button><div class="faq-a">Checkout is PCI-DSS Level 1 and 256-bit SSL encrypted. We accept Visa, Mastercard, Amex, PayPal, Apple Pay, Google Pay, and Klarna / Affirm for pay-in-4. Your card details never touch our servers directly.</div></div>
<div class="faq-item"><button class="faq-q" onclick="toggleFaq(this)">How do I use a promo code or track my order? <span>+</span></button><div class="faq-a">Add codes like VELORA20 in the promo field at checkout — one code per order, applied before tax. Tracking is emailed and available in Account → Orders, with live carrier updates and delivery photos where available.</div></div>
</div>
</div>
</section>
<!-- NEWSLETTER -->
<section class="newsletter" id="account">
<div class="news-in">
<div><h3>Join Velora Insider & get $15 OFF + early flash sale access.</h3><p style="margin-top:8px">One beautiful email a week: best sellers, price drops on your wishlist, and gift ideas before they trend. Join 840,000 insiders.</p></div>
<form class="news-form" onsubmit="event.preventDefault();subscribeNewsletter(this)"><input type="email" required placeholder="Enter your email address" aria-label="Email for newsletter"><button class="btn btn-primary" style="border-radius:999px">Subscribe</button></form>
</div>
</section>
</main>
<footer>
<div class="foot">
<div><img src="https://placehold.co/260x64/ffffff/0f1b2e?text=VELORA+%E2%9C%A6&font=poppins" alt="Velora" style="border-radius:10px;width:170px"><p style="margin-top:14px">Velora Market Inc.<br>Curated Deals. Delivered Delight.<br><br>📍 428 Market Street, Suite 900<br>San Francisco, CA 94105<br>📞 1-800-VELORA-1 (835-6721)<br>✉️ support@velora.shop</p><p style="margin-top:12px;font-size:18px;letter-spacing:6px"><a href="#" style="display:inline">𝕏</a> <a href="#" style="display:inline">◎</a> <a href="#" style="display:inline">f</a> <a href="#" style="display:inline">▶</a> <a href="#" style="display:inline">♪</a></p></div>
<div><h5>Shop</h5><a href="#bestsellers">Best Sellers</a><a href="#deals">Flash Sales & Deals</a><a href="#categories">New Arrivals</a><a href="#gifts">Gift Guides</a><a href="#">Clearance — Up to 70% OFF</a><a href="#">Gift Cards</a></div>
<div><h5>Help & Account</h5><a href="#help">Help Center / FAQ</a><a href="#account">My Account</a><a href="#">Track Your Order</a><a href="#">Shipping & Returns</a><a href="#" onclick="openSizeGuide();return false;">Size Guide</a><a href="#">Contact Us</a></div>
<div><h5>Company</h5><a href="#">About Velora</a><a href="#">Careers — We're Hiring</a><a href="#">Sell on Velora</a><a href="#">Affiliates & Creators</a><a href="#">Press & Sustainability</a><a href="#">Velora Plus Membership</a></div>
</div>
<div class="bottom"><span>© <span id="year">2026</span> Velora Market Inc. All rights reserved. Prices and availability subject to change. SKU-level stock updated in real time.</span><span><a href="#" style="display:inline">Privacy Policy</a> • <a href="#" style="display:inline">Terms of Service</a> • <a href="#" style="display:inline">Accessibility</a> • <a href="#" style="display:inline">Do Not Sell My Info</a></span></div>
</footer>
<!-- COMPARE BAR -->
<div class="compare-bar" id="compareBar"><span>⚖️ <b id="compareText">0 items to compare</b></span><button class="btn btn-gold" style="padding:9px 16px" onclick="showToast('⚖️ Opening side-by-side comparison: price, rating, warranty, shipping and features')">Compare Now</button><button class="btn btn-light" style="padding:9px 14px" onclick="clearCompare()">Clear</button></div>
<!-- SIZE GUIDE MODAL -->
<div class="modal" id="sizeModal" role="dialog" aria-modal="true">
<div class="modal-box">
<div style="display:flex;justify-content:space-between;align-items:start"><h3>📏 Smart Size Guide</h3><button class="icon-btn" onclick="closeSizeGuide()">✕</button></div>
<p style="color:#6b778e;font-size:14px;margin-top:8px">Stop guessing between sizes. Enter your measurements and category — our guide is built from 128,000 verified fit reviews and return data for that exact product type.</p>
<div class="form-grid">
<label>Category<select id="sgCat"><option value="shoes">Shoes / Sneakers</option><option value="tops">Tops & Tees</option><option value="dresses">Dresses</option><option value="jeans">Jeans & Pants</option></select></label>
<label>Fit Preference<select id="sgFit"><option>True to size</option><option>Relaxed / Oversized</option><option>Slim / Fitted</option></select></label>
<label>Height / Foot Length (cm)<input id="sgHeight" type="number" placeholder="e.g. 26.5 for shoes, 170 for clothing" value="26.5"></label>
<label>Usual Size You Wear<input id="sgUsual" type="text" placeholder="e.g. US 9 / M / 32" value="US 9"></label>
</div>
<button class="btn btn-primary" style="width:100%" onclick="calcSize()">Find My Perfect Size →</button>
<div class="result" id="sgResult"></div>
<div style="margin-top:16px;background:#fff8f1;border:1px solid #e9e2da;border-radius:12px;padding:12px;font-size:13px"><b>Quick chart — Shoes:</b> US 7 = 25cm | US 8 = 25.7cm | US 9 = 26.5cm | US 10 = 27.1cm | US 11 = 27.8cm<br><span style="color:#6b778e">Between sizes? 82% of Velora customers size up for running shoes.</span></div>
</div>
</div>
<div class="toast" id="toast"></div>
<script>
const products=[
{name:"AuraSound Pro Wireless Headphones",cat:"tech",price:119,old:189,rating:"★★★★★",reviews:"12,438",sku:"VL-AUD-8841",tag:"-37% TODAY",img:"https://picsum.photos/600/460",desc:"40h battery, active noise cancelling, Bluetooth 5.3 and plush memory-foam cups. Our #1 best seller for 6 weeks straight."},
{name:"AirCrisp XL Digital Air Fryer 5.5QT",cat:"home",price:89,old:149,rating:"★★★★★",reviews:"9,821",sku:"VL-KIT-9041",tag:"BEST SELLER",img:"https://picsum.photos/601/461",desc:"Crisps with 85% less oil, 8 presets, dishwasher-safe basket. Family-size and whisper-quiet."},
{name:"CloudStep Knit Running Shoes",cat:"style",price:79,old:110,rating:"★★★★☆",reviews:"7,204",sku:"VL-STY-7732",tag:"-28%",img:"https://picsum.photos/602/462",desc:"Featherlight knit, responsive foam sole, machine washable. Use our Size Guide for a perfect fit."},
{name:"LumiGlow Smart Table Lamp",cat:"home",price:47,old:69,rating:"★★★★★",reviews:"5,612",sku:"VL-HOM-1094",tag:"PRICE DROP",img:"https://picsum.photos/603/463",desc:"App + voice control, sunrise wake mode, 16M colors. The gift everyone keeps for themselves."},
{name:"HydraBoost Vitamin C Skincare Set",cat:"style gift",price:39,old:64,rating:"★★★★★",reviews:"11,093",sku:"VL-BTY-3318",tag:"GIFT PICK",img:"https://picsum.photos/604/464",desc:"Serum, moisturizer & SPF in a ready-to-gift box. Dermatologist tested, cruelty-free."},
{name:"Nomad 65W GaN Travel Charger Kit",cat:"tech gift",price:34,old:55,rating:"★★★★☆",reviews:"4,377",sku:"VL-TEC-5520",tag:"UNDER $50",img:"https://picsum.photos/605/465",desc:"Charge laptop + 2 devices at once, foldable prongs, global adapters included. frequent flyer favorite."},
];
let cart=3, compared=new Set();
function render(list){
const grid=document.getElementById('productGrid');
document.getElementById('countLabel').textContent=list.length+' products';
grid.innerHTML=list.map((p,i)=>`
<article class="card">
<div class="card-img"><img src="${p.img}" alt="${p.name}"><span class="tag ${i%3==0?'':'green'}">${p.tag}</span><button class="heart" onclick="this.textContent=this.textContent=='♡'?'♥':'♡';showToast('❤️ Saved to wishlist — we will alert you on price drops')">♡</button></div>
<div class="card-body"><span class="stars">${p.rating}</span> <span class="meta">${p.reviews} reviews</span><h3>${p.name}</h3><div class="meta">SKU: ${p.sku} • ✓ In Stock • Ships in 24h</div><p class="desc">${p.desc}</p>
<div class="card-foot"><span class="price"><s>$${p.old}</s> $${p.price}</span><span style="font-size:12px;color:#0a9d84;font-weight:800">Save $${p.old-p.price}</span></div>
<div class="card-actions"><button onclick="addToCart('${p.name}')">🛒 Add to Cart</button><button onclick="showToast('🔍 Quick view: ${p.name} — free returns, 2-year warranty options at checkout')">View Deal</button></div>
<label class="compare-line"><input type="checkbox" onchange="toggleCompare('${p.name}',this.checked)"> Compare this product</label>
</div></article>`).join('') || '<p style="grid-column:1/-1;background:#fff;padding:24px;border-radius:16px">No products in this category yet — check back for new drops.</p>';
}
render(products);
function filterProducts(cat,el){document.querySelectorAll('.chip').forEach(c=>{if(c.parentElement.id==='shop')c.classList.remove('active')});el.classList.add('active');render(cat==='all'?products:products.filter(p=>p.cat.includes(cat)));showToast('🛍️ Filter applied — showing our highest-rated '+el.textContent)}
function addToCart(name){cart++;document.getElementById('cartCount').textContent=cart;showToast('✅ Added to cart: '+name+' — Secure checkout available, free shipping unlocked!')}
function toggleCompare(name,checked){checked?compared.add(name):compared.delete(name);const bar=document.getElementById('compareBar');document.getElementById('compareText').textContent=compared.size+' item(s) to compare: '+[...compared].join(', ').slice(0,60);bar.classList.toggle('show',compared.size>0)}
function clearCompare(){compared.clear();document.getElementById('compareBar').classList.remove('show');document.querySelectorAll('input[type=checkbox]').forEach(c=>c.checked=false)}
function toggleFaq(btn){const item=btn.parentElement;const open=item.classList.contains('open');document.querySelectorAll('.faq-item').forEach(f=>{f.classList.remove('open');f.querySelector('span').textContent='+'});
if(!open){item.classList.add('open');btn.querySelector('span').textContent='−'}}
function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.style.display='block';clearTimeout(t._h);t._h=setTimeout(()=>t.style.display='none',4200)}
function subscribePromo(){const v=document.getElementById('promoEmail').value;if(!v||!v.includes('@'))return showToast('Please enter a valid email to claim your $15 OFF');showToast('🎉 Welcome to Velora Insider! Your $15 code VELORA15 was sent to '+v)}
function subscribeNewsletter(f){showToast('🎉 Subscribed! Check your inbox for $15 OFF + this week\'s flash sale preview.');f.reset()}
function openSizeGuide(){document.getElementById('sizeModal').classList.add('show')}
function closeSizeGuide(){document.getElementById('sizeModal').classList.remove('show')}
document.getElementById('sizeModal').addEventListener('click',e=>{if(e.target.id==='sizeModal')closeSizeGuide()});
function calcSize(){const cat=document.getElementById('sgCat').value,h=parseFloat(document.getElementById('sgHeight').value)||26.5,fit=document.getElementById('sgFit').value;let rec='';
if(cat==='shoes'){rec=h<=25.4?'US 7':h<=26?'US 8':h<=26.7?'US 9':h<=27.4?'US 10':'US 11';}
else if(cat==='tops'){rec=h<165?'Size S / M':h<178?'Size M':'Size L';}
else if(cat==='dresses'){rec=h<165?'Size 8 (Petite length recommended)':h<178?'Size 10':'Size 12 (Tall length recommended)';}
else{rec=h<170?'30" inseam, Waist 32':h<185?'32" inseam, Waist 34':'34" inseam, Waist 36';}
const r=document.getElementById('sgResult');r.style.display='block';r.innerHTML=`<b>✅ Your recommended size: ${rec}</b><br><span style="color:#3d4a63">Fit preference: ${fit} • Confidence: 94% based on verified fit reviews for this category. Between sizes? We recommend sizing ${fit.includes('Relaxed')?'up':'down'} — and remember, exchanges are free within 60 days.</span>`;}
// Countdown to midnight
function tick(){const now=new Date(),end=new Date();end.setHours(23,59,59,999);let d=Math.max(0,end-now);let h=Math.floor(d/3600000),m=Math.floor(d%3600000/60000),s=Math.floor(d%60000/1000);
document.getElementById('hrs').textContent=String(h).padStart(2,'0');document.getElementById('mins').textContent=String(m).padStart(2,'0');document.getElementById('secs').textContent=String(s).padStart(2,'0');}
tick();setInterval(tick,1000);
document.getElementById('year').textContent=new Date().getFullYear();
</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:10:11.828Z",
"url": "https://benchmark.aimac.invalid/07b23a05f97ba0f09092dcf6c0244d53c05e857c7b50339f04cc0869fdec4381.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "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": "<input placeholder=\"Search headphones, air fryers, sneakers, gifts & more...\" aria-label=\"Search products\">",
"target": [
"input[aria-label=\"Search products\"]"
]
}
]
},
{
"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": "<input placeholder=\"Search headphones, air fryers, sneakers, gifts & more...\" aria-label=\"Search products\">",
"target": [
"input[aria-label=\"Search products\"]"
]
}
]
},
{
"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-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": "<input placeholder=\"Search headphones, air fryers, sneakers, gifts & more...\" aria-label=\"Search products\">",
"target": [
"input[aria-label=\"Search products\"]"
]
}
]
},
{
"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": "<input placeholder=\"Search headphones, air fryers, sneakers, gifts & more...\" aria-label=\"Search products\">",
"target": [
"input[aria-label=\"Search products\"]"
]
}
]
},
{
"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": "<input placeholder=\"Search headphones, air fryers, sneakers, gifts & more...\" aria-label=\"Search products\">",
"target": [
"input[aria-label=\"Search products\"]"
]
}
]
},
{
"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": "<small style=\"color:#6b778e;font-weight:600\">Curated Deals. Delivered Delight.</small>",
"target": [
"span > small"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button>Search</button>",
"target": [
".search > button"
]
}
]
},
{
"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>Shop smarter.<br>Live <i>brighter.</i></h1>",
"target": [
"h1"
]
},
{
"html": "<h3>Up to 60% OFF Customer Favorites</h3>",
"target": [
".flash > div:nth-child(1) > h3"
]
},
{
"html": "<h2>Loved, reviewed<br>& bought again.</h2>",
"target": [
"#bestsellers > .section-head > div > h2"
]
},
{
"html": "<h3>AuraSound Pro Wireless Headphones</h3>",
"target": [
".card:nth-child(1) > .card-body > h3"
]
},
{
"html": "<h3>AirCrisp XL Digital Air Fryer 5.5QT</h3>",
"target": [
".card:nth-child(2) > .card-body > h3"
]
},
{
"html": "<h3>CloudStep Knit Running Shoes</h3>",
"target": [
".card:nth-child(3) > .card-body > h3"
]
},
{
"html": "<h3>LumiGlow Smart Table Lamp</h3>",
"target": [
".card:nth-child(4) > .card-body > h3"
]
},
{
"html": "<h3>HydraBoost Vitamin C Skincare Set</h3>",
"target": [
".card:nth-child(5) > .card-body > h3"
]
},
{
"html": "<h3>Nomad 65W GaN Travel Charger Kit</h3>",
"target": [
".card:nth-child(6) > .card-body > h3"
]
},
{
"html": "<h4>\ud83d\udcc9 Biggest Price Drops Today</h4>",
"target": [
".side:nth-child(1) > h4"
]
},
{
"html": "<h4>\u2b50 Top Picks For You</h4>",
"target": [
".side:nth-child(2) > h4"
]
},
{
"html": "<h4>Get $15 OFF your first order</h4>",
"target": [
".promo > h4"
]
},
{
"html": "<h2>Everything you love,<br>beautifully organized.</h2>",
"target": [
"#categories > .section-head > div > h2"
]
},
{
"html": "<h2>Gifts they'll actually love \u2014 without the guesswork.</h2>",
"target": [
".guide-copy > h2"
]
},
{
"html": "<h2>2.4 million shoppers.<br>One trusted checkout.</h2>",
"target": [
"#reviews > .section-head > div > h2"
]
},
{
"html": "<h2>Questions?<br>We've got answers.</h2>",
"target": [
".faq > div:nth-child(1) > h2"
]
},
{
"html": "<h3>Join Velora Insider & get $15 OFF + early flash sale access.</h3>",
"target": [
".news-in > div > h3"
]
},
{
"html": "<h5>Shop</h5>",
"target": [
"div:nth-child(2) > h5"
]
},
{
"html": "<h5>Help & Account</h5>",
"target": [
"div:nth-child(3) > h5"
]
},
{
"html": "<h5>Company</h5>",
"target": [
"div:nth-child(4) > h5"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main>",
"target": [
"main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e7e8ea",
"bgColor": "#0f1b2e",
"contrastRatio": 14.07,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 14.07"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>\ud83d\ude9a <b>FREE SHIPPING</b> on orders over $49 \u2022 Extended returns until Jan 31</span>",
"target": [
".topbar-in > span:nth-child(1)"
]
}
]
},
{
"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 placeholder=\"Search headphones, air fryers, sneakers, gifts & more...\" aria-label=\"Search products\">",
"target": [
"input[aria-label=\"Search products\"]"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/300x84/0f1b2e/ffffff?text=VELORA+%E2%9C%A6&font=poppins\" alt=\"Velora logo\">",
"target": [
"img[alt=\"Velora logo\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input placeholder=\"Search headphones, air fryers, sneakers, gifts & more...\" aria-label=\"Search products\">",
"target": [
"input[aria-label=\"Search products\"]"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div>",
"target": [
".flash > div:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#bestsellers\" class=\"btn btn-dark\" style=\"margin-top:12px;padding:11px 18px\">View Deal \u2192</a>",
"target": [
".btn-dark.btn[href$=\"#bestsellers\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"logo\"><img src=\"https://placehold.co/300x84/0f1b2e/ffffff?text=VELORA+%E2%9C%A6&font=poppins\" alt=\"Velora logo\"><span><span class=\"tagline-small\">Velora Market</span><br><small style=\"color:#6b778e;font-weight:600\">Curated Deals. Delivered Delight.</small></span></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": "<ul class=\"checklist\">",
"target": [
"ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><b>For Her / For Him / For Teens</b> \u2014 curated by real gift-givers</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": "<img src=\"https://placehold.co/300x84/0f1b2e/ffffff?text=VELORA+%E2%9C%A6&font=poppins\" alt=\"Velora logo\">",
"target": [
"img[alt=\"Velora logo\"]"
]
}
]
},
{
"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": 374.8,
"height": 51.2
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (374.8px by 51.2px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"logo\"><img src=\"https://placehold.co/300x84/0f1b2e/ffffff?text=VELORA+%E2%9C%A6&font=poppins\" alt=\"Velora logo\"><span><span class=\"tagline-small\">Velora Market</span><br><small style=\"color:#6b778e;font-weight:600\">Curated Deals. Delivered Delight.</small></span></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": {
"messageKey": "nonBmp"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element content contains only non-text characters"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"icon-btn\" onclick=\"showToast('\u2764\ufe0f Your wishlist has 6 saved items. Price drop alerts are ON.')\" aria-label=\"Wishlist\">\u2661</button>",
"target": [
"button[aria-label=\"Wishlist\"]"
],
"failureSummary": "Fix any of the following:\n Element content contains only non-text characters"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5a3c",
"bgColor": "#fffffe",
"contrastRatio": 3.09,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header>",
"target": [
"header"
]
},
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.09 (foreground color: #ff5a3c, background color: #fffffe, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tagline-small\">Velora Market</span>",
"target": [
".tagline-small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.09 (foreground color: #ff5a3c, background color: #fffffe, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5a3c",
"bgColor": "#ffffff",
"contrastRatio": 3.09,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<nav>",
"target": [
"nav"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.09 (foreground color: #ff5a3c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"active\">Home</a>",
"target": [
".active[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.09 (foreground color: #ff5a3c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#eb5b43",
"bgColor": "#fffefe",
"contrastRatio": 3.41,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<b style=\"background:#fff;color:#e94a30;padding:2px 8px;border-radius:999px\">VELORA20</b>",
"target": [
".flash > div:nth-child(3) > p > b"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.41 (foreground color: #eb5b43, background color: #fffefe, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b style=\"background:#fff;color:#e94a30;padding:2px 8px;border-radius:999px\">VELORA20</b>",
"target": [
".flash > div:nth-child(3) > p > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.41 (foreground color: #eb5b43, background color: #fffefe, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5a3c",
"bgColor": "#fff8f1",
"contrastRatio": 2.94,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.94 (foreground color: #ff5a3c, background color: #fff8f1, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"kicker\">\ud83c\udfc6 Best Sellers & Customer Favorites</div>",
"target": [
"#bestsellers > .section-head > div > .kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.94 (foreground color: #ff5a3c, background color: #fff8f1, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b778e",
"bgColor": "#fff8f1",
"contrastRatio": 4.28,
"fontSize": "11.3pt (15px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>",
"target": [
"#bestsellers > .section-head > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#ff5a3c",
"contrastRatio": 3.09,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag \">-37% TODAY</span>",
"target": [
".card:nth-child(1) > .card-img > .tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #ff5a3c, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag \">-37% TODAY</span>",
"target": [
".card:nth-child(1) > .card-img > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #ff5a3c, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9aa3b2",
"bgColor": "#ffffff",
"contrastRatio": 2.54,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<s>$189</s>",
"target": [
".card:nth-child(1) > .card-body > .card-foot > .price > s"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0a9d84",
"bgColor": "#ffffff",
"contrastRatio": 3.4,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span style=\"font-size:12px;color:#0a9d84;font-weight:800\">Save $70</span>",
"target": [
".card:nth-child(1) > .card-body > .card-foot > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#0fb5a3",
"contrastRatio": 2.57,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag green\">BEST SELLER</span>",
"target": [
".card:nth-child(2) > .card-img > .green.tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #ffffff, background color: #0fb5a3, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag green\">BEST SELLER</span>",
"target": [
".card:nth-child(2) > .card-img > .green.tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #ffffff, background color: #0fb5a3, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9aa3b2",
"bgColor": "#ffffff",
"contrastRatio": 2.54,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<s>$149</s>",
"target": [
".card:nth-child(2) > .card-body > .card-foot > .price > s"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0a9d84",
"bgColor": "#ffffff",
"contrastRatio": 3.4,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span style=\"font-size:12px;color:#0a9d84;font-weight:800\">Save $60</span>",
"target": [
".card:nth-child(2) > .card-body > .card-foot > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#0fb5a3",
"contrastRatio": 2.57,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag green\">-28%</span>",
"target": [
".card:nth-child(3) > .card-img > .green.tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #ffffff, background color: #0fb5a3, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag green\">-28%</span>",
"target": [
".card:nth-child(3) > .card-img > .green.tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #ffffff, background color: #0fb5a3, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9aa3b2",
"bgColor": "#ffffff",
"contrastRatio": 2.54,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<s>$110</s>",
"target": [
".card:nth-child(3) > .card-body > .card-foot > .price > s"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0a9d84",
"bgColor": "#ffffff",
"contrastRatio": 3.4,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span style=\"font-size:12px;color:#0a9d84;font-weight:800\">Save $31</span>",
"target": [
".card:nth-child(3) > .card-body > .card-foot > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#ff5a3c",
"contrastRatio": 3.09,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag \">PRICE DROP</span>",
"target": [
".card:nth-child(4) > .card-img > .tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #ff5a3c, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag \">PRICE DROP</span>",
"target": [
".card:nth-child(4) > .card-img > .tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #ff5a3c, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9aa3b2",
"bgColor": "#ffffff",
"contrastRatio": 2.54,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<s>$69</s>",
"target": [
".card:nth-child(4) > .card-body > .card-foot > .price > s"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0a9d84",
"bgColor": "#ffffff",
"contrastRatio": 3.4,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span style=\"font-size:12px;color:#0a9d84;font-weight:800\">Save $22</span>",
"target": [
".card:nth-child(4) > .card-body > .card-foot > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#0fb5a3",
"contrastRatio": 2.57,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag green\">GIFT PICK</span>",
"target": [
".card:nth-child(5) > .card-img > .green.tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #ffffff, background color: #0fb5a3, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag green\">GIFT PICK</span>",
"target": [
".card:nth-child(5) > .card-img > .green.tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #ffffff, background color: #0fb5a3, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9aa3b2",
"bgColor": "#ffffff",
"contrastRatio": 2.54,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<s>$64</s>",
"target": [
".card:nth-child(5) > .card-body > .card-foot > .price > s"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0a9d84",
"bgColor": "#ffffff",
"contrastRatio": 3.4,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span style=\"font-size:12px;color:#0a9d84;font-weight:800\">Save $25</span>",
"target": [
".card:nth-child(5) > .card-body > .card-foot > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#0fb5a3",
"contrastRatio": 2.57,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag green\">UNDER $50</span>",
"target": [
".card:nth-child(6) > .card-img > .green.tag"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #ffffff, background color: #0fb5a3, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag green\">UNDER $50</span>",
"target": [
".card:nth-child(6) > .card-img > .green.tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #ffffff, background color: #0fb5a3, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9aa3b2",
"bgColor": "#ffffff",
"contrastRatio": 2.54,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<s>$55</s>",
"target": [
".card:nth-child(6) > .card-body > .card-foot > .price > s"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.54 (foreground color: #9aa3b2, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0a9d84",
"bgColor": "#ffffff",
"contrastRatio": 3.4,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"card\">",
"target": [
".card:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span style=\"font-size:12px;color:#0a9d84;font-weight:800\">Save $21</span>",
"target": [
".card:nth-child(6) > .card-body > .card-foot > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b778e",
"bgColor": "#fff8f1",
"contrastRatio": 4.28,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p style=\"font-size:13px;color:#6b778e;margin-top:14px\">Showing <b id=\"countLabel\">6 products</b> \u2022 Prices include taxes where applicable. Stock and pricing updated every 15 minutes. Use Compare to evaluate features, warranty, and shipping before checkout.</p>",
"target": [
".layout > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b778e",
"bgColor": "#fff8f1",
"contrastRatio": 4.28,
"fontSize": "9.8pt (13px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b id=\"countLabel\">6 products</b>",
"target": [
"#countLabel"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0a9d84",
"bgColor": "#ffffff",
"contrastRatio": 3.4,
"fontSize": "9.8pt (13px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"side\">",
"target": [
".side:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>\u25bc 38% \u2014 Now $79.99</strong>",
"target": [
".drop:nth-child(2) > div > strong"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0a9d84",
"bgColor": "#ffffff",
"contrastRatio": 3.4,
"fontSize": "9.8pt (13px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"side\">",
"target": [
".side:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>\u25bc 31% \u2014 Now $47.50</strong>",
"target": [
".drop:nth-child(3) > div > strong"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0a9d84",
"bgColor": "#ffffff",
"contrastRatio": 3.4,
"fontSize": "9.8pt (13px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"side\">",
"target": [
".side:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>\u25bc 27% \u2014 Now $79.99</strong>",
"target": [
".drop:nth-child(4) > div > strong"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #0a9d84, background color: #ffffff, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fffdfb",
"bgColor": "#fff8f1",
"contrastRatio": 1.03,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.03 (foreground color: #fffdfb, background color: #fff8f1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small style=\"opacity:.7;font-size:11px;display:block;margin-top:8px\">By subscribing you agree to our Privacy Policy. Unsubscribe anytime.</small>",
"target": [
".promo > small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.03 (foreground color: #fffdfb, background color: #fff8f1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5a3c",
"bgColor": "#fff8f1",
"contrastRatio": 2.94,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.94 (foreground color: #ff5a3c, background color: #fff8f1, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"kicker\">\ud83d\udecd\ufe0f Shop By Category</div>",
"target": [
"#categories > .section-head > div > .kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.94 (foreground color: #ff5a3c, background color: #fff8f1, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b778e",
"bgColor": "#fff8f1",
"contrastRatio": 4.28,
"fontSize": "11.3pt (15px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Browse curated departments built around how you actually shop \u2014 refresh your home, upgrade your tech, restock beauty essentials, or find a gift in under five minutes with filters for price, rating, delivery speed, and brand.</p>",
"target": [
"#categories > .section-head > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5a3c",
"bgColor": "#ffffff",
"contrastRatio": 3.09,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"guide\">",
"target": [
".guide"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.09 (foreground color: #ff5a3c, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"kicker\">\ud83c\udf81 The Velora Gift Guide 2026</div>",
"target": [
".guide-copy > .kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.09 (foreground color: #ff5a3c, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#ff5a3c",
"contrastRatio": 3.09,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#bestsellers\" class=\"btn btn-primary\">Shop Gift Guide \u2192</a>",
"target": [
".guide-copy > div:nth-child(5) > .btn-primary.btn[href$=\"#bestsellers\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #ff5a3c, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#bestsellers\" class=\"btn btn-primary\">Shop Gift Guide \u2192</a>",
"target": [
".guide-copy > div:nth-child(5) > .btn-primary.btn[href$=\"#bestsellers\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #ff5a3c, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5a3c",
"bgColor": "#fff8f1",
"contrastRatio": 2.94,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.94 (foreground color: #ff5a3c, background color: #fff8f1, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"kicker\">\ud83d\udcac Customer Favorites</div>",
"target": [
"#reviews > .section-head > div > .kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.94 (foreground color: #ff5a3c, background color: #fff8f1, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b778e",
"bgColor": "#fff8f1",
"contrastRatio": 4.28,
"fontSize": "11.3pt (15px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>We publish every verified review \u2014 good or bad \u2014 and label each SKU with its true return rate and repurchase score, so you can shop with complete transparency.</p>",
"target": [
"#reviews > .section-head > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff5a3c",
"bgColor": "#fff8f1",
"contrastRatio": 2.94,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.94 (foreground color: #ff5a3c, background color: #fff8f1, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"kicker\">\u2753 Help Center & FAQ</div>",
"target": [
".faq > div:nth-child(1) > .kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.94 (foreground color: #ff5a3c, background color: #fff8f1, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b778e",
"bgColor": "#fff8f1",
"contrastRatio": 4.28,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p style=\"color:#6b778e;margin-top:12px\">Can't find what you need? Our US-based support team is available 7 days a week via live chat, email, and phone. Average first response time is under 12 minutes during business hours.</p>",
"target": [
".faq > div:nth-child(1) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.28 (foreground color: #6b778e, background color: #fff8f1, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#ff5a3c",
"contrastRatio": 3.09,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary\" style=\"border-radius:999px\">Subscribe</button>",
"target": [
".news-form > .btn-primary.btn"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #ff5a3c, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary\" style=\"border-radius:999px\">Subscribe</button>",
"target": [
".news-form > .btn-primary.btn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #ff5a3c, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "target-size",
"impact": "serious",
"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": 13,
"height": 13
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (13px by 13px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 12.4,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"active\">Home</a>",
"target": [
".active[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 12.4px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<input type=\"checkbox\" onchange=\"toggleCompare('AuraSound Pro Wireless Headphones',this.checked)\">",
"target": [
".card:nth-child(1) > .card-body > .compare-line > input[type=\"checkbox\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (13px by 13px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 12.4px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 13,
"height": 13
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (13px by 13px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 12.4,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"#bestsellers\">Best Sellers</a>",
"target": [
".nav-in > a[href$=\"#bestsellers\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 12.4px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<input type=\"checkbox\" onchange=\"toggleCompare('AirCrisp XL Digital Air Fryer 5.5QT',this.checked)\">",
"target": [
".card:nth-child(2) > .card-body > .compare-line > input[type=\"checkbox\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (13px by 13px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 12.4px instead of at least 24px."
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5157
},
{
"y": 576,
"height": 5157
},
{
"y": 1152,
"height": 5157
},
{
"y": 1728,
"height": 5157
},
{
"y": 2304,
"height": 5157
},
{
"y": 2880,
"height": 5157
},
{
"y": 3456,
"height": 5157
},
{
"y": 4032,
"height": 5157
},
{
"y": 4437,
"height": 5157
}
],
"scans": 10,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Shopping" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Shopping"
- Description: Online shopping, e-commerce, deals, retail products, and gift guides.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Shopping" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Help", "Shop", "Account".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Shopping" category. Consider themes similar to: "Best Sellers", "Flash Sales", "Customer Favorites".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "checkout", "product reviews", "SKU".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Subscribe", "View Deal", "Compare".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Shopping" sector. Ideas similar but not limited to: "size guide".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "price drops", "recommendations", "top 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.