Accessibility & WCAG Compliance

Legal Landscape

Accessibility lawsuits in the US have grown steadily. Over 4,000 ADA-related digital accessibility lawsuits were filed in 2023 alone. The DOJ has clarified multiple times that the ADA applies to websites and mobile apps of public accommodations. In Europe, the European Accessibility Act requires products and services sold in the EU to meet accessibility standards starting June 2025. This is not optional guidance. It is law with enforcement mechanisms and fines.

WCAG 2.2, published in October 2023, is the current standard. It builds on 2.1 with new success criteria focused on authentication, dragging movements, and target size. Level A is the floor. Level AA is the practical standard that laws and regulations reference. Level AAA is aspirational for most products.

The POUR Principles in Practice

Perceivable means all content is available to all senses. Images need alt text. Videos need captions and audio descriptions. Color contrast ratios must meet 4.5:1 for normal text and 3:1 for large text. Form fields need visible labels, not just placeholder text that disappears on focus.

Operable means every interaction works without a mouse. Full keyboard navigation with visible focus indicators. No keyboard traps. Time limits must be adjustable or removable. Skip navigation links let users bypass repeated content.

Understandable means the interface behaves predictably. Form validation errors are specific and linked to the field. Language is declared in HTML. Navigation is consistent across pages.

Robust means the content works across assistive technologies. Valid HTML, proper ARIA usage, and testing with actual screen readers (NVDA, VoiceOver, JAWS) rather than just automated tools.

Engineering Implementation

Bake accessibility into your component library. Every shared component should handle keyboard events, manage focus, expose ARIA attributes, and meet contrast requirements before it ships. This prevents accessibility debt from accumulating.

In your CI/CD pipeline, add automated checks as a gate. axe-core integrates with Cypress, Playwright, and Jest. Lighthouse CI can enforce accessibility scores. These catch missing alt text, broken label associations, and contrast failures automatically. But remember: they only catch a fraction of real issues.

Establish a manual testing cadence. At minimum, test every major user flow with keyboard-only navigation and one screen reader (VoiceOver on Mac, NVDA on Windows). Include users with disabilities in usability testing when possible.

Component Patterns That Matter

Custom components are where accessibility breaks. Modals need focus trapping and return focus on close. Dropdown menus need arrow key navigation. Tabs need proper tablist, tab, and tabpanel roles. Toast notifications need aria-live regions. Reach for battle-tested component libraries like Radix UI or Headless UI that handle these patterns correctly, rather than building them from scratch.