OpenAI GPT 6.1 Terra Pro – Style and Fashion
via OpenAI · Generated
- AIMAC Debt 3.32
- Cost $0.11
- Total Violations 4
- HTML Size 29 KB
- Em Dashes 4
Screenshot
View Live Page
Accessibility Issues Found
4 Serious
-
color-contrast serious 4 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="eyebrow">A little inspiration / 04</span>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The Form Edit is an independent fashion journal for considered style, fresh perspectives, and a wardrobe that feels like you.">
<meta name="theme-color" content="#f5f3ed">
<title>The Form Edit — Style with intention.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<style>
:root {
--ink: #23241f;
--muted: #686a60;
--paper: #f5f3ed;
--white: #fffefa;
--line: #d9d9cf;
--accent: #a64b36;
--olive: #69735b;
--serif: "Playfair Display", Georgia, serif;
--sans: "DM Sans", Arial, sans-serif;
--wrap: 1440px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.65; }
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #b75940; outline-offset: 4px; }
.container { width: min(calc(100% - 80px), var(--wrap)); margin-inline: auto; }
.announcement { background: var(--ink); color: #f5f3ed; text-align: center; padding: 9px 20px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.announcement a { border-bottom: 1px solid #a7a79d; padding-bottom: 2px; }
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 112px; gap: 20px; }
.masthead-note, .masthead-right { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.masthead-note span { display: block; color: var(--ink); font-weight: 700; margin-bottom: 3px; }
.brand { display: flex; align-items: center; justify-content: center; gap: 11px; text-align: left; }
.brand-mark { width: 43px; height: 43px; }
.brand-name { font-family: var(--serif); font-size: clamp(27px, 3vw, 39px); line-height: 1; letter-spacing: -.06em; white-space: nowrap; }
.brand-tagline { margin-top: 5px; font-size: 9px; letter-spacing: .19em; text-transform: uppercase; color: var(--muted); }
.masthead-right { text-align: right; }
.masthead-right a { color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; justify-content: center; align-items: center; gap: clamp(22px, 4vw, 62px); min-height: 52px; }
.nav a { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: color .2s; white-space: nowrap; }
.nav a:hover, .text-link:hover { color: var(--accent); }
.hero { padding: 32px 0 56px; }
.hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 600px; background: #e8e7df; }
.hero-copy { padding: clamp(38px, 5.6vw, 86px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow.dark { color: var(--ink); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h1 { margin: 22px 0 24px; max-width: 620px; font-size: clamp(52px, 6.4vw, 92px); line-height: .99; letter-spacing: -.055em; }
h1 em, h2 em { font-weight: 400; }
.hero-copy p { max-width: 420px; color: #595c52; font-size: 15px; line-height: 1.8; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 32px; min-height: 52px; padding: 15px 22px; background: var(--ink); color: white; border: 1px solid var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; transition: background .2s, color .2s; }
.button:hover { background: transparent; color: var(--ink); }
.hero-copy .button { margin-top: 18px; }
.hero-image { position: relative; overflow: hidden; min-height: 500px; }
.hero-image img { height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 35%; }
.image-label { position: absolute; right: 22px; bottom: 22px; padding: 12px 15px; background: var(--paper); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; color: var(--muted); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.section { padding: 82px 0; }
.section-border { border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 36px; }
.section-heading h2, .feature-copy h2, .palette-copy h2, .newsletter h2 { margin: 10px 0 0; font-size: clamp(38px, 4.3vw, 62px); line-height: 1.08; letter-spacing: -.045em; }
.section-heading p { max-width: 390px; margin: 0; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 18px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: color .2s; }
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.story-image { overflow: hidden; background: #deded5; aspect-ratio: 4 / 4.5; }
.story-image img { height: 100%; object-fit: cover; transition: transform .5s; }
.story:hover .story-image img { transform: scale(1.035); }
.story-meta { display: flex; justify-content: space-between; gap: 10px; margin: 19px 0 10px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.story-meta span:last-child { color: var(--muted); font-weight: 400; }
.story h3 { margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 33px); line-height: 1.17; letter-spacing: -.025em; }
.story p { color: var(--muted); margin: 0 0 17px; max-width: 380px; font-size: 14px; }
.feature { background: #e5e5dc; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.feature-image { min-height: 590px; }
.feature-image img { height: 100%; object-fit: cover; object-position: center 35%; }
.feature-copy { padding: clamp(42px, 6vw, 90px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.feature-copy h2 { max-width: 520px; margin-bottom: 24px; }
.feature-copy p { max-width: 490px; color: #5c5f55; }
.feature-copy .button { margin-top: 15px; }
.numbered { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.numbered article { border-top: 1px solid var(--ink); padding-top: 18px; }
.number { color: var(--accent); font-family: var(--serif); font-size: 22px; font-style: italic; }
.numbered h3 { font-size: 28px; margin: 15px 0 10px; }
.numbered p { color: var(--muted); max-width: 370px; margin-bottom: 20px; }
.palette-section { background: #d5d9cd; }
.palette-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 120px); align-items: center; }
.palette-copy p { max-width: 490px; color: #50584c; margin: 22px 0 0; }
.palette-panel { background: var(--white); padding: clamp(25px, 3.5vw, 48px); }
.panel-top { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.panel-top strong { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.panel-top span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.palette-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0; }
.palette-buttons button { padding: 9px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 11px; }
.palette-buttons button[aria-pressed="true"] { background: var(--ink); color: white; border-color: var(--ink); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swatch-color { height: clamp(85px, 10vw, 145px); }
.swatch span { display: block; padding-top: 8px; color: var(--muted); font-size: 10px; }
.palette-result { min-height: 58px; color: #5f6258; margin: 20px 0 0; font-size: 13px; }
.quote-band { padding: 72px 20px; text-align: center; }
.quote-band blockquote { max-width: 850px; margin: 15px auto 20px; font-family: var(--serif); font-size: clamp(26px, 3.3vw, 46px); line-height: 1.25; letter-spacing: -.03em; }
.quote-band cite { font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.newsletter { background: #b6573e; color: #fffaf4; }
.newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding-top: 70px; padding-bottom: 70px; }
.newsletter .eyebrow { color: #f3d6c9; }
.newsletter h2 { margin-bottom: 15px; }
.newsletter p { max-width: 480px; margin-bottom: 0; color: #f4e4dd; }
.newsletter-form { display: flex; border-bottom: 1px solid #fffaf4; }
.newsletter-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.newsletter-form input { width: 100%; padding: 17px 0; color: white; border: 0; background: transparent; outline-offset: 3px; }
.newsletter-form input::placeholder { color: #f5ded5; }
.newsletter-form button { padding: 12px 0 12px 20px; border: 0; background: transparent; color: white; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.form-note { margin-top: 11px !important; font-size: 11px; }
footer { background: #252720; color: #f5f3ed; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 45px; padding-top: 70px; padding-bottom: 65px; }
.footer-brand .brand-name { font-size: 38px; }
.footer-brand p { max-width: 290px; margin: 18px 0 0; color: #bcbdb4; font-size: 13px; }
.footer-column h3 { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 20px; }
.footer-column a, .footer-column p { display: block; color: #bcbdb4; margin: 0 0 9px; font-size: 13px; }
.footer-column a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 19px; padding-bottom: 19px; border-top: 1px solid #4c4e46; color: #aeb0a6; font-size: 10px; letter-spacing: .06em; }
.footer-legal { display: flex; gap: 20px; }
@media (max-width: 850px) {
.container { width: min(calc(100% - 40px), var(--wrap)); }
.masthead { grid-template-columns: 1fr auto; min-height: 95px; }
.masthead-note { display: none; }
.brand { justify-content: flex-start; }
.nav-inner { justify-content: flex-start; overflow-x: auto; gap: 28px; }
.hero-grid { grid-template-columns: 1fr 1fr; min-height: 500px; }
.hero-copy { padding: 38px; }
.hero-image { min-height: 500px; }
.section { padding: 65px 0; }
.feature-image { min-height: 500px; }
.feature-copy { padding: 40px; }
.palette-grid { gap: 35px; }
.footer-main { grid-template-columns: 2fr 1fr 1fr; }
.footer-column:last-child { grid-column: 2 / 4; }
}
@media (max-width: 600px) {
.container { width: calc(100% - 32px); }
.announcement { font-size: 9px; }
.masthead { min-height: 82px; }
.brand-mark { width: 34px; height: 34px; }
.brand-name { font-size: 27px; }
.brand-tagline { font-size: 8px; }
.masthead-right { font-size: 9px; }
.nav-inner { min-height: 48px; }
.hero { padding-top: 16px; padding-bottom: 35px; }
.hero-grid, .feature-grid, .palette-grid, .newsletter-inner { grid-template-columns: 1fr; }
.hero-copy { padding: 45px 28px; }
h1 { font-size: clamp(53px, 13vw, 72px); }
.hero-image { min-height: 440px; }
.hero-bottom { font-size: 9px; }
.hero-bottom span:last-child { display: none; }
.section { padding: 55px 0; }
.section-heading { display: block; }
.section-heading p { margin-top: 16px; }
.stories, .numbered { grid-template-columns: 1fr; gap: 36px; }
.story-image { aspect-ratio: 4 / 4; }
.feature-image { min-height: 450px; }
.feature-copy { padding: 45px 28px; }
.palette-panel { padding: 24px; }
.newsletter-inner { gap: 25px; padding-top: 55px; padding-bottom: 55px; }
.footer-main { grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 55px; }
.footer-brand { grid-column: 1 / -1; }
.footer-column:last-child { grid-column: auto; }
.footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; }
}
</style>
</head>
<body>
<div class="announcement">A little inspiration, delivered every Sunday. <a href="#newsletter">Join the list ↗</a></div>
<header>
<div class="container masthead">
<div class="masthead-note"><span>An independent fashion journal</span> For the beautifully curious</div>
<a class="brand" href="#top" aria-label="The Form Edit home">
<img class="brand-mark" src="https://placehold.co/86x86/23241f/fffefa?text=F&font=playfair%20display" alt="">
<div><div class="brand-name">The Form Edit</div><div class="brand-tagline">Style with intention.</div></div>
</a>
<div class="masthead-right"><a href="#newsletter">The Sunday Edit ↗</a></div>
</div>
<nav class="nav" aria-label="Primary navigation">
<div class="container nav-inner">
<a href="#latest">Latest</a>
<a href="#runway">Runway</a>
<a href="#designers">Designers</a>
<a href="#news">News</a>
<a href="#collections">Collections</a>
<a href="#style-guide">Style Guide</a>
<a href="#beauty">Beauty</a>
</div>
</nav>
</header>
<main id="top">
<section class="hero" aria-labelledby="hero-title">
<div class="container">
<div class="hero-grid">
<div class="hero-copy">
<span class="eyebrow">The new season issue / No. 01</span>
<h1 id="hero-title">A more <em>thoughtful</em> way to dress.</h1>
<p>Good style isn’t about having more. It’s about finding the pieces, ideas, and point of view that feel unmistakably yours.</p>
<a class="button" href="#latest">Explore the issue <span aria-hidden="true">↗</span></a>
</div>
<div class="hero-image">
<img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?auto=format&fit=crop&w=1200&q=85" alt="Fashion portrait in a tailored neutral look">
<span class="image-label">The art of getting dressed ↗</span>
</div>
</div>
<div class="hero-bottom"><span>Considered style for real life</span><span>Fashion / Culture / Beauty</span><span>Scroll to discover ↓</span></div>
</div>
</section>
<section class="section section-border" id="latest" aria-labelledby="latest-title">
<div class="container">
<div class="section-heading">
<div><span class="eyebrow">The latest / 01</span><h2 id="latest-title">A fresh point of <em>view.</em></h2></div>
<p>Ideas worth wearing, stories worth sharing. Consider this your starting point for the season ahead.</p>
</div>
<div class="stories">
<article class="story" id="runway">
<a href="#collections" aria-label="Read the runway report">
<div class="story-image"><img src="https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=800&q=85" alt="Street style look with a fashion-forward silhouette" loading="lazy"></div>
<div class="story-meta"><span>Runway report</span><span>6 min read</span></div>
<h3>The silhouettes shaping the season</h3>
</a>
<p>From fluid tailoring to softly structured layers, this season’s ready-to-wear is making room for ease. Here are the ideas that translate beautifully beyond the runway.</p>
<a class="text-link" href="#collections">Read the report <span aria-hidden="true">↗</span></a>
</article>
<article class="story" id="designers">
<a href="#style-guide" aria-label="Explore the designer perspective">
<div class="story-image"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=800&q=85" alt="Two women discovering clothing together" loading="lazy"></div>
<div class="story-meta"><span>Designer perspective</span><span>5 min read</span></div>
<h3>Why personal style is always in fashion</h3>
</a>
<p>The most compelling wardrobes tell a story. We look at the designers championing individuality, thoughtful details, and clothes made to be lived in.</p>
<a class="text-link" href="#style-guide">Discover the story <span aria-hidden="true">↗</span></a>
</article>
<article class="story" id="beauty">
<a href="#palette" aria-label="Explore the beauty and color guide">
<div class="story-image"><img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=85" alt="Portrait with natural makeup and soft styling" loading="lazy"></div>
<div class="story-meta"><span>Beauty notes</span><span>4 min read</span></div>
<h3>The beauty of keeping it simple</h3>
</a>
<p>A considered routine starts with what feels good. Think luminous skin, a confident lip, and a color palette that works as effortlessly as your favorite pieces.</p>
<a class="text-link" href="#palette">Find your palette <span aria-hidden="true">↗</span></a>
</article>
</div>
</div>
</section>
<section class="feature" id="collections" aria-labelledby="feature-title">
<div class="feature-grid">
<div class="feature-image"><img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=1100&q=85" alt="A considered outfit with classic layers and accessories" loading="lazy"></div>
<div class="feature-copy">
<span class="eyebrow">The collection edit / 02</span>
<h2 id="feature-title">Fewer pieces. <em>More possibilities.</em></h2>
<p>Meet the wardrobe that works harder and feels more like you. A great capsule wardrobe begins with versatile foundations: a relaxed blazer, beautifully cut trousers, a favorite knit, and the kind of shirt you reach for on repeat.</p>
<p>Build from there with texture, proportion, and a little surprise. A sculptural earring or a rich pop of color can make familiar pieces feel entirely new—without starting from scratch.</p>
<a class="button" href="#style-guide">View the lookbook <span aria-hidden="true">↗</span></a>
</div>
</div>
</section>
<section class="section" id="style-guide" aria-labelledby="guide-title">
<div class="container">
<div class="section-heading">
<div><span class="eyebrow">The considered wardrobe / 03</span><h2 id="guide-title">The details make <em>the look.</em></h2></div>
<p>Trends are a starting point, not a rulebook. Make them your own with pieces that earn their place in your everyday rotation.</p>
</div>
<div class="numbered">
<article>
<span class="number">01 /</span>
<h3>Ease into tailoring</h3>
<p>Look for a generous shoulder, a fluid trouser, and fabrics that move with you. Pair polished separates with a simple tee for an effortless take on everyday structure.</p>
<a class="text-link" href="#palette">Explore trends <span aria-hidden="true">↗</span></a>
</article>
<article>
<span class="number">02 /</span>
<h3>Accessories with purpose</h3>
<p>A well-made belt, an intriguing bag, or a pair of sculptural earrings can change the mood of an outfit. Choose pieces with character that you’ll want to wear again and again.</p>
<a class="text-link" href="#newsletter">Get the accessories edit <span aria-hidden="true">↗</span></a>
</article>
<article id="news">
<span class="number">03 /</span>
<h3>A slower kind of new</h3>
<p>The conversation is shifting from what’s next to what lasts. Rediscover what you own, consider cost per wear, and let thoughtful purchases bring fresh energy to your wardrobe.</p>
<a class="text-link" href="#newsletter">Get style news <span aria-hidden="true">↗</span></a>
</article>
</div>
</div>
</section>
<section class="section palette-section" id="palette" aria-labelledby="palette-title">
<div class="container palette-grid">
<div class="palette-copy">
<span class="eyebrow">A little inspiration / 04</span>
<h2 id="palette-title">Find your color <em>story.</em></h2>
<p>Not sure where to begin? Choose a mood and discover a wearable color palette to inspire your next outfit. Mix the shades together, or introduce one as an accent to pieces you already love.</p>
<p>There are no rules here—just a fresh way to see your wardrobe.</p>
</div>
<div class="palette-panel">
<div class="panel-top"><strong>The palette finder</strong><span>Choose your mood ↓</span></div>
<div class="palette-buttons" role="group" aria-label="Choose a color mood">
<button type="button" data-palette="earthy" aria-pressed="true">Earthy & warm</button>
<button type="button" data-palette="soft" aria-pressed="false">Soft & serene</button>
<button type="button" data-palette="bold" aria-pressed="false">Bold & modern</button>
</div>
<div class="swatches" id="swatches" aria-label="Earthy and warm color palette">
<div class="swatch"><div class="swatch-color" style="background:#e5d6bd"></div><span>Oat</span></div>
<div class="swatch"><div class="swatch-color" style="background:#a76a51"></div><span>Terracotta</span></div>
<div class="swatch"><div class="swatch-color" style="background:#788069"></div><span>Olive</span></div>
<div class="swatch"><div class="swatch-color" style="background:#493c35"></div><span>Espresso</span></div>
</div>
<p class="palette-result" id="palette-result" aria-live="polite">Ground warm neutrals with olive, then add a touch of terracotta for an easy, earthy finish.</p>
</div>
</div>
</section>
<section class="quote-band" aria-label="Our philosophy">
<div class="container">
<span class="eyebrow">Our philosophy</span>
<blockquote>“The best-dressed version of you is simply the most <em>yourself.</em>”</blockquote>
<cite>— The Form Edit</cite>
</div>
</section>
<section class="newsletter" id="newsletter" aria-labelledby="newsletter-title">
<div class="container newsletter-inner">
<div>
<span class="eyebrow">A note from us to you</span>
<h2 id="newsletter-title">A better kind of <em>inbox.</em></h2>
<p>Join The Sunday Edit for thoughtful reads, fresh outfit ideas, and the little things inspiring us right now. A moment of style, once a week.</p>
</div>
<div>
<form class="newsletter-form" id="newsletter-form">
<label for="email">Email address</label>
<input id="email" name="email" type="email" placeholder="Your email address" autocomplete="email" required>
<button type="submit">Subscribe ↗</button>
</form>
<p class="form-note" id="form-note">We’ll open your email app to send your subscription request.</p>
</div>
</div>
</section>
</main>
<footer>
<div class="container footer-main">
<div class="footer-brand">
<div class="brand-name">The Form Edit</div>
<p>An independent fashion journal celebrating personal style, thoughtful choices, and the pleasure of getting dressed.</p>
</div>
<div class="footer-column">
<h3>Explore</h3>
<a href="#runway">Runway</a>
<a href="#designers">Designers</a>
<a href="#collections">Collections</a>
<a href="#style-guide">Style guides</a>
</div>
<div class="footer-column">
<h3>Connect</h3>
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram ↗</a>
<a href="https://www.pinterest.com/" target="_blank" rel="noopener noreferrer">Pinterest ↗</a>
<a href="https://www.tiktok.com/" target="_blank" rel="noopener noreferrer">TikTok ↗</a>
<a href="#newsletter">The Sunday Edit</a>
</div>
<div class="footer-column">
<h3>Say hello</h3>
<a href="mailto:hello@theformedit.example">hello@theformedit.example</a>
<p>Studio 14, 28 Mercer Street<br>London, W1F 9PQ</p>
<p>For collaborations & inquiries</p>
</div>
</div>
<div class="container footer-bottom">
<span>© 2026 The Form Edit. All rights reserved.</span>
<span>Made for the beautifully curious.</span>
<div class="footer-legal"><a href="mailto:hello@theformedit.example?subject=Privacy%20inquiry">Privacy</a><a href="mailto:hello@theformedit.example?subject=Terms%20inquiry">Terms</a></div>
</div>
</footer>
<script>
const palettes = {
earthy: {
label: "Earthy and warm color palette",
colors: [["Oat", "#e5d6bd"], ["Terracotta", "#a76a51"], ["Olive", "#788069"], ["Espresso", "#493c35"]],
description: "Ground warm neutrals with olive, then add a touch of terracotta for an easy, earthy finish."
},
soft: {
label: "Soft and serene color palette",
colors: [["Ivory", "#ede9df"], ["Blush", "#d6b9b3"], ["Mist", "#b8c5c4"], ["Slate", "#747e86"]],
description: "Layer airy ivory and blush with cool slate for a gentle palette that still feels polished."
},
bold: {
label: "Bold and modern color palette",
colors: [["Cream", "#eee4d4"], ["Cobalt", "#405b9e"], ["Tomato", "#bc503d"], ["Ink", "#262a2d"]],
description: "Let cobalt or tomato take the lead, then balance the look with crisp cream and deep ink."
}
};
const swatches = document.getElementById("swatches");
const result = document.getElementById("palette-result");
const paletteButtons = document.querySelectorAll("[data-palette]");
paletteButtons.forEach(button => {
button.addEventListener("click", () => {
const palette = palettes[button.dataset.palette];
paletteButtons.forEach(item => item.setAttribute("aria-pressed", String(item === button)));
swatches.setAttribute("aria-label", palette.label);
swatches.replaceChildren(...palette.colors.map(([name, color]) => {
const item = document.createElement("div");
item.className = "swatch";
const chip = document.createElement("div");
chip.className = "swatch-color";
chip.style.backgroundColor = color;
const label = document.createElement("span");
label.textContent = name;
item.append(chip, label);
return item;
}));
result.textContent = palette.description;
});
});
document.getElementById("newsletter-form").addEventListener("submit", event => {
event.preventDefault();
const email = document.getElementById("email").value.trim();
const subject = encodeURIComponent("Subscribe to The Sunday Edit");
const body = encodeURIComponent("Please add " + email + " to The Sunday Edit mailing list.");
window.location.href = "mailto:hello@theformedit.example?subject=" + subject + "&body=" + body;
document.getElementById("form-note").textContent = "Send the prepared email to request your subscription.";
});
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:17:18.018Z",
"url": "https://benchmark.aimac.invalid/a20693af2dff84621695f83bd6a089894d07fba3cd20102d2e016b6af9159c5e.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-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-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": "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": "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": []
},
{
"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": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"The Form Edit home\">",
"target": [
".brand"
]
}
]
},
{
"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 class=\"brand\" href=\"#top\" aria-label=\"The Form Edit home\">",
"target": [
".brand"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"palette-buttons\" role=\"group\" aria-label=\"Choose a color mood\">",
"target": [
".palette-buttons"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<span aria-hidden=\"true\">\u2197</span>",
"target": [
".button[href$=\"#latest\"] > span[aria-hidden=\"true\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"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 class=\"brand\" href=\"#top\" aria-label=\"The Form Edit home\">",
"target": [
".brand"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"palette-buttons\" role=\"group\" aria-label=\"Choose a color mood\">",
"target": [
".palette-buttons"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"palette-buttons\" role=\"group\" aria-label=\"Choose a color mood\">",
"target": [
".palette-buttons"
]
}
]
},
{
"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 class=\"brand\" href=\"#top\" aria-label=\"The Form Edit home\">",
"target": [
".brand"
]
}
]
},
{
"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 class=\"brand\" href=\"#top\" aria-label=\"The Form Edit home\">",
"target": [
".brand"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input id=\"email\" name=\"email\" type=\"email\" placeholder=\"Your email address\" autocomplete=\"email\" required=\"\">",
"target": [
"#email"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<div class=\"swatch-color\" style=\"background:#e5d6bd\"></div>",
"target": [
".swatch:nth-child(1) > .swatch-color"
]
}
]
},
{
"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\" data-palette=\"earthy\" aria-pressed=\"true\">Earthy & warm</button>",
"target": [
"button[data-palette=\"earthy\"]"
]
}
]
},
{
"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 id=\"hero-title\">A more <em>thoughtful</em> way to dress.</h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2 id=\"latest-title\">A fresh point of <em>view.</em></h2>",
"target": [
"#latest-title"
]
},
{
"html": "<h3>The silhouettes shaping the season</h3>",
"target": [
"a[aria-label=\"Read the runway report\"] > h3"
]
},
{
"html": "<h3>Why personal style is always in fashion</h3>",
"target": [
"a[href$=\"#style-guide\"]:nth-child(1) > h3"
]
},
{
"html": "<h3>The beauty of keeping it simple</h3>",
"target": [
"a[href$=\"#palette\"]:nth-child(1) > h3"
]
},
{
"html": "<h2 id=\"feature-title\">Fewer pieces. <em>More possibilities.</em></h2>",
"target": [
"#feature-title"
]
},
{
"html": "<h2 id=\"guide-title\">The details make <em>the look.</em></h2>",
"target": [
"#guide-title"
]
},
{
"html": "<h3>Ease into tailoring</h3>",
"target": [
"article:nth-child(1) > h3"
]
},
{
"html": "<h3>Accessories with purpose</h3>",
"target": [
"article:nth-child(2) > h3"
]
},
{
"html": "<h3>A slower kind of new</h3>",
"target": [
"#news > h3"
]
},
{
"html": "<h2 id=\"palette-title\">Find your color <em>story.</em></h2>",
"target": [
"#palette-title"
]
},
{
"html": "<h2 id=\"newsletter-title\">A better kind of <em>inbox.</em></h2>",
"target": [
"#newsletter-title"
]
},
{
"html": "<h3>Explore</h3>",
"target": [
".footer-column:nth-child(2) > h3"
]
},
{
"html": "<h3>Connect</h3>",
"target": [
".footer-column:nth-child(3) > h3"
]
},
{
"html": "<h3>Say hello</h3>",
"target": [
".footer-column:nth-child(4) > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"top\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5f3ed",
"bgColor": "#23241f",
"contrastRatio": 14.08,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 14.08"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"announcement\">A little inspiration, delivered every Sunday. <a href=\"#newsletter\">Join the list \u2197</a></div>",
"target": [
".announcement"
]
}
]
},
{
"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": "hero-title",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<h1 id=\"hero-title\">A more <em>thoughtful</em> way to dress.</h1>",
"target": [
"#hero-title"
]
}
]
},
{
"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 for=\"email\">Email address</label>",
"target": [
"label"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input id=\"email\" name=\"email\" type=\"email\" placeholder=\"Your email address\" autocomplete=\"email\" required=\"\">",
"target": [
"#email"
]
}
]
},
{
"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"
},
{
"id": "presentational-role",
"data": {
"role": "presentation"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were overridden with role=\"presentation\""
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img class=\"brand-mark\" src=\"https://placehold.co/86x86/23241f/fffefa?text=F&font=playfair%20display\" alt=\"\">",
"target": [
".brand-mark"
]
}
]
},
{
"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": null,
"relatedNodes": [
{
"html": "<label for=\"email\">Email address</label>",
"target": [
"label"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input id=\"email\" name=\"email\" type=\"email\" placeholder=\"Your email address\" autocomplete=\"email\" required=\"\">",
"target": [
"#email"
]
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"announcement\">A little inspiration, delivered every Sunday. <a href=\"#newsletter\">Join the list \u2197</a></div>",
"target": [
".announcement"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text in some way other than by color"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"announcement\">A little inspiration, delivered every Sunday. <a href=\"#newsletter\">Join the list \u2197</a></div>",
"target": [
".announcement"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#newsletter\">Join the list \u2197</a>",
"target": [
".announcement > a[href$=\"#newsletter\"]"
]
}
]
},
{
"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=\"#newsletter\">Join the list \u2197</a>",
"target": [
".announcement > a[href$=\"#newsletter\"]"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://images.unsplash.com/photo-1539109136881-3be0616acf4b?auto=format&fit=crop&w=1200&q=85\" alt=\"Fashion portrait in a tailored neutral look\">",
"target": [
".hero-image > img"
]
}
]
},
{
"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": 272.5,
"height": 58.3
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (272.5px by 58.3px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"The Form Edit home\">",
"target": [
".brand"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"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": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"swatches\" id=\"swatches\" aria-label=\"Earthy and warm color palette\">",
"target": [
"#swatches"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "bgOverlap"
},
"relatedNodes": [
{
"html": "<article class=\"story\" id=\"runway\">",
"target": [
"#runway"
]
}
],
"impact": "serious",
"message": "Element's contrast ratio could not be determined because of element overlap"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#collections\" aria-label=\"Read the runway report\">",
"target": [
"a[aria-label=\"Read the runway report\"]"
],
"failureSummary": "Fix any of the following:\n Element's contrast ratio could not be determined because of element overlap"
}
]
}
],
"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": "#a64b36",
"bgColor": "#d5d9cd",
"contrastRatio": 3.97,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section palette-section\" id=\"palette\" aria-labelledby=\"palette-title\">",
"target": [
"#palette"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.97 (foreground color: #a64b36, background color: #d5d9cd, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">A little inspiration / 04</span>",
"target": [
".palette-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.97 (foreground color: #a64b36, background color: #d5d9cd, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f3d6c9",
"bgColor": "#b6573e",
"contrastRatio": 3.45,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"newsletter\" id=\"newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
"#newsletter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #f3d6c9, background color: #b6573e, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">A note from us to you</span>",
"target": [
".newsletter-inner > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #f3d6c9, background color: #b6573e, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f4e4dd",
"bgColor": "#b6573e",
"contrastRatio": 3.84,
"fontSize": "11.3pt (15px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"newsletter\" id=\"newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
"#newsletter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.84 (foreground color: #f4e4dd, background color: #b6573e, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Join The Sunday Edit for thoughtful reads, fresh outfit ideas, and the little things inspiring us right now. A moment of style, once a week.</p>",
"target": [
".newsletter-inner > div:nth-child(1) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.84 (foreground color: #f4e4dd, background color: #b6573e, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f4e4dd",
"bgColor": "#b6573e",
"contrastRatio": 3.84,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"newsletter\" id=\"newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
"#newsletter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.84 (foreground color: #f4e4dd, background color: #b6573e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"form-note\" id=\"form-note\">We\u2019ll open your email app to send your subscription request.</p>",
"target": [
"#form-note"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.84 (foreground color: #f4e4dd, background color: #b6573e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 4766
},
{
"y": 576,
"height": 4766
},
{
"y": 1152,
"height": 4766
},
{
"y": 1728,
"height": 4766
},
{
"y": 2304,
"height": 4766
},
{
"y": 2880,
"height": 4766
},
{
"y": 3456,
"height": 4766
},
{
"y": 4032,
"height": 4766
},
{
"y": 4046,
"height": 4766
}
],
"scans": 10,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "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: "Designers", "News", "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: "Runway Reports", "Accessories Guide", "Seasonal Trends".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "color palette", "ready-to-wear", "capsule wardrobe".
- **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", "Explore Trends", "Subscribe".
- **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: "color matcher".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "stylist interviews", "must-haves", "new arrivals".
- **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.