Accessibility used to be "nice to have" for many teams. With the European Accessibility Act now in force and procurement requirements tightening, it's part of the job. WCAG 2.2 (published October 2023) is the current target.
What's new in 2.2 (the ones that affect React devs most)
| Criterion | Level | What it means in practice |
|---|---|---|
| 2.4.11 Focus Not Obscured (Minimum) | AA | Sticky headers or cookie banners must not hide the focused element |
| 2.5.7 Dragging Movements | AA | Drag-and-drop needs a non-drag alternative (buttons) |
| 2.5.8 Target Size (Minimum) | AA | Click/tap targets at least 24×24 CSS px (or enough spacing) |
| 3.2.6 Consistent Help | A | Help links in the same place across pages |
| 3.3.7 Redundant Entry | A | Don't make users re-type information they already gave |
| 3.3.8 Accessible Authentication (Minimum) | AA | No cognitive tests to log in. Allow paste and password managers |
4.1.1 Parsing was removed.
The classic failures I still see
- Clickable divs: use
<button>and<a>. - Inputs without labels: placeholder isn't a label.
- Modals that don't trap and restore focus.
- Icon buttons with no accessible name: add
aria-label. - Colour-only status (red/green) with no text or icon.
- Disabled paste on password or code fields, which fails 3.3.8.
A React checklist
- Semantic elements first, ARIA only when needed
- Every form control has a
<label>oraria-labelledby - Errors are announced (
aria-live) and linked (aria-describedby) - Focus moves sensibly on route changes and modal open/close
- Visible focus styles that aren't hidden by sticky elements
- Targets ≥ 24×24 px
- Drag interactions have button alternatives
- Colour contrast meets AA
- Maps and charts have text or table alternatives (dashboards)
Testing
- Automated: axe (browser extension or
@axe-core/playwrightin E2E tests), eslint-plugin-jsx-a11y. - Keyboard: unplug the mouse. Can you do everything?
- Screen reader: VoiceOver (macOS/iOS) or NVDA (Windows) on key flows.
- Zoom: 200% and 400% reflow.
Using an accessible primitive library (e.g. Radix, which shadcn/ui builds on) solves a lot of focus and keyboard behaviour for you.