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 Lighthouse or axe-core.

WCAG AA requires 4.5:1 contrast 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. Level AAA raises normal text to 7:1.

Cycle Tab and Shift+Tab between the first and last focusable elements inside the modal and close on Escape. The native HTML dialog element handles focus trapping automatically, so prefer it when browser support allows.

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

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.

Test with VoiceOver on Mac (Command+F5 to start) or NVDA on Windows (Ctrl+Alt+N). Navigate by headings, links, and landmarks, verify focus order matches visual order, and confirm dynamic updates are announced via aria-live regions.