accessibility

WCAG 2.2 compliance requires meeting success criteria across four principles: Perceivable, Operable, Understandable, and Robust. Target Level AA, which covers contrast ratios of 4.5:1, keyboard accessibility, visible focus indicators, and form labels, then verify with automated and manual testing.

Run Lighthouse accessibility audits via Chrome DevTools or the CLI, and use axe-core for rule-based violation detection. Automated tools catch roughly a third of issues, so supplement with manual keyboard navigation and screen reader testing using VoiceOver or NVDA.

WCAG 2.2 removed criterion 4.1.1 Parsing and added nine new criteria, including Focus Not Obscured, Dragging Movements, Target Size minimum of 24 by 24 CSS pixels, Consistent Help, Redundant Entry, and Accessible Authentication at AA and AAA levels.

WCAG Level AA requires 4.5:1 contrast for normal text and 3:1 for large text of at least 18 pixels or 14 pixels bold. UI components and graphical objects need 3:1 against adjacent colors, while Level AAA raises normal text to 7:1.

Prefer native HTML elements like button, input, and dialog because they include built-in keyboard support and semantics. Use ARIA roles and states only when no native equivalent exists, such as custom tablists or live region announcements.

A keyboard trap occurs when users cannot Tab away from a component, violating WCAG 2.1.2. Modals should intentionally cycle focus within the dialog while open and close on Escape; the native dialog element handles this focus trapping automatically.