From 3f8004da480bcc29aed2b34b808854202bcfb0d5 Mon Sep 17 00:00:00 2001 From: Mischa Date: Sat, 20 Jun 2026 19:57:06 +0200 Subject: [PATCH] docs: add WCAG 2.1 AA accessibility audit design spec Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_01WPJztrVGbwic2xTG7G9fjM --- .../2026-06-20-accessibility-audit-design.md | 170 ++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 docs/superpowers/specs/2026-06-20-accessibility-audit-design.md diff --git a/docs/superpowers/specs/2026-06-20-accessibility-audit-design.md b/docs/superpowers/specs/2026-06-20-accessibility-audit-design.md new file mode 100644 index 0000000..58eeaf6 --- /dev/null +++ b/docs/superpowers/specs/2026-06-20-accessibility-audit-design.md @@ -0,0 +1,170 @@ +# Accessibility Audit Design — intotheeast + +**Date:** 2026-06-20 +**Standard:** WCAG 2.1 Level AA +**Scope:** All Twig templates in `user/themes/intotheeast/templates/`, CSS tokens, and inline JS + +--- + +## 1. Audit Results + +### Failures (must fix) + +| ID | Criterion | Severity | Where | Issue | +|----|-----------|----------|-------|-------| +| F1 | 2.4.1 Bypass Blocks | High | Every page | No skip-to-main link — keyboard users must tab through site header on every page load | +| F2 | 1.4.3 Contrast Minimum | High | `tokens.css` | `--color-ink-muted` (#7A7268) is 3.74:1 on `--color-paper` and 3.44:1 on `--color-canvas` — fails 4.5:1 AA for small text. Used for timestamps, location labels, weather spans, and stat labels | +| F3 | 1.4.3 Contrast Minimum | High | `tokens.css` | `--color-accent` (#2A8C73) is 4.30:1 on paper and 3.95:1 on canvas — fails 4.5:1 AA. Used as link text color on journal permalinks, back-pill anchors, and feed-map link | +| F4 | 4.1.2 Name/Role/Value | High | `trip.html.twig` | Filter buttons (`All content` / `Journal` / `Stories`) have no `aria-pressed` — the active filter is communicated only via CSS class, invisible to screen readers | +| F5 | 4.1.2 Name/Role/Value | High | `trip.html.twig` | Stats and Cycling toggle buttons have no `aria-expanded` or `aria-controls` — collapsed/expanded state is invisible to screen readers | +| F6 | 2.1.1 Keyboard | Medium | All three feed templates | Photo strip is scroll-snap only; no keyboard navigation. Slides cannot be advanced by keyboard users | +| F7 | 4.1.2 Name/Role/Value | Medium | `gpx-manager.html.twig` | Each table row has a bare "Delete" button — a screen reader hears "Delete, Delete, Delete" with no way to distinguish which file is targeted | +| F8 | 1.1.1 Non-text Content | Medium | `entry.html.twig` | When the lightbox is open, the enlarged `` has `alt=""` — the displayed photo has no accessible description | + +### Passes (no changes needed) + +- ``, `
`, `
`, `