accessibility-wcaglisted

# Accessibility — WCAG 2.2 AA Accessibility is part of "done" for UI (principle #8), not a later pass. Apply this while building and verify it at QA. Test for real: keyboard-only, a screen reader, and an automated checker (axe). Don't claim "accessible" without having actually checked. ## Fits in the pipeline - **Stage 6** (`/build`) — applied while the frontend is built (pairs with `frontend-craft`). - **Stage 7** (`/feature-check`) — `qa-engineer` verifies a11y before a feature closes. - **Stage 8** (`/ship-check`) — final accessibility + cross-browser pass before ship. ## The checklist (organized by POUR) ### Perceivable - **Contrast:** text ≥ 4.5:1 (large text ≥ 3:1); UI components & graphical objects ≥ 3:1. Measure against the real rendered background, including layered/atmospheric ones. - **Text alternatives:** meaningful `alt` on informative images; `alt=""` on decorative ones; icons that convey meaning have accessible names. No information conveyed by color alone. - **Structure:** semantic HTML (`<button>`, `<nav>`, `<main>`, `<h1..h6>` in order, lists, `<table>` with headers). Landmarks present. Don't fake controls with `<div onClick>`. - **Resize/reflow:** usable at 200% zoom and 320px width without loss of content or function. ### Operable - **Keyboard:** every interactive element reachable and operable by keyboard; logical tab order; no keyboard traps. Custom widgets implement expected key patterns (Esc closes, arrows in menus). - **Focus visible (2.4