html · chain · relay · step 009 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">
<head>
<meta charset="utf-8">
<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">
<title>Welcome</title>
<style>
:root {
color-scheme: light dark;
--text: light-dark(#1a1a1a, #e0e0e0);
--text-secondary: light-dark(#555, #a0a0a0);
--background: light-dark(#fff, #121212);
--accent: light-dark(#0052a3, #5fa3ff);
--border: light-dark(#e0e0e0, #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;
}
}
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;
line-height: 1.6;
max-width: 70ch;
margin: 0 auto;
padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
color: var(--text);
background: var(--background);
}
h1 {
color: var(--accent);
font-size: 2rem;
line-height: 1.2;
text-wrap: balance;
margin: 0;
}
p {
text-wrap: pretty;
margin: 1rem 0;
}
a {
color: var(--accent);
text-underline-offset: 0.15em;
text-decoration-thickness: 1.5px;
}
a:hover {
text-decoration-thickness: 3px;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.skip-link {
position: absolute;
left: 0;
top: 0;
transform: translateY(-100%);
background: var(--accent);
color: var(--background);
padding: 0.75rem 1.5rem;
z-index: 1;
border-radius: 0 0 0.25rem 0;
}
.skip-link:focus {
transform: none;
outline-color: var(--text);
}
header {
padding-block: 1.5rem;
margin-bottom: 1.5rem;
}
main:focus {
outline: none;
}
footer {
padding-block: 1.5rem;
margin-top: 3rem;
border-top: 1px solid var(--border);
font-size: 0.875rem;
color: var(--text-secondary);
}
footer p {
margin: 0.5rem 0;
}
@media print {
.skip-link {
display: none;
}
body {
display: block;
min-height: 0;
max-width: none;
}
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header>
<h1>Welcome</h1>
</header>
<main id="main" tabindex="-1">
<p>This is a well-structured, accessible HTML5 document.</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>
Features include improved color contrast for accessibility (WCAG AA compliant),
better typography with consistent sizing, and smooth interactions.
</p>
</main>
<footer>
<p>© 2026. All rights reserved.</p>
</footer>
</body>
</html>
what changed from step 008
+40 / -34 lines
<head> <meta charset="utf-8">- <meta name="viewport" content="width=device-width, initial-scale=1">+ <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">⋯ line 13 :root { color-scheme: light dark;- --text: #1a1a1a;- --text-secondary: #555;- --background: #fff;- --accent: #0052a3;- --border: #e0e0e0;+ --text: light-dark(#1a1a1a, #e0e0e0);+ --text-secondary: light-dark(#555, #a0a0a0);+ --background: light-dark(#fff, #121212);+ --accent: light-dark(#0052a3, #5fa3ff);+ --border: light-dark(#e0e0e0, #333); }- @media (prefers-color-scheme: dark) {- :root {- --text: #e0e0e0;- --text-secondary: #a0a0a0;- --background: #121212;- --accent: #5fa3ff;- --border: #333;- }- } *, *::before,⋯ line 25 } html {- scroll-behavior: smooth;+ -webkit-text-size-adjust: 100%;+ text-size-adjust: 100%; }+ @media (prefers-reduced-motion: no-preference) {+ html {+ scroll-behavior: smooth;+ }+ } 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: 16px; line-height: 1.6; max-width: 70ch;⋯ line 45 color: var(--text); background: var(--background);- -webkit-text-size-adjust: 100%;- text-size-adjust: 100%; } h1 {⋯ line 51 line-height: 1.2; text-wrap: balance;- margin-top: 0;+ margin: 0; } p { text-wrap: pretty;- color: var(--text); margin: 1rem 0; }⋯ line 61 text-underline-offset: 0.15em; text-decoration-thickness: 1.5px;- transition: opacity 0.2s ease; }- a:hover,- a:focus-visible {- opacity: 0.8;+ a:hover {+ text-decoration-thickness: 3px; } :focus-visible {⋯ line 71 .skip-link { position: absolute;- left: -9999px;+ left: 0; top: 0;+ transform: translateY(-100%); background: var(--accent);- color: white;+ color: var(--background); padding: 0.75rem 1.5rem; z-index: 1;⋯ line 81 } .skip-link:focus {- left: 0;+ transform: none;+ outline-color: var(--text); } header {⋯ line 88 margin-bottom: 1.5rem; }- main {- min-height: calc(100vh - 300px);+ main:focus {+ outline: none; } footer {⋯ line 100 footer p { margin: 0.5rem 0;- color: var(--text-secondary); }+ @media print {+ .skip-link {+ display: none;+ }+ body {+ display: block;+ min-height: 0;+ max-width: none;+ }+ } </style> </head> <body> <a class="skip-link" href="#main">Skip to content</a>- <header role="banner">+ <header> <h1>Welcome</h1> </header>- <main id="main" role="main">+ <main id="main" tabindex="-1"> <p>This is a well-structured, accessible HTML5 document.</p> <p>⋯ line 129 </p> </main>- <footer role="contentinfo">+ <footer> <p>© 2026. All rights reserved.</p> </footer>
What the model said
I improved `0.html` without changing its content or look; the fixes are to accessibility, layout and CSS cleanliness. I haven't opened it in a browser, so the changes are untested. ## Accessibility fixes - **Skip link contrast in dark mode:** it was white text on light blue (`#5fa3ff`), which I estimate at about 2.6:1 and below WCAG AA. It now uses the page background colour, so it has strong contrast in both modes. - **Text size:** removed `font-size: 16px` from `body`, which overrode the user's browser font-size setting. - **Motion:** smooth scrolling now only applies when the user hasn't asked for reduced motion. - **Link hover:** hovering used to fade links to 80% opacity, which lowers contrast. It now thickens the underline instead. - **Skip link target:** `<main>` has `tabindex="-1"` so keyboard focus moves there reliably when the skip link is used. ## Layout - **Footer position:** replaced the `min-height: calc(100vh - 300px)` magic number with a grid layout on `body`, so the footer sits at the bottom on short pages. - **Notched devices:** added `viewport-fit=cover` to the viewport meta tag; without it the existing `env(safe-area-inset-*)` padding had no effect. - **Print:** added a small print block that hides the skip link and removes the screen layout constraints. ## Cleanup - **Colours:** each colour is now declared once with `light-dark()` instead of being duplicated in a dark-mode media query. This needs a browser from roughly mid-2024 or later; older ones would lose the custom colours. - **Redundant code:** removed the `role` attributes on `<header>`, `<main>` and `<footer>`, plus repeated `color` declarations on `p` and `footer p`. - **Text size adjust:** moved `text-size-adjust` from `body` to `html`. ## Left for you to decide - **Email in the author tag:** `<meta name="author">` contains your email address, which scrapers can harvest from a public page. A name is the more usual value. - **Copyright line:** `© 2026. All rights reserved.` names no rights holder.