html · chain · relay · step 022 of 64
offline render, Chrome 154, light scheme, 2 s of virtual time
runs in a sandboxed frame with no origin; live pages may fetch CDN fonts the offline render did not
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="A well-structured, accessible HTML5 document with modern best practices.">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
<meta name="author" content="ksmith@centricle.com">
<meta name="robots" content="index, follow">
<title>Welcome</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E👋%3C/text%3E%3C/svg%3E">
<link rel="canonical" href="https://example.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="Welcome">
<meta property="og:description" content="A well-structured, accessible HTML5 document with modern best practices.">
<meta property="og:url" content="https://example.com/">
<meta property="og:site_name" content="Welcome">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Site preview image">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Welcome">
<meta name="twitter:description" content="A well-structured, accessible HTML5 document with modern best practices.">
<meta name="twitter:image" content="https://example.com/og-image.png">
<meta name="twitter:image:alt" content="Site preview image">
<style>
:root {
color-scheme: light dark;
--text: #1a1a1a;
--text-secondary: #555;
--background: #fff;
--accent: #0052a3;
--border: #e0e0e0;
}
@media (prefers-color-scheme: dark) {
:root {
--text: #e0e0e0;
--text-secondary: #a0a0a0;
--background: #121212;
--accent: #5fa3ff;
--border: #333;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
a {
transition: text-decoration-thickness 0.15s ease;
}
.skip-link {
transition: transform 0.15s ease;
}
button,
.button {
transition: opacity 0.15s ease, transform 0.15s ease;
}
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
min-height: 100dvh;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
line-height: 1.6;
max-width: 70ch;
margin: 0 auto;
padding: clamp(1rem, 5vw, 1.5rem);
padding-top: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-top));
padding-right: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-right));
padding-bottom: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-bottom));
padding-left: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-left));
color: var(--text);
background: var(--background);
}
h1 {
color: var(--accent);
font-size: clamp(1.75rem, 1.25rem + 3vw, 2.5rem);
font-weight: 700;
line-height: 1.1;
text-wrap: balance;
margin: 0 0 1.5rem 0;
letter-spacing: -0.02em;
}
h2 {
color: var(--accent);
font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
font-weight: 600;
line-height: 1.2;
text-wrap: balance;
margin: 2rem 0 1rem 0;
letter-spacing: -0.01em;
}
h2:first-child {
margin-top: 0;
}
p {
text-wrap: pretty;
margin: 1rem 0;
}
a {
color: var(--accent);
text-underline-offset: 0.2em;
text-decoration-thickness: 2px;
text-decoration-skip-ink: auto;
font-weight: 500;
}
a:hover, a:active {
text-decoration-thickness: 3px;
}
button,
.button {
display: inline-block;
text-decoration: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 500;
font-family: inherit;
color: var(--background);
background: var(--accent);
border: 2px solid var(--accent);
border-radius: 0.25rem;
cursor: pointer;
}
button:hover,
.button:hover {
opacity: 0.9;
}
button:active,
.button:active {
transform: scale(0.98);
}
ul, ol {
margin: 1rem 0;
padding-left: 2rem;
}
li {
margin: 0.5rem 0;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
button:focus-visible, a:focus-visible {
box-shadow: 0 0 0 3px var(--background), 0 0 0 5px var(--accent);
outline: none;
}
.skip-link {
position: absolute;
left: 0;
top: 0;
transform: translateY(-100%);
background: var(--accent);
color: var(--background);
padding: 0.75rem 1.5rem;
z-index: 1000;
border-radius: 0 0 0.25rem 0;
font-weight: 600;
text-decoration: none;
display: inline-block;
}
.skip-link:focus {
transform: none;
outline: 3px solid var(--text);
outline-offset: -3px;
}
header {
padding-block: 1.5rem 0;
}
main {
padding: 1rem 0;
}
main:focus {
outline: none;
}
section {
margin: 2rem 0;
}
.card {
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 1.5rem;
background: var(--background);
margin: 1.5rem 0;
}
.card h3 {
font-size: 1.25rem;
line-height: 1.3;
margin-top: 0;
color: var(--accent);
}
footer {
padding-block: 1.5rem;
margin-top: 3rem;
border-top: 1px solid var(--border);
font-size: 0.875rem;
color: var(--text-secondary);
text-align: center;
}
footer p {
margin: 0.5rem 0;
}
@media print {
:root {
color-scheme: light;
--text: #000;
--text-secondary: #333;
--background: #fff;
--accent: #000;
--border: #999;
}
.skip-link,
button,
.button {
display: none;
}
body {
display: block;
min-height: 0;
max-width: none;
padding: 0;
}
a {
color: inherit;
text-decoration: underline;
}
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
font-weight: normal;
}
.card {
border: none;
break-inside: avoid;
}
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header>
<h1>Welcome</h1>
</header>
<main id="main" tabindex="-1">
<section>
<p>This is a well-structured, accessible HTML5 document demonstrating modern best practices for semantic markup and inclusive design.</p>
<p>
It uses semantic landmarks, a skip link for keyboard navigation,
and CSS that adapts to your light or dark mode preference.
</p>
<p>
Text and link colors meet WCAG AA contrast in both themes, type scales
with your browser's font size, and motion respects your system settings.
</p>
</section>
<section aria-labelledby="features">
<h2 id="features">Features</h2>
<ul>
<li>Semantic HTML structure with proper landmarks</li>
<li>Keyboard accessible navigation and focus management</li>
<li>Dark mode support with custom color schemes</li>
<li>Responsive typography using modern CSS</li>
<li>Print-friendly styles for better readability</li>
<li>WCAG AA contrast compliance in all color modes</li>
</ul>
</section>
<section aria-labelledby="examples">
<h2 id="examples">Examples</h2>
<article class="card">
<h3>Component Cards</h3>
<p>Card components are useful for organizing related content. They include a subtle border and padding for visual separation.</p>
<a class="button" href="#resources">Learn more</a>
</article>
<article class="card">
<h3>Interactive Elements</h3>
<p>Buttons and links are fully accessible with clear focus states. The “Learn more” button above demonstrates smooth transitions and proper visual feedback.</p>
<p>Try using the Tab key to navigate through all interactive elements.</p>
</article>
</section>
<section aria-labelledby="resources">
<h2 id="resources">Resources</h2>
<p>Want to learn more about web accessibility and semantic HTML? Check out these resources:</p>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG22/quickref/">WCAG 2.2 Quick Reference</a></li>
<li><a href="https://html.spec.whatwg.org/">HTML Living Standard</a></li>
<li><a href="https://www.a11y-101.com/">A11y 101</a></li>
</ul>
</section>
</main>
<footer>
<p><small>© <time datetime="2026">2026</time>. All rights reserved.</small></p>
</footer>
</body>
</html>
what changed from step 021
+19 / -10 lines
<head> <meta charset="utf-8">- <meta http-equiv="content-security-policy" content="default-src 'none'; style-src 'sha256-+xb7e3Yv0VTOgKaFnvEKGz9cFb9Tz9b9lxLJg8gR8Q='; img-src data:; base-uri 'none'; form-action 'none'">+ <meta http-equiv="content-security-policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="description" content="A well-structured, accessible HTML5 document with modern best practices.">⋯ line 66 transition: transform 0.15s ease; }- button {+ button,+ .button { transition: opacity 0.15s ease, transform 0.15s ease; }⋯ line 124 text-decoration-thickness: 3px; }- button {+ button,+ .button {+ display: inline-block;+ text-decoration: none; padding: 0.75rem 1.5rem; font-size: 1rem;⋯ line 138 cursor: pointer; }- button:hover {+ button:hover,+ .button:hover { opacity: 0.9; }- button:active {+ button:active,+ .button:active { transform: scale(0.98); }⋯ line 201 } .card h3 {+ font-size: 1.25rem;+ line-height: 1.3; margin-top: 0; color: var(--accent);⋯ line 227 } .skip-link,- button {+ button,+ .button { display: none; }⋯ line 248 .card { border: none;- page-break-inside: avoid;+ break-inside: avoid; } }⋯ line 288 <h3>Component Cards</h3> <p>Card components are useful for organizing related content. They include a subtle border and padding for visual separation.</p>- <button type="button">Learn More</button>+ <a class="button" href="#resources">Learn more</a> </article> <article class="card"> <h3>Interactive Elements</h3>- <p>Buttons and links are fully accessible with clear focus states. The button above demonstrates smooth transitions and proper visual feedback.</p>+ <p>Buttons and links are fully accessible with clear focus states. The “Learn more” button above demonstrates smooth transitions and proper visual feedback.</p> <p>Try using the Tab key to navigate through all interactive elements.</p> </article>⋯ line 302 <p>Want to learn more about web accessibility and semantic HTML? Check out these resources:</p> <ul>- <li><a href="https://www.w3.org/WAI/WCAG21/quickref/">WCAG 2.1 Quick Reference</a></li>+ <li><a href="https://www.w3.org/WAI/WCAG22/quickref/">WCAG 2.2 Quick Reference</a></li> <li><a href="https://html.spec.whatwg.org/">HTML Living Standard</a></li> <li><a href="https://www.a11y-101.com/">A11y 101</a></li>
What the model said
The page was already well built, so I made targeted fixes to `0.html` instead of rewriting it. I haven't opened it in a browser to check the result.
1. **Styles may have been blocked:** the Content-Security-Policy only allowed a stylesheet matching a specific hash. If that hash doesn't match the `<style>` block exactly, the browser drops the whole stylesheet and the page shows up unstyled. I wanted to calculate the correct hash, but running that command needed approval and was denied, so I couldn't confirm whether it matched. The hash also looked hand-written. I replaced it with `style-src 'unsafe-inline'`. That's safe here because the page loads no scripts. If you'd rather keep the stricter hash version, recompute it after all your style edits are done, since any CSS change invalidates it.
2. **The "Learn More" button did nothing:** it's now a link styled as a button (`.button`) that jumps to the Resources section. It keeps the same hover, click and transition effects, and it's hidden when printing, like the button was. I also changed the other card's text to name it ("The 'Learn more' button above…").
3. **Card headings had no set size:** they now have an explicit size and line height, so they sit properly below the page's `h2` headings.
4. **Printing:** I replaced the old `page-break-inside` property with the current `break-inside`.
5. **Outdated link:** the WCAG 2.1 Quick Reference link now points to WCAG 2.2.
I didn't change the `author` meta tag, but it publishes your email address in the page source, where scrapers can collect it. Consider using your name there instead.