accessibility

WCAG 2.2 compliance requires meeting success criteria across four principles: Perceivable, Operable, Understandable, and Robust. Start with Level A criteria like alt text and keyboard access, then address AA requirements such as 4.5:1 contrast ratios and 24x24 pixel target sizes.

Run Lighthouse with the accessibility category using npx lighthouse, or use the axe-core CLI to scan pages for violations. Automated tools catch roughly a third of issues, so combine them with manual keyboard navigation and screen reader testing.

WCAG AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18px or 14px bold and above). UI components and graphical objects need at least 3:1 against adjacent colors.

Native HTML elements like button, input, and dialog are preferred because they include built-in keyboard support and semantics. Use ARIA roles only when no native element exists, and always pair them with correct states and keyboard handlers.

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

Focus traps occur when Tab and Shift+Tab are not cycled through the modal's focusable elements. Implement a focus trap handler that wraps focus between the first and last elements and closes on Escape, or use the native dialog element which handles this automatically.