accessibility-checklisted

# Accessibility Check Audit: **$ARGUMENTS** — mode defaults to `code` (WCAG compliance on files); use `experience` for a UX-focused pass on a flow, `full` for both. ## Code Mode (WCAG compliance) 1. **Semantic HTML**: `div` soup → `nav`/`main`/`section`/etc.; `div` with click handler → `button`/`a`; heading hierarchy; `ul`/`ol` for lists; `table` with `th`/`scope`/`caption` for data. 2. **ARIA**: unlabeled interactive elements → `aria-label`; dynamic updates → `aria-live`; expandables → `aria-expanded`; modals → `role="dialog"` + `aria-modal` + focus trap; flag redundant ARIA (`role="button"` on `<button>`). 3. **Keyboard**: everything Tab-reachable, logical order (no positive `tabIndex`), Escape closes overlays, arrow keys in composite widgets, visible focus indicators (no bare `outline-none`), skip link. 4. **Color/contrast**: text ≥ 4.5:1 (AA) / 7:1 (AAA), large text ≥ 3:1; information never by color alone; focus indicators contrast. 5. **Media**: `alt` on all images (`alt=""` decorative), captions/transcripts. 6. **Forms**: visible `label` per input (not placeholder-only), errors via `aria-describedby` and announced, required ≠ color-only. ## Experience Mode (real-world usability, beyond compliance) Walk the flow as five users and score each 1–5 with critical blockers: - **Screen reader**: logical content order without visuals; decorative elements hidden; dynamic updates announced; forms navigable blind. - **Keyboard-only**: every action completable; no traps (modals