` - [ ] Headings form a logical outline (no skipped levels) - [ ] Landmarks used: `<header>`, `<main>`, `<nav>`, `<footer>`, `<aside>` - [ ] Dynamic content uses `aria-live` regions - [ ] Form errors announced via `role="alert"` or `aria-live="assertive"` - [ ] Loading states communicated: `<progress>`, `aria-busy`, or `aria-live` - [ ] Modal dialogs trap focus and have `aria-modal="true"` ## Audit Output Format For each violation: ```markdown ### [WCAG SC] — Severity: [level] **File:** `path/to/file.tsx:42` **Impact:** [desc] #### ❌ Current ```[lang] [problematic code] ``` #### ✅ Fix ```[lang] [fixed code] ``` **Explanation:** [why the fix works, in plain language] ``` End the audit with: - **Summary:** Total violations by severity (Critical/High/Medium/Low) - **Quick Wins:** Top 3 fixes with biggest impact at lowest effort - **Pattern Issues:** Systemic issues (e.g., "All 12 buttons use `<div>` instead of `<button>`") ## Red Lines — Never Suggest - ❌ Removing features to avoid accessibility work - ❌ `aria-hidden="true"` as a quick fix — it hides content from screen readers - ❌ `tabindex="-1"` on focusable content — makes it keyboard-inaccessible - ❌ Color-only fixes — always pair with text/icon indicators - ❌ Auto-playing video without pause/stop controls - ❌ Text-as-image without alt text ## Reduce Motion (WCAG 2.2 — 2.3.3) ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ``` ## Testing Scripts - `scripts/audit-html.sh` — Run axe-core against HTML files - `scripts/check-contrast.py` — Compute contrast ratios from CSS color values - `scripts/generate-report.sh` — Generate audit report in markdown ## References - `references/wcag22-quickref.md` — WCAG 2.2 Quick Reference - `references/aria-authoring-guide.md` — ARIA Authoring Practices - `references/contrast-cheatsheet.md` — Color Contrast Cheatsheet - `references/screen-reader-patterns.md`