Qwen Qwen3 Coder Next – Style and Fashion
via Parasail · Generated
- AIMAC Debt 4.94
- Cost $0.01
- Total Violations 22
- HTML Size 43 KB
- Em Dashes 99
Screenshot
View Live Page
Accessibility Issues Found
22 Serious
-
color-contrast serious 22 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#lookbook" class="btn large">View Lookbook</a>
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>AURA | Redefining Modern Style</title>
<meta name="description" content="A curated destination for contemporary fashion, sustainable style, and editorial inspiration." />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600&family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
/* ——— CSS VARIABLES & RESET ——— */
:root {
--color-bg: #fbfbfb;
--color-text: #2d2d2d;
--color-accent: #c4a484;
--color-accent-hover: #b08f6b;
--color-heading: #1a1a1a;
--color-muted: #6b6b6b;
--color-white: #ffffff;
--color-gray-light: #f5f5f5;
--color-gray-border: #e5e5e5;
--font-heading: 'Playfair Display', serif;
--font-body: 'Lato', sans-serif;
--font-ui: 'Poppins', sans-serif;
--spacing-section: 8rem 1.5rem;
--spacing-container: max(1.5rem, 5vw);
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--shadow-sm: 0 2px 6px rgba(0,0,0,0.04);
--shadow-md: 0 8px 24px rgba(0,0,0,0.08);
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
line-height: 1.7;
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* ——— UTILITIES ——— */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--spacing-container);
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--color-heading);
margin-bottom: 2rem;
letter-spacing: -0.02em;
line-height: 1.1;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--color-muted);
margin-bottom: 2.5rem;
max-width: 70ch;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 1.75rem;
font-family: var(--font-ui);
font-weight: 600;
font-size: 0.95rem;
background-color: var(--color-accent);
color: var(--color-white);
border-radius: var(--radius-md);
transition: var(--transition);
min-width: 160px;
}
.btn:hover { background-color: var(--color-accent-hover); transform: translateY(-2px); }
.btn.outline {
background-color: transparent;
border: 1px solid var(--color-accent);
color: var(--color-accent);
min-width: 0;
}
.btn.outline:hover { background-color: rgba(196, 164, 132, 0.1); border-color: var(--color-accent-hover); color: var(--color-accent-hover); }
.btn.large { padding: 1.25rem 2.5rem; font-size: 1.125rem; }
.grid {
display: grid;
gap: 2.5rem;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ——— HEADER ——— */
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 7rem;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-heading);
font-size: 1.875rem;
font-weight: 800;
color: var(--color-heading);
letter-spacing: -0.01em;
}
.logo img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 50%;
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
font-family: var(--font-ui);
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text);
position: relative;
padding: 0.25rem 0;
}
.nav-links a:hover { color: var(--color-accent); }
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-accent);
transition: var(--transition);
}
.nav-links a:hover::after { width: 100%; }
.nav-actions {
display: flex;
align-items: center;
gap: 1.5rem;
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--color-heading);
cursor: pointer;
line-height: 1;
}
/* ——— HERO ——— */
.hero {
position: relative;
padding: 6rem 0 4rem;
overflow: hidden;
}
.hero-content {
max-width: 700px;
position: relative;
z-index: 2;
}
.hero h1 {
font-family: var(--font-heading);
font-size: clamp(3rem, 7vw, 5.5rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 1.5rem;
}
.hero p {
font-size: clamp(1.125rem, 1.5vw, 1.375rem);
color: var(--color-muted);
max-width: 60ch;
margin-bottom: 2.5rem;
}
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-image {
position: absolute;
right: 0;
top: -10%;
width: 48%;
height: 90vh;
object-fit: cover;
filter: brightness(0.95);
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%, 0% 20%);
transition: var(--transition);
}
.hero-image:hover { filter: brightness(1); }
/* ——— FEATURES SECTION ——— */
.features { padding: var(--spacing-section); }
.feature-grid { gap: 2.5rem; }
.feature-card {
background: var(--color-white);
padding: 2.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.feature-icon {
width: 56px;
height: 56px;
background: var(--color-gray-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.75rem;
color: var(--color-accent);
}
.feature-title { font-family: var(--font-ui); font-weight: 700; font-size: 1.25rem; margin-bottom: 0.875rem; }
.feature-text { color: var(--color-muted); }
/* ——— SUSTAINABLE FASHION ——— */
.sustainable-fashion {
background: var(--color-gray-light);
padding: var(--spacing-section);
text-align: center;
}
.sustainable-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 2.5rem;
align-items: center;
margin-top: 3rem;
}
.sustainable-text h2 { margin-bottom: 1.5rem; }
.sustainable-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
font-size: 1.0625rem;
}
.sustainable-list li:last-child { margin-bottom: 0; }
.sustainable-list-icon {
color: var(--color-accent);
font-size: 1.5rem;
line-height: 1;
margin-top: 0.25rem;
}
/* ——— WARDROBE PLANNER (INTERACTIVE) ——— */
.wardrobe-planner {
padding: var(--spacing-section);
background: var(--color-white);
}
.planner-content { grid-template-columns: 1.2fr 1fr; }
.planner-form {
background: var(--color-gray-light);
padding: 2.5rem;
border-radius: var(--radius-lg);
}
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.95rem; }
.form-input, .form-select {
width: 100%;
padding: 0.875rem 1rem;
font-family: var(--font-body);
font-size: 1rem;
border: 1px solid var(--color-gray-border);
border-radius: var(--radius-md);
transition: var(--transition);
background: var(--color-white);
}
.form-input:focus, .form-select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(196, 164, 132, 0.2);
}
.style-recommendation {
padding: 2.5rem;
background: linear-gradient(135deg, #fdfdfd 0%, #f8f5f0 100%);
border-radius: var(--radius-lg);
}
.recommendation-header {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1.25rem;
color: var(--color-heading);
}
.recommendation-item {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.25rem;
}
.recommendation-item:last-child { margin-bottom: 0; }
.recommendation-image {
width: 70px;
height: 70px;
border-radius: var(--radius-md);
object-fit: cover;
}
.recommendation-text h4 { font-family: var(--font-ui); font-weight: 600; margin-bottom: 0.25rem; }
.recommendation-text p { font-size: 0.95rem; color: var(--color-muted); }
/* ——— EDITORIAL FEATURES ——— */
.editorial-features { padding: var(--spacing-section); }
.editorial-grid { gap: 2rem; }
.editorial-card {
display: flex;
flex-direction: column;
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
}
.editorial-card:hover { box-shadow: var(--shadow-md); }
.editorial-image {
width: 100%;
height: 280px;
object-fit: cover;
}
.editorial-content {
padding: 1.75rem;
flex-grow: 1;
}
.editorial-meta {
font-size: 0.875rem;
color: var(--color-accent);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
.editorial-title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.3;
}
.editorial-excerpt {
color: var(--color-muted);
margin-bottom: 1.5rem;
}
.editorial-read-more {
font-weight: 600;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
color: var(--color-accent);
}
.editorial-read-more::after {
content: '→';
margin-left: 0.35rem;
font-weight: 400;
}
/* ——— TESTIMONIALS ——— */
.testimonials { background: var(--color-accent); padding: var(--spacing-section); color: var(--color-white); }
.testimonials-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
}
.testimonial-card {
background: rgba(0,0,0,0.08);
padding: 2.5rem;
border-radius: var(--radius-lg);
position: relative;
}
.quote-icon {
position: absolute;
top: 2rem;
right: 2rem;
font-size: 3rem;
opacity: 0.2;
}
.testimonial-text {
font-style: italic;
font-size: 1.125rem;
line-height: 1.8;
margin-bottom: 1.75rem;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.author-info h4 { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; }
.author-info p { font-size: 0.95rem; opacity: 0.9; margin-top: 0.15rem; }
/* ——— LOOKBOOK SECTION ——— */
.lookbook { padding: var(--spacing-section); text-align: center; }
.lookbook-grid { gap: 1.25rem; margin-top: 2.5rem; }
.lookbook-item {
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
aspect-ratio: 3/4;
}
.lookbook-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);
opacity: 0;
transition: var(--transition);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.75rem;
}
.lookbook-item:hover .lookbook-overlay { opacity: 1; }
.lookbook-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-white); }
.lookbook-subtitle { font-size: 0.95rem; color: rgba(255,255,255,0.9); }
/* ——— CONTACT FORM ——— */
.contact { background: var(--color-gray-light); padding: var(--spacing-section); text-align: center; }
.contact-form {
max-width: 700px;
margin: 2.5rem auto 0;
padding: 0 1rem;
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.form-full { grid-column: span 2; }
/* ——— SIDEBAR ——— */
.sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.sidebar-widget {
background: var(--color-white);
padding: 2rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.widget-title {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--color-gray-border);
padding-bottom: 0.75rem;
}
.beauty-item { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.beauty-item:last-child { margin-bottom: 0; }
.beauty-thumb {
width: 70px;
height: 70px;
border-radius: var(--radius-md);
object-fit: cover;
flex-shrink: 0;
}
.beauty-text h4 { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
.beauty-text p { font-size: 0.875rem; color: var(--color-muted); }
.beauty-rating { color: var(--color-accent); font-size: 0.75rem; margin-top: 0.25rem; }
/* ——— FOOTER ——— */
footer {
background: #1a1a1a;
color: #d4d4d4;
padding: 6rem 0 2rem;
}
.footer-grid {
grid-template-columns: 1.5fr 1fr 1fr;
gap: 3rem;
margin-bottom: 4rem;
}
.footer-col h3 {
font-family: var(--font-heading);
color: var(--color-white);
font-size: 1.25rem;
margin-bottom: 1.5rem;
letter-spacing: -0.01em;
}
.footer-col a {
display: block;
margin-bottom: 0.75rem;
font-size: 0.95rem;
transition: var(--transition);
}
.footer-col a:hover { color: var(--color-accent); }
.social-links { display: flex; gap: 1rem; margin-top: 1rem; }
.social-icon {
width: 36px;
height: 36px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 0.875rem;
transition: var(--transition);
}
.social-icon:hover { background: var(--color-accent); transform: translateY(-2px); }
.copyright {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 0.95rem;
color: rgba(255,255,255,0.7);
}
/* ——— RESPONSIVE ——— */
@media (max-width: 992px) {
.hero-image { display: none; }
.planner-content, .sustainable-grid, .footer-grid { grid-template-columns: 1fr; }
.form-full { grid-column: span 1; }
.nav-links { display: none; }
.menu-toggle { display: block; }
.grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.hero { padding: 3rem 0 2rem; }
.hero h1 { font-size: 2.5rem; }
.form-grid { grid-template-columns: 1fr; }
.sidebar { order: 2; margin-top: 3rem; }
}
/* ——— MODAL ——— */
.modal {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal.active { opacity: 1; pointer-events: auto; }
.modal-content {
background: var(--color-white);
width: 90%;
max-width: 600px;
max-height: 85vh;
overflow-y: auto;
border-radius: var(--radius-lg);
padding: 2.5rem;
position: relative;
}
.close-modal {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: none;
border: none;
font-size: 1.75rem;
cursor: pointer;
color: var(--color-muted);
}
.wardrobe-summary { margin-top: 2rem; }
.summary-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--color-gray-border); }
.summary-item:last-child { border-bottom: none; }
</style>
</head>
<body>
<!-- HEADER -->
<header>
<div class="container nav-container">
<a href="#" class="logo">
<img src="https://placehold.co/40x40/c4a484/ffffff?text=A" alt="Aura Logo">
<span>AURA</span>
</a>
<nav class="nav-links">
<a href="#home">Home</a>
<a href="#features">Approach</a>
<a href="#editorial">Editorial</a>
<a href="#lookbook">Lookbook</a>
<a href="#wardrobe">Planner</a>
<a href="#testimonials">Stories</a>
<a href="#contact">Contact</a>
</nav>
<div class="nav-actions">
<button class="menu-toggle" aria-label="Toggle navigation">☰</button>
</div>
</div>
</header>
<!-- HERO SECTION -->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<h1 style="color: #2d2d2d;">Elevate Your Everyday</h1>
<p>Experience fashion as a form of self-expression. AURA delivers curated style guidance, sustainable collections, and editorial insights for the modern mind. Where intention meets aesthetics.</p>
<div class="hero-buttons">
<a href="#lookbook" class="btn large">View Lookbook</a>
<a href="#editorial" class="btn large outline">Explore Stories</a>
</div>
</div>
<img src="https://picsum.photos/1200/1600?grayscale&blur=2" class="hero-image" alt="Fashion editorial model wearing minimalist streetwear">
</div>
</section>
<!-- FEATURES SECTION -->
<section class="features" id="features">
<div class="container">
<div style="text-align: center; margin-bottom: 3.5rem;">
<h2 class="section-title">Our Design Philosophy</h2>
<p class="section-subtitle" style="text-align: center;">
At AURA, we believe fashion should be intentional, inclusive, and timeless. Our approach blends artistry with ethics to create collections that celebrate individuality while respecting our planet.
</p>
</div>
<div class="grid feature-grid">
<div class="feature-card">
<div class="feature-icon">🌱</div>
<h3 class="feature-title">Sustainable Foundations</h3>
<p class="feature-text">
Our collections are crafted using eco-conscious materials—organic cotton, recycled fibers, and plant-based dyes. We prioritize ethical partnerships and transparent supply chains, ensuring every garment tells a story of responsibility and respect.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">✨</div>
<h3 class="feature-title">Timeless Silhouettes</h3>
<p class="feature-text">
We design for longevity, not fleeting trends. Each piece embodies our signature minimalist aesthetic—clean lines, balanced proportions, and versatile color palettes that transition seamlessly across seasons.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3 class="feature-title">Personalized Expression</h3>
<p class="feature-text">
Fashion is deeply personal. We offer styling guides, color theory insights, and wardrobe planning tools to help you curate a cohesive, authentic wardrobe that reflects your unique identity and values.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">🤝</div>
<h3 class="feature-title">Inclusive Craft</h3>
<p class="feature-text">
Sizes 00–24. Gender-neutral styles. Adaptive design features. At AURA, inclusivity isn’t an afterthought—it’s foundational. We build garments that honor diverse bodies and lived experiences.
</p>
</div>
</div>
</div>
</section>
<!-- SUSTAINABLE FASHION SECTION -->
<section class="sustainable-fashion" id="sustainable-fashion">
<div class="container">
<div style="text-align: center;">
<h2 class="section-title">Conscious Style, Confident Choices</h2>
<p class="section-subtitle" style="text-align: center;">
True style extends beyond appearance—it’s rooted in values. At AURA, sustainability is woven into every stitch, from design to delivery.
</p>
</div>
<div class="sustainable-grid">
<div class="sustainable-text">
<h2>How We Build a Better Future of Fashion</h2>
<ul class="sustainable-list">
<li>
<span class="sustainable-list-icon">✓</span>
<span>Clothing crafted from 100% recycled or certified organic materials</span>
</li>
<li>
<span class="sustainable-list-icon">✓</span>
<span>Zeros waste pattern-making and small-batch production to eliminate overstock</span>
</li>
<li>
<span class="sustainable-list-icon">✓</span>
<span>Carbon-neutral shipping and compostable packaging</span>
</li>
<li>
<span class="sustainable-list-icon">✓</span>
<span>10% of every purchase funds clean water initiatives</span>
</li>
</ul>
<a href="#" class="btn outline" style="margin-top: 1.5rem; display: inline-block;">Read Our Impact Report →</a>
</div>
<div>
<img src="https://picsum.photos/800/700?grayscale&blur=4" alt="Sustainable fashion collection laid out on a wooden table" style="border-radius: var(--radius-lg);">
</div>
</div>
</div>
</section>
<!-- WARDROBE PLANNER (INTERACTIVE) -->
<section class="wardrobe-planner" id="wardrobe">
<div class="container">
<div style="text-align: center; margin-bottom: 3.5rem;">
<h2 class="section-title">Style Matcher</h2>
<p class="section-subtitle" style="text-align: center;">
Get a personalized styling suggestion based on your preferences, lifestyle, and color affinity. Simple, intuitive, and completely free.
</p>
</div>
<div class="planner-content grid">
<div class="planner-form">
<form id="wardrobeForm">
<div class="form-group">
<label class="form-label" for="lifestyle">Primary Lifestyle</label>
<select id="lifestyle" class="form-select">
<option value="casual">Casual & Comfortable</option>
<option value="professional">Professional & Polished</option>
<option value="creative">Creative & Expressive</option>
<option value="minimalist">Minimalist & Intentional</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="palette">Preferred Color Palette</label>
<select id="palette" class="form-select">
<option value="neutral">Neutral (Beige, Cream, Charcoal)</option>
<option value="earthy">Earthy (Olive, Rust, Mocha)</option>
<option value="cool">Cool (Sage, Slate, Dusty Blue)</option>
<option value="warm">Warm (Terracotta, Mustard, Cream)</option>
<option value="monochrome">Monochrome (Black, White, Grey)</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="priority">Most Important Factor</label>
<select id="priority" class="form-select">
<option value="comfort">Comfort</option>
<option value="versatility">Versatility</option>
<option value="statement">Statement Pieces</option>
<option value="timelessness">Timelessness</option>
</select>
</div>
<button type="button" class="btn" id="generateStyle">Get Recommendations</button>
</form>
</div>
<div class="style-recommendation">
<h3 class="recommendation-header">Your Personalized Style Brief</h3>
<div id="recommendationResult">
<p style="color: var(--color-muted); text-align: center; padding: 2rem 0;">
Fill out the form above to receive a tailored styling suggestion designed for your lifestyle and aesthetic.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- EDITORIAL FEATURES -->
<section class="editorial-features" id="editorial">
<div class="container">
<div style="text-align: center; margin-bottom: 3.5rem;">
<h2 class="section-title">From the Editor’s Desk</h2>
<p class="section-subtitle" style="text-align: center;">
Deep dives into emerging trends, timeless styling principles, and the human stories behind the clothes.
</p>
</div>
<div class="grid editorial-grid">
<article class="editorial-card">
<img src="https://picsum.photos/600/400?grayscale" alt="Model in earth-toned sustainable outfit" class="editorial-image">
<div class="editorial-content">
<div class="editorial-meta">Editorial</div>
<h3 class="editorial-title">The Re-Education in Slow Fashion</h3>
<p class="editorial-excerpt">
Why fewer clothes, chosen with intention, can lead to more joy, less waste, and a stronger sense of self. We explore the psychological and environmental benefits of conscious consumption.
</p>
<a href="#" class="editorial-read-more">Read Story</a>
</div>
</article>
<article class="editorial-card">
<img src="https://picsum.photos/600/401?grayscale" alt="Interior of AURA flagship store" class="editorial-image">
<div class="editorial-content">
<div class="editorial-meta">Lookbook</div>
<h3 class="editorial-title">Seasonless: Our Spring/Summer Collection</h3>
<p class="editorial-excerpt">
Breaking the cycle of seasonal releases with timeless pieces designed to thrive across climates and years. Discover textures, silhouettes, and details that transcend trends.
</p>
<a href="#" class="editorial-read-more">View Collection</a>
</div>
</article>
<article class="editorial-card">
<img src="https://picsum.photos/600/402?grayscale" alt="Close-up of textile details" class="editorial-image">
<div class="editorial-content">
<div class="editorial-meta">Technique</div>
<h3 class="editorial-title">The Art of Drape & Structure</h3>
<p class="editorial-excerpt">
How fabric science and masterful construction unite to create movement, elegance, and comfort. We sit down with our head patternmaker to discuss the science behind the silhouette.
</p>
<a href="#" class="editorial-read-more">Explore Details</a>
</div>
</article>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials" id="testimonials">
<div class="container">
<div style="text-align: center; margin-bottom: 3.5rem;">
<h2 class="section-title" style="color: white;">Voices of the AURA Community</h2>
</div>
<div class="grid testimonials-grid">
<div class="testimonial-card">
<span class="quote-icon">“</span>
<p class="testimonial-text">
"I’ve never felt more confident in my style. AURA’s Style Matcher recommended pieces that perfectly match my minimalist aesthetic—and the quality is extraordinary."
</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=sarah-m" class="author-avatar" alt="Sarah M.">
<div class="author-info">
<h4>Sarah M.</h4>
<p>Studio Designer • AURA Customer since 2022</p>
</div>
</div>
</div>
<div class="testimonial-card">
<span class="quote-icon">“</span>
<p class="testimonial-text">
"Finally—a brand that understands that sustainability shouldn’t sacrifice style. The fit, the fabric, the details: everything feels thoughtfully considered."
</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=leo-t" class="author-avatar" alt="Leo T.">
<div class="author-info">
<h4>Leo T.</h4>
<p>Writer & Stylist • AURA Customer since 2021</p>
</div>
</div>
</div>
<div class="testimonial-card">
<span class="quote-icon">“</span>
<p class="testimonial-text">
"The editorial content alone is worth the visit—beautifully written and rich with insight. I’ve built a more cohesive wardrobe thanks to their guides."
</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=maria-g" class="author-avatar" alt="Maria G.">
<div class="author-info">
<h4>Maria G.</h4>
<p>Fashion Professor • AURA Reader</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- LOOKBOOK SECTION -->
<section class="lookbook" id="lookbook">
<div class="container">
<div style="text-align: center; margin-bottom: 3.5rem;">
<h2 class="section-title">Curated Collections</h2>
<p class="section-subtitle" style="text-align: center;">
Discover our latest capsule collections—intentionally designed for versatility, comfort, and timeless appeal.
</p>
<div style="margin-top: 2rem; padding: 1rem 0;">
<a href="#" class="btn large">View Full Lookbook</a>
</div>
</div>
<div class="grid lookbook-grid">
<div class="lookbook-item">
<img src="https://picsum.photos/500/667?grayscale" alt="Model in neutral tone outfit">
<div class="lookbook-overlay">
<div class="lookbook-title">The Neutral Capsule</div>
<div class="lookbook-subtitle">5 essentials for every season</div>
</div>
</div>
<div class="lookbook-item">
<img src="https://picsum.photos/500/668?grayscale" alt="Model in earth tone outfit">
<div class="lookbook-overlay">
<div class="lookbook-title">Earthy Lines</div>
<div class="lookbook-subtitle">Organic textures & comfort</div>
</div>
</div>
<div class="lookbook-item">
<img src="https://picsum.photos/500/669?grayscale" alt="Model in cool tone outfit">
<div class="lookbook-overlay">
<div class="lookbook-title">Urban Minimal</div>
<div class="lookbook-subtitle">City-ready, stress-free</div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION -->
<section class="contact" id="contact">
<div class="container">
<h2 class="section-title" style="margin-bottom: 0;">Let’s Style Your World</h2>
<p class="section-subtitle" style="text-align: center; margin-top: 1rem;">
Have a styling inquiry, partnership request, or media question? We’re here to help.
</p>
<form class="contact-form" id="contactForm">
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="name">Full Name</label>
<input type="text" id="name" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label" for="email">Email</label>
<input type="email" id="email" class="form-input" required>
</div>
<div class="form-group form-full">
<label class="form-label" for="inquiry">Inquiry Type</label>
<select id="inquiry" class="form-select">
<option>General Question</option>
<option>Styling Consultation</option>
<option>Press & Media</option>
<option>Collaboration</option>
<option>Wholesale</option>
</select>
</div>
<div class="form-group form-full">
<label class="form-label" for="message">Message</label>
<textarea id="message" class="form-input" rows="4" required></textarea>
</div>
<div class="form-group form-full">
<button type="submit" class="btn large">Send Message</button>
</div>
</div>
</form>
</div>
</section>
<!-- SIDEBAR -->
<aside class="container grid planner-content" style="margin-top: 4rem; padding-top: 2rem; padding-bottom: 6rem; border-top: 1px solid var(--color-gray-border);">
<div class="sidebar">
<!-- Beauty Review Widget -->
<div class="sidebar-widget">
<h3 class="widget-title">Beauty Spotlight</h3>
<div class="beauty-item">
<img src="https://picsum.photos/100/100?grayscale" alt="Perfume" class="beauty-thumb">
<div class="beauty-text">
<h4>Silk Road Saffron</h4>
<p>Warm, spicy, floral depth.</p>
<div class="beauty-rating">★★★★★</div>
</div>
</div>
<div class="beauty-item">
<img src="https://picsum.photos/101/101?grayscale" alt="Skincare" class="beauty-thumb">
<div class="beauty-text">
<h4>Midnight Renewal</h4>
<p>Hydrating night treatment.</p>
<div class="beauty-rating">★★★★☆</div>
</div>
</div>
<div class="beauty-item">
<img src="https://picsum.photos/102/102?grayscale" alt="Nail Polish" class="beauty-thumb">
<div class="beauty-text">
<h4>Lunar Matte</h4>
<p>Ethereal grey-purple gloss.</p>
<div class="beauty-rating">★★★★★</div>
</div>
</div>
</div>
<!-- New Arrivals Widget -->
<div class="sidebar-widget">
<h3 class="widget-title">New Arrivals</h3>
<a href="#" class="beauty-item">
<img src="https://picsum.photos/103/103?grayscale" alt="Trench coat" class="beauty-thumb">
<div class="beauty-text">
<h4>The Draped Trench</h4>
<p>Water-resistant organic cotton</p>
</div>
</a>
<a href="#" class="beauty-item">
<img src="https://picsum.photos/104/104?grayscale" alt="Silk scarf" class="beauty-thumb">
<div class="beauty-text">
<h4>Artisan Silk Scarf</h4>
<p>Hand-painted, limited edition</p>
</div>
</a>
</div>
<!-- Editor’s Picks -->
<div class="sidebar-widget">
<h3 class="widget-title">Editor’s Picks</h3>
<a href="#" style="margin-bottom: 1rem; display: block;">
<h4 style="font-weight: 600; margin-bottom: 0.35rem;">The Conscious Capsule</h4>
<p style="font-size: 0.95rem; color: var(--color-muted);">12 pieces, 365 combinations</p>
</a>
<a href="#" style="display: block;">
<h4 style="font-weight: 600; margin-bottom: 0.35rem;">Styling with Layers</h4>
<p style="font-size: 0.95rem; color: var(--color-muted);">A free guide with every order this month</p>
</a>
</div>
</div>
</aside>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<a href="#" class="logo" style="color: white;">
<img src="https://placehold.co/40x40/c4a484/ffffff?text=A" alt="Aura Logo" style="filter: brightness(0) invert(1);">
<span>AURA</span>
</a>
<p style="margin-top: 1.25rem; margin-bottom: 1.5rem; line-height: 1.7;">
AURA is a fashion collective redefining modern style through sustainability, inclusivity, and editorial excellence. We believe clothing should tell your story—with integrity and artistry.
</p>
<div class="social-links">
<a href="#" class="social-icon" aria-label="Instagram">📷</a>
<a href="#" class="social-icon" aria-label="Pinterest">📌</a>
<a href="#" class="social-icon" aria-label="LinkedIn">💼</a>
<a href="#" class="social-icon" aria-label="Twitter">🐦</a>
</div>
</div>
<div class="footer-col">
<h3>Explorers</h3>
<a href="#home">Home</a>
<a href="#editorial">Editorial</a>
<a href="#lookbook">Lookbook</a>
<a href="#wardrobe">Wardrobe Planner</a>
<a href="#sustainable-fashion">Sustainability</a>
</div>
<div class="footer-col">
<h3>Support</h3>
<a href="#">Shipping & Returns</a>
<a href="#">Size Guide</a>
<a href="#">Care Instructions</a>
<a href="#">Contact Us</a>
<a href="#">FAQ</a>
</div>
</div>
<div class="copyright">
© <span id="currentYear">2023</span> AURA Fashion Collective. All rights reserved.
<br>
<a href="#" style="margin: 0 0.5rem;">Privacy Policy</a>
<a href="#" style="margin: 0 0.5rem;">Terms of Service</a>
<a href="#">Accessibility</a>
</div>
</div>
</footer>
<!-- MODAL FOR WARDROBE SUMMARY -->
<div class="modal" id="wardrobeModal">
<div class="modal-content">
<button class="close-modal" aria-label="Close modal">×</button>
<h3 style="font-family: var(--font-heading); font-size: 1.75rem; margin-bottom: 1.25rem;">Your Personal Style Summary</h3>
<div id="wardrobeSummaryContent"></div>
<div class="wardrobe-summary">
<h4 style="font-weight: 600; margin-bottom: 1rem; color: var(--color-heading);">Recommended Capsule</h4>
<div class="summary-item">
<span>1 Oversized Blazer</span>
<span>Neutral Linen</span>
</div>
<div class="summary-item">
<span>2 Layered Tops</span>
<span>Organic Cotton</span>
</div>
<div class="summary-item">
<span>1 Wide-Leg Trouser</span>
<span>Recycled Wool</span>
</div>
<div class="summary-item">
<span>1 Soft Scarf</span>
<span>Hand-dyed Silk Blend</span>
</div>
</div>
<p style="margin-top: 1.5rem; font-size: 0.95rem; color: var(--color-muted);">
This curated capsule matches your lifestyle preferences and color palette. Ready to build this wardrobe? <a href="#" style="color: var(--color-accent);">Start Shopping</a>.
</p>
</div>
</div>
<script>
// Set current year in footer
document.getElementById('currentYear').textContent = new Date().getFullYear();
// Wardrobe Planner Form Handler
document.getElementById('generateStyle').addEventListener('click', () => {
const lifestyle = document.getElementById('lifestyle').value;
const palette = document.getElementById('palette').value;
const priority = document.getElementById('priority').value;
// Generate recommendation text
let recommendation = '';
switch(lifestyle) {
case 'professional':
recommendation += `For your <strong>Professional & Polished</strong> lifestyle, we recommend clean lines and sophisticated layering. `;
break;
case 'casual':
recommendation += `Your preference for <strong>Casual & Comfortable</strong> style calls for relaxed fits and wearable textures. `;
break;
case 'creative':
recommendation += `With your <strong>Creative & Expressive</strong> approach, we’ll highlight bold proportions and artisan details. `;
break;
case 'minimalist':
recommendation += `For your <strong>Minimalist & Intentional</strong> ethos, expect refined simplicity and purposeful design. `;
break;
}
recommendation += `Your chosen <strong>${palette.replace(/^./, m => m.toUpperCase())} color palette</strong> will be used throughout, while prioritizing <strong>${priority}</strong> in every piece. ` +
`This creates a cohesive visual narrative aligned with your personal values.`;
document.getElementById('recommendationResult').innerHTML = `
<div class="recommendation-item">
<img src="https://picsum.photos/100/100?grayscale" class="recommendation-image" alt="Style match">
<div class="recommendation-text">
<h4>Curated Style Brief</h4>
<p>${recommendation}</p>
</div>
</div>
<div style="margin-top: 1.5rem; text-align: center;">
<button class="btn" id="viewRecommendation">Save to Style Vault</button>
</div>
`;
// Add event to open modal
document.getElementById('viewRecommendation').addEventListener('click', () => {
document.getElementById('wardrobeSummaryContent').innerHTML = `
<p>You've selected:</p>
<ul style="margin-left: 1.5rem; margin-bottom: 1.25rem;">
<li><strong>Lifestyle:</strong> ${lifestyle.charAt(0).toUpperCase() + lifestyle.slice(1)}</li>
<li><strong>Color Palette:</strong> ${palette.replace(/^./, m => m.toUpperCase())}</li>
<li><strong>Priority:</strong> ${priority.charAt(0).toUpperCase() + priority.slice(1)}</li>
</ul>
`;
document.getElementById('wardrobeModal').classList.add('active');
});
});
// Modal Close Handler
document.querySelectorAll('.close-modal, .modal').forEach(el => {
el.addEventListener('click', (e) => {
if (e.target.classList.contains('close-modal') || e.target.classList.contains('modal')) {
document.getElementById('wardrobeModal').classList.remove('active');
}
});
});
// Simple contact form handler (prevent submission, show alert)
document.getElementById('contactForm').addEventListener('submit', (e) => {
e.preventDefault();
alert('Thank you for your message! We’ll be in touch within 2 business days.');
e.target.reset();
});
</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-12T09:41:09.322Z",
"url": "https://benchmark.aimac.invalid/32d204418b1f62ed6ff811dc08089a360e6b8c17cf366891ea4e643789139a94.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": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "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": "<a href=\"#\" class=\"social-icon\" aria-label=\"Instagram\">\ud83d\udcf7</a>",
"target": [
"a[aria-label=\"Instagram\"]"
]
}
]
},
{
"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": "<a href=\"#\" class=\"social-icon\" aria-label=\"Instagram\">\ud83d\udcf7</a>",
"target": [
"a[aria-label=\"Instagram\"]"
]
}
]
},
{
"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": "<a href=\"#\" class=\"social-icon\" aria-label=\"Instagram\">\ud83d\udcf7</a>",
"target": [
"a[aria-label=\"Instagram\"]"
]
}
]
},
{
"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": "<a href=\"#\" class=\"social-icon\" aria-label=\"Instagram\">\ud83d\udcf7</a>",
"target": [
"a[aria-label=\"Instagram\"]"
]
}
]
},
{
"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": "<a href=\"#\" class=\"social-icon\" aria-label=\"Instagram\">\ud83d\udcf7</a>",
"target": [
"a[aria-label=\"Instagram\"]"
]
}
]
},
{
"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": "<h1 style=\"color: #2d2d2d;\">Elevate Your Everyday</h1>",
"target": [
"h1"
]
}
]
},
{
"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 type=\"button\" class=\"btn\" id=\"generateStyle\">Get Recommendations</button>",
"target": [
"#generateStyle"
]
}
]
},
{
"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 style=\"color: #2d2d2d;\">Elevate Your Everyday</h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"section-title\">Our Design Philosophy</h2>",
"target": [
"#features > .container > div:nth-child(1) > .section-title"
]
},
{
"html": "<h3 class=\"feature-title\">Sustainable Foundations</h3>",
"target": [
".feature-card:nth-child(1) > .feature-title"
]
},
{
"html": "<h3 class=\"feature-title\">Timeless Silhouettes</h3>",
"target": [
".feature-card:nth-child(2) > .feature-title"
]
},
{
"html": "<h3 class=\"feature-title\">Personalized Expression</h3>",
"target": [
".feature-card:nth-child(3) > .feature-title"
]
},
{
"html": "<h3 class=\"feature-title\">Inclusive Craft</h3>",
"target": [
".feature-card:nth-child(4) > .feature-title"
]
},
{
"html": "<h2 class=\"section-title\">Conscious Style, Confident Choices</h2>",
"target": [
"#sustainable-fashion > .container > div:nth-child(1) > .section-title"
]
},
{
"html": "<h2>How We Build a Better Future of Fashion</h2>",
"target": [
".sustainable-text > h2"
]
},
{
"html": "<h2 class=\"section-title\">Style Matcher</h2>",
"target": [
"#wardrobe > .container > div:nth-child(1) > .section-title"
]
},
{
"html": "<h3 class=\"recommendation-header\">Your Personalized Style Brief</h3>",
"target": [
".recommendation-header"
]
},
{
"html": "<h2 class=\"section-title\">From the Editor\u2019s Desk</h2>",
"target": [
"#editorial > .container > div:nth-child(1) > .section-title"
]
},
{
"html": "<h3 class=\"editorial-title\">The Re-Education in Slow Fashion</h3>",
"target": [
"article:nth-child(1) > .editorial-content > .editorial-title"
]
},
{
"html": "<h3 class=\"editorial-title\">Seasonless: Our Spring/Summer Collection</h3>",
"target": [
"article:nth-child(2) > .editorial-content > .editorial-title"
]
},
{
"html": "<h3 class=\"editorial-title\">The Art of Drape & Structure</h3>",
"target": [
"article:nth-child(3) > .editorial-content > .editorial-title"
]
},
{
"html": "<h2 class=\"section-title\" style=\"color: white;\">Voices of the AURA Community</h2>",
"target": [
"#testimonials > .container > div:nth-child(1) > .section-title"
]
},
{
"html": "<h4>Sarah M.</h4>",
"target": [
".testimonial-card:nth-child(1) > .testimonial-author > .author-info > h4"
]
},
{
"html": "<h4>Leo T.</h4>",
"target": [
".testimonial-card:nth-child(2) > .testimonial-author > .author-info > h4"
]
},
{
"html": "<h4>Maria G.</h4>",
"target": [
".testimonial-card:nth-child(3) > .testimonial-author > .author-info > h4"
]
},
{
"html": "<h2 class=\"section-title\">Curated Collections</h2>",
"target": [
"#lookbook > .container > div:nth-child(1) > .section-title"
]
},
{
"html": "<h2 class=\"section-title\" style=\"margin-bottom: 0;\">Let\u2019s Style Your World</h2>",
"target": [
".container > .section-title"
]
},
{
"html": "<h3 class=\"widget-title\">Beauty Spotlight</h3>",
"target": [
".sidebar-widget:nth-child(1) > .widget-title"
]
},
{
"html": "<h4>Silk Road Saffron</h4>",
"target": [
".sidebar-widget:nth-child(1) > .beauty-item:nth-child(2) > .beauty-text > h4"
]
},
{
"html": "<h4>Midnight Renewal</h4>",
"target": [
".sidebar-widget:nth-child(1) > .beauty-item:nth-child(3) > .beauty-text > h4"
]
},
{
"html": "<h4>Lunar Matte</h4>",
"target": [
".beauty-item:nth-child(4) > .beauty-text > h4"
]
},
{
"html": "<h3 class=\"widget-title\">New Arrivals</h3>",
"target": [
".sidebar-widget:nth-child(2) > .widget-title"
]
},
{
"html": "<h4>The Draped Trench</h4>",
"target": [
".beauty-item[href=\"#\"]:nth-child(2) > .beauty-text > h4"
]
},
{
"html": "<h4>Artisan Silk Scarf</h4>",
"target": [
".beauty-item[href=\"#\"]:nth-child(3) > .beauty-text > h4"
]
},
{
"html": "<h3 class=\"widget-title\">Editor\u2019s Picks</h3>",
"target": [
".sidebar-widget:nth-child(3) > .widget-title"
]
},
{
"html": "<h4 style=\"font-weight: 600; margin-bottom: 0.35rem;\">The Conscious Capsule</h4>",
"target": [
"a[href=\"#\"]:nth-child(2) > h4"
]
},
{
"html": "<h4 style=\"font-weight: 600; margin-bottom: 0.35rem;\">Styling with Layers</h4>",
"target": [
"a[href=\"#\"]:nth-child(3) > h4"
]
},
{
"html": "<h3>Explorers</h3>",
"target": [
".footer-col:nth-child(2) > h3"
]
},
{
"html": "<h3>Support</h3>",
"target": [
".footer-col:nth-child(3) > h3"
]
},
{
"html": "<h3 style=\"font-family: var(--font-heading); font-size: 1.75rem; margin-bottom: 1.25rem;\">Your Personal Style Summary</h3>",
"target": [
".modal-content > h3"
]
},
{
"html": "<h4 style=\"font-weight: 600; margin-bottom: 1rem; color: var(--color-heading);\">Recommended Capsule</h4>",
"target": [
".wardrobe-summary > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#1a1a1a",
"bgColor": "#ffffff",
"contrastRatio": 17.4,
"fontSize": "22.5pt (30px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 17.4"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>AURA</span>",
"target": [
".nav-container > .logo[href=\"#\"] > span"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "lifestyle",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<select id=\"lifestyle\" class=\"form-select\">",
"target": [
"#lifestyle"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"form-label\" for=\"lifestyle\">Primary Lifestyle</label>",
"target": [
"label[for=\"lifestyle\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"lifestyle\" class=\"form-select\">",
"target": [
"#lifestyle"
]
}
]
},
{
"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/40x40/c4a484/ffffff?text=A\" alt=\"Aura Logo\">",
"target": [
".nav-container > .logo[href=\"#\"] > img[alt=\"Aura 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": "explicit-label",
"data": {
"explicitLabel": "Full Name"
},
"relatedNodes": [
{
"html": "<label class=\"form-label\" for=\"name\">Full Name</label>",
"target": [
"label[for=\"name\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"text\" id=\"name\" class=\"form-input\" required=\"\">",
"target": [
"#name"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"editorial-content\">",
"target": [
"article:nth-child(1) > .editorial-content"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"editorial-read-more\">Read Story</a>",
"target": [
"article:nth-child(1) > .editorial-content > .editorial-read-more[href=\"#\"]"
]
}
]
},
{
"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\">\n <img src=\"https://placehold.co/40x40/c4a484/ffffff?text=A\" alt=\"Aura Logo\">\n <span>AURA</span>\n </a>",
"target": [
".nav-container > .logo[href=\"#\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"sustainable-list\">",
"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>\n <span class=\"sustainable-list-icon\">\u2713</span>\n <span>Clothing crafted from 100% recycled or certified organic materials</span>\n </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/40x40/c4a484/ffffff?text=A\" alt=\"Aura Logo\">",
"target": [
".nav-container > .logo[href=\"#\"] > img[alt=\"Aura Logo\"]"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Primary Lifestyle"
},
"relatedNodes": [
{
"html": "<label class=\"form-label\" for=\"lifestyle\">Primary Lifestyle</label>",
"target": [
"label[for=\"lifestyle\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"lifestyle\" class=\"form-select\">",
"target": [
"#lifestyle"
]
}
]
},
{
"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": 133.5,
"height": 51
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (133.5px by 51px, 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\">\n <img src=\"https://placehold.co/40x40/c4a484/ffffff?text=A\" alt=\"Aura Logo\">\n <span>AURA</span>\n </a>",
"target": [
".nav-container > .logo[href=\"#\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": "imgNode",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header>",
"target": [
"header"
]
},
{
"html": "<img src=\"https://picsum.photos/1200/1600?grayscale&blur=2\" class=\"hero-image\" alt=\"Fashion editorial model wearing minimalist streetwear\">",
"target": [
".hero-image"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined because element contains an image node"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#lookbook\">Lookbook</a>",
"target": [
"nav > a[href$=\"#lookbook\"]"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because element contains an image node"
}
]
}
],
"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": "#ffffff",
"bgColor": "#c4a484",
"contrastRatio": 2.33,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#lookbook\" class=\"btn large\">View Lookbook</a>",
"target": [
".large.btn[href$=\"#lookbook\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.33 (foreground color: #ffffff, background color: #c4a484, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#lookbook\" class=\"btn large\">View Lookbook</a>",
"target": [
".large.btn[href$=\"#lookbook\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.33 (foreground color: #ffffff, background color: #c4a484, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4a484",
"bgColor": "#fbfbfb",
"contrastRatio": 2.25,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#editorial\" class=\"btn large outline\">Explore Stories</a>",
"target": [
".outline.large[href$=\"#editorial\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4a484",
"bgColor": "#f5f5f5",
"contrastRatio": 2.14,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"sustainable-fashion\" id=\"sustainable-fashion\">",
"target": [
"#sustainable-fashion"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.14 (foreground color: #c4a484, background color: #f5f5f5, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn outline\" style=\"margin-top: 1.5rem; display: inline-block;\">Read Our Impact Report \u2192</a>",
"target": [
".outline.btn[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.14 (foreground color: #c4a484, background color: #f5f5f5, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c4a484",
"contrastRatio": 2.33,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"button\" class=\"btn\" id=\"generateStyle\">Get Recommendations</button>",
"target": [
"#generateStyle"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.33 (foreground color: #ffffff, background color: #c4a484, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"button\" class=\"btn\" id=\"generateStyle\">Get Recommendations</button>",
"target": [
"#generateStyle"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.33 (foreground color: #ffffff, background color: #c4a484, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4a484",
"bgColor": "#fbfbfb",
"contrastRatio": 2.25,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"editorial-meta\">Editorial</div>",
"target": [
"article:nth-child(1) > .editorial-content > .editorial-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4a484",
"bgColor": "#fbfbfb",
"contrastRatio": 2.25,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"editorial-read-more\">Read Story</a>",
"target": [
"article:nth-child(1) > .editorial-content > .editorial-read-more[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4a484",
"bgColor": "#fbfbfb",
"contrastRatio": 2.25,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"editorial-meta\">Lookbook</div>",
"target": [
"article:nth-child(2) > .editorial-content > .editorial-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4a484",
"bgColor": "#fbfbfb",
"contrastRatio": 2.25,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"editorial-read-more\">View Collection</a>",
"target": [
"article:nth-child(2) > .editorial-content > .editorial-read-more[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4a484",
"bgColor": "#fbfbfb",
"contrastRatio": 2.25,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"editorial-meta\">Technique</div>",
"target": [
"article:nth-child(3) > .editorial-content > .editorial-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4a484",
"bgColor": "#fbfbfb",
"contrastRatio": 2.25,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"editorial-read-more\">Explore Details</a>",
"target": [
"article:nth-child(3) > .editorial-content > .editorial-read-more[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.25 (foreground color: #c4a484, background color: #fbfbfb, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c4a484",
"contrastRatio": 2.33,
"fontSize": "36.0pt (48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"testimonials\" id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.33 (foreground color: #ffffff, background color: #c4a484, font size: 36.0pt (48px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h2 class=\"section-title\" style=\"color: white;\">Voices of the AURA Community</h2>",
"target": [
"#testimonials > .container > div:nth-child(1) > .section-title"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.33 (foreground color: #ffffff, background color: #c4a484, font size: 36.0pt (48px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b49779",
"contrastRatio": 2.74,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(1)"
]
},
{
"html": "<section class=\"testimonials\" id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"testimonial-text\">\n \"I\u2019ve never felt more confident in my style. AURA\u2019s Style Matcher recommended pieces that perfectly match my minimalist aesthetic\u2014and the quality is extraordinary.\"\n </p>",
"target": [
".testimonial-card:nth-child(1) > .testimonial-text"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b49779",
"contrastRatio": 2.74,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(1)"
]
},
{
"html": "<section class=\"testimonials\" id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h4>Sarah M.</h4>",
"target": [
".testimonial-card:nth-child(1) > .testimonial-author > .author-info > h4"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f8f5f2",
"bgColor": "#b49779",
"contrastRatio": 2.52,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(1)"
]
},
{
"html": "<section class=\"testimonials\" id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #f8f5f2, background color: #b49779, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Studio Designer \u2022 AURA Customer since 2022</p>",
"target": [
".testimonial-card:nth-child(1) > .testimonial-author > .author-info > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #f8f5f2, background color: #b49779, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b49779",
"contrastRatio": 2.74,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(2)"
]
},
{
"html": "<section class=\"testimonials\" id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"testimonial-text\">\n \"Finally\u2014a brand that understands that sustainability shouldn\u2019t sacrifice style. The fit, the fabric, the details: everything feels thoughtfully considered.\"\n </p>",
"target": [
".testimonial-card:nth-child(2) > .testimonial-text"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b49779",
"contrastRatio": 2.74,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(2)"
]
},
{
"html": "<section class=\"testimonials\" id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h4>Leo T.</h4>",
"target": [
".testimonial-card:nth-child(2) > .testimonial-author > .author-info > h4"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f8f5f2",
"bgColor": "#b49779",
"contrastRatio": 2.52,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(2)"
]
},
{
"html": "<section class=\"testimonials\" id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #f8f5f2, background color: #b49779, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Writer & Stylist \u2022 AURA Customer since 2021</p>",
"target": [
".testimonial-card:nth-child(2) > .testimonial-author > .author-info > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #f8f5f2, background color: #b49779, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b49779",
"contrastRatio": 2.74,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(3)"
]
},
{
"html": "<section class=\"testimonials\" id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"testimonial-text\">\n \"The editorial content alone is worth the visit\u2014beautifully written and rich with insight. I\u2019ve built a more cohesive wardrobe thanks to their guides.\"\n </p>",
"target": [
".testimonial-card:nth-child(3) > .testimonial-text"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#b49779",
"contrastRatio": 2.74,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(3)"
]
},
{
"html": "<section class=\"testimonials\" id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h4>Maria G.</h4>",
"target": [
".testimonial-card:nth-child(3) > .testimonial-author > .author-info > h4"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.74 (foreground color: #ffffff, background color: #b49779, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f8f5f2",
"bgColor": "#b49779",
"contrastRatio": 2.52,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\">",
"target": [
".testimonial-card:nth-child(3)"
]
},
{
"html": "<section class=\"testimonials\" id=\"testimonials\">",
"target": [
"#testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.52 (foreground color: #f8f5f2, background color: #b49779, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Fashion Professor \u2022 AURA Reader</p>",
"target": [
".testimonial-card:nth-child(3) > .testimonial-author > .author-info > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #f8f5f2, background color: #b49779, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c4a484",
"contrastRatio": 2.33,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn large\">View Full Lookbook</a>",
"target": [
".large.btn[href=\"#\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.33 (foreground color: #ffffff, background color: #c4a484, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn large\">View Full Lookbook</a>",
"target": [
".large.btn[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.33 (foreground color: #ffffff, background color: #c4a484, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c4a484",
"contrastRatio": 2.33,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"btn large\">Send Message</button>",
"target": [
"button[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.33 (foreground color: #ffffff, background color: #c4a484, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"btn large\">Send Message</button>",
"target": [
"button[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.33 (foreground color: #ffffff, background color: #c4a484, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 15284
},
{
"y": 576,
"height": 15284
},
{
"y": 1152,
"height": 15284
},
{
"y": 1728,
"height": 15284
},
{
"y": 2304,
"height": 15284
},
{
"y": 2880,
"height": 15284
},
{
"y": 3456,
"height": 15284
},
{
"y": 4032,
"height": 15284
},
{
"y": 4608,
"height": 15284
},
{
"y": 5184,
"height": 15284
},
{
"y": 5760,
"height": 15284
},
{
"y": 6336,
"height": 15284
},
{
"y": 6912,
"height": 15284
},
{
"y": 7488,
"height": 15284
},
{
"y": 8064,
"height": 15284
},
{
"y": 8640,
"height": 15284
},
{
"y": 9216,
"height": 15284
},
{
"y": 9792,
"height": 15284
},
{
"y": 10368,
"height": 15284
},
{
"y": 10944,
"height": 15284
},
{
"y": 11520,
"height": 15284
},
{
"y": 12096,
"height": 15284
},
{
"y": 12672,
"height": 15284
},
{
"y": 13248,
"height": 15284
},
{
"y": 13824,
"height": 15284
},
{
"y": 14400,
"height": 15284
},
{
"y": 14564,
"height": 15284
}
],
"scans": 28,
"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 "Style & Fashion" 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: "Style & Fashion"
- Description: Fashion trends, style guides, beauty resources, and clothing inspiration.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Style & Fashion" 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: "Blog", "Style Guide", "Collections".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Style & Fashion" category. Consider themes similar to: "Sustainable Fashion", "Wardrobe Essentials", "Street Style".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "color palette", "collection", "editorial".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "View Lookbook", "Try Look", "Get Inspired".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Style & Fashion" sector. Ideas similar but not limited to: "wardrobe planner".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "beauty reviews", "new arrivals", "editor 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.