accessibility
Use when implementing WCAG-compliant interfaces, ARIA patterns, keyboard navigation, focus management, or screen reader support. Also use when auditing component accessibility, fixing contrast issues, or building accessible forms, modals, and navigation.
| Model | Source |
|---|---|
| sonnet | pack: frontend |
Full Reference
┏━ 🔧 accessibility ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when implementing WCAG-compliant interface… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
Accessibility (WCAG 2.2)
Section titled “Accessibility (WCAG 2.2)”WCAG 2.2 is the current standard (ISO/IEC 40500:2025). Three levels: A (minimum), AA (legal standard — target this), AAA (enhanced).
Quick Reference
Section titled “Quick Reference”| Rule | Requirement |
|---|---|
| Text contrast (normal) | 4.5:1 AA · 7:1 AAA |
| Text contrast (large: 18pt / 14pt bold) | 3:1 AA · 4.5:1 AAA |
| Non-text contrast (borders, icons) | 3:1 AA |
| Focus — not fully obscured | 2.4.11 AA (new in 2.2) |
| Focus indicator size + contrast | 2px perimeter + 3:1 (2.4.13 AAA) |
| Touch targets | 24×24 CSS px minimum (2.5.8 AA, new in 2.2) |
| ARIA first rule | Native HTML before ARIA |
| Live region timing | Container must be in DOM before content injected |
| Test environment | Use jsdom — axe-core incompatible with happy-dom |
Reference Index
Section titled “Reference Index”| File | When to read |
|---|---|
reference/wcag-overview.md | POUR principles, conformance levels, all 9 new WCAG 2.2 criteria |
reference/semantic-html.md | Native element vs ARIA equivalents, landmark regions, heading hierarchy |
reference/aria.md | Five rules of ARIA, accessible names, states, roles catalog, when NOT to use ARIA |
reference/keyboard-nav.md | Focus order, skip links, roving tabindex, standard keyboard patterns per widget |
reference/focus-management.md | Focus visibility CSS, useFocusTrap implementation, focus restoration, sticky header fix |
reference/color-contrast.md | Contrast ratio tables, non-text contrast, testing tools, color-only information |
reference/component-patterns.md | Modal dialog, tabs, accordion, toast/notification, combobox — full implementations |
reference/forms.md | Labels, required fields, error messaging, live validation timing, grouping, autocomplete |
reference/images-media.md | Alt text decision tree, video/audio requirements, media caption matrix |
reference/testing.md | axe-core with Vitest/Jest/Playwright, manual checklist, screen reader matrix |
Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.