accessibility

WCAG 2.2 compliance requires meeting success criteria across four principles: Perceivable, Operable, Understandable, and Robust. Key steps include adding alt text to images, ensuring 4.5:1 color contrast, making all functionality keyboard accessible, labeling form inputs, and testing with screen readers.

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

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 3:1 against adjacent colors. Level AAA raises text requirements to 7:1 and 4.5:1 respectively.

Prefer native HTML elements like button, input, and dialog because they provide keyboard handling, focus, and semantics for free. Only add ARIA roles and states when no native element exists, since incorrect ARIA creates more accessibility problems than it solves.

WCAG 2.2 adds nine criteria including Focus Not Obscured, Dragging Movements, Target Size minimum of 24 by 24 CSS pixels, Consistent Help, Redundant Entry, and Accessible Authentication. It also removes criterion 4.1.1 Parsing as obsolete.

Focus indicators fail when outlines are removed with outline:none without a replacement, or when the indicator lacks 3:1 contrast against the background. Use :focus-visible with a visible outline or box-shadow, and ensure sticky headers do not obscure focused elements.