Add skip link, focus rings, landmarks and contrast fixes #8

Claude · 2026-10-07T13:37:03Z

Claude commented

2026-10-07 13:37:03 +00:00

Accessibility pass (CC-9). Skip link, visible focus on links, buttons, choices and inputs, labelled nav landmarks (the unique-landmark override is gone), aria-live on the email hint and register error, and a darker muted text token.

Other fixes axe found: heading order on the home, nodes, spec and thanks pages, the feedback band is now a labelled region, and band/accent paragraph text is white for contrast.

Contrast: --neutral-500 (muted text) went from #7D776F to #726C65. On cream 4.18 to 4.90, on white 4.43 to 5.17. Footer .legal already passed at 5.09.

Tested: node --test (10 pass), html-validate clean, axe 4.10.2 reports 0 violations on all 11 pages (test/axe.js, run by hand with PLAYWRIGHT_DIR, not in CI). The register form was completed and submitted by keyboard only in Chromium.

Ticket: CC-9.

Accessibility pass (CC-9). Skip link, visible focus on links, buttons, choices and inputs, labelled nav landmarks (the `unique-landmark` override is gone), `aria-live` on the email hint and register error, and a darker muted text token. Other fixes axe found: heading order on the home, nodes, spec and thanks pages, the feedback band is now a labelled region, and band/accent paragraph text is white for contrast. Contrast: `--neutral-500` (muted text) went from #7D776F to #726C65. On cream 4.18 to 4.90, on white 4.43 to 5.17. Footer `.legal` already passed at 5.09. Tested: `node --test` (10 pass), html-validate clean, axe 4.10.2 reports 0 violations on all 11 pages (`test/axe.js`, run by hand with `PLAYWRIGHT_DIR`, not in CI). The register form was completed and submitted by keyboard only in Chromium. Ticket: CC-9.

Claude added 1 commit

2026-10-07 13:37:03 +00:00

Add skip link, focus rings, landmarks and contrast fixes

CI / check (pull_request) Successful in 9s

Details

61e8ea77df

Claude reviewed

2026-10-07 13:37:35 +00:00

Claude left a comment

styles.css, the new :focus-visible rule: the ring is --orange-500. That is 2.7:1 on the page background, 2.9:1 on white and 1.6:1 on the green band. All are under the 3:1 WCAG 1.4.11 needs. The old ring had a white inner band; this one doesn't. Use a darker colour such as --orange-700, or bring back a two-tone ring. axe doesn't check this, so the script won't catch it.
src/register.html, line 52: aria-live on a <p hidden> that is later unhidden is unreliable. Many screen readers don't announce an element that goes from display:none to visible. Keep a permanently rendered live region and change its text, or use role="alert" and set it from site.js.
styles.css line 22: --ring-focus is now unused. Delete it.

1. styles.css, the new `:focus-visible` rule: the ring is `--orange-500`. That is 2.7:1 on the page background, 2.9:1 on white and 1.6:1 on the green band. All are under the 3:1 WCAG 1.4.11 needs. The old ring had a white inner band; this one doesn't. Use a darker colour such as `--orange-700`, or bring back a two-tone ring. axe doesn't check this, so the script won't catch it. 2. src/register.html, line 52: `aria-live` on a `<p hidden>` that is later unhidden is unreliable. Many screen readers don't announce an element that goes from `display:none` to visible. Keep a permanently rendered live region and change its text, or use `role="alert"` and set it from site.js. 3. styles.css line 22: `--ring-focus` is now unused. Delete it.

rob added 1 commit

2026-10-07 13:39:24 +00:00

Darken focus ring, use role alert for register error

CI / check (pull_request) Successful in 10s

Details

4b4a4431f6

Claude reviewed

2026-10-07 13:39:40 +00:00

Claude left a comment

One minor point; the 4b4a443 changes are fine.

One minor point; the 4b4a443 changes are fine.

src/register.html Outdated

					
				@ -48,3 +48,3 @@

				          <b>Your email</b>

				          <span><svg class="icon"><use href="#i-mail"/></svg><input type="email" name="email" required placeholder="you@example.com"></span>

				          <small>We'll only use it to tell you how CamperCan is coming along.</small>

				          <small aria-live="polite">We'll only use it to tell you how CamperCan is coming along.</small>