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

Run npx lighthouse with the accessibility category or use the axe-core CLI against a URL to detect violations automatically. Automated tools catch roughly a third of issues, so supplement with manual keyboard navigation and screen reader testing using VoiceOver or NVDA.

WCAG Level 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.

Yes, the native HTML dialog element manages focus trapping automatically when opened as a modal, so manual Tab and Shift+Tab cycle logic is unnecessary. Use a custom focus trap pattern only when browser support requires a non-native implementation.

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 levels A through AAA.

Icon-only buttons fail audits because they lack an accessible name for screen readers. Add an aria-label attribute or visually hidden text inside the button, and mark the icon SVG with aria-hidden="true" to resolve the violation.