astro-website/openspec/changes/archive/2026-02-10-wcag-responsive/tasks.md

1. Navigation + Responsive Shell

• 1.1 Identify the current header/nav implementation and decide the mobile breakpoint for collapsing navigation
• 1.2 Implement hamburger toggle UI (button + icon) with correct ARIA (aria-controls, aria-expanded, accessible label)
• 1.3 Implement the mobile menu panel styles + mild open/close animation (and close-on-route navigation)
• 1.4 Add keyboard behavior: Escape closes menu and focus returns to toggle; ensure tab order remains sane
• 1.5 Add reduced-motion fallback: disable/reduce menu animations when prefers-reduced-motion: reduce
• 1.6 Ensure desktop navigation links remain clickable/accessible (no inert/aria-hidden desktop regression)

2. WCAG 2.2 AA Baseline

• 2.1 Add/standardize global :focus-visible styles for links/buttons (high-contrast, consistent, not clipped)
• 2.2 Ensure interactive elements meet minimum hit target expectations where feasible (spacing/padding for nav + key buttons)
• 2.3 Add skip-to-content link and verify it is visible on focus and works across pages/layouts
• 2.4 Audit and fix obvious contrast issues for primary text and focus outlines against the background

3. Background + Typography Polish

• 3.1 Fix large-resolution background gradient cutoffs (move to a scaled, oversized background layer/pseudo-element)
• 3.2 Introduce a display-friendly font (webfont) and apply consistently across the site; ensure sensible type scale/line-height
• 3.3 Verify responsive behavior on key pages (/, /videos, /podcast, /blog, /about) at common breakpoints

4. Verification

• 4.1 Add/update tests to ensure hamburger toggle ARIA attributes exist and update correctly
• 4.2 Add/update tests or checks for focus-visible styling presence and reduced-motion rules
• 4.3 Build the site and perform a keyboard-only smoke test (nav, cards, blog category nav, menu open/close)