accessibility

Audit against the four POUR principles: perceivable, operable, understandable, and robust. Fix critical issues first such as missing form labels, missing alt text, insufficient contrast, keyboard traps, and invisible focus indicators, then verify with automated and manual testing.

Run Lighthouse with the accessibility category or use the axe-core CLI against your pages. Automated tools catch roughly a third of issues, so follow up with manual keyboard navigation, screen reader testing, and 200 percent zoom checks.

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

WCAG 2.2 removed criterion 4.1.1 Parsing and added nine new criteria including focus not obscured, dragging movements, 24x24 pixel minimum target size, consistent help, redundant entry, and accessible authentication at AA and AAA levels.

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

Focus trapping requires intercepting Tab and Shift+Tab to cycle through the modal's focusable elements and closing on Escape. The native dialog element handles this automatically, so prefer it over manual JavaScript implementations when browser support allows.