accessibility

WCAG 2.2 compliance requires addressing the four POUR principles: perceivable, operable, understandable, and robust content. Key steps include adding alt text to images, ensuring 4.5:1 color contrast, making all functionality keyboard accessible, and labeling form inputs programmatically.

Run npx lighthouse with the --only-categories=accessibility flag for an automated audit, or use the axe-core CLI against a URL. Automated tools catch common violations, but manual testing with keyboards and screen readers like VoiceOver or NVDA is still required.

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, and AAA raises normal text to 7:1.

Native HTML elements like button, a href, and input are preferred because they provide keyboard activation, focus, and semantics automatically. Only add ARIA roles and manual keyboard handlers when a native element cannot be used, to avoid double-triggering and broken behavior.

WCAG 2.2 adds criteria including focus not obscured (2.4.11), minimum target size of 24x24 CSS pixels (2.5.8), dragging movement alternatives (2.5.7), consistent help (3.2.6), redundant entry (3.3.7), and accessible authentication without cognitive tests (3.3.8).