WCAG 2.2 Accessibility Compliance Guide
Practical checklist for contrast, focus states, target sizes, and keyboard flows that satisfy auditors and users.
Nestlancer Editorial
WCAG 2.2 adds criteria like focus not obscured and target size—auditors now check them, and users with motor impairments feel the difference immediately.
Priority checkpoints
| Criterion | Practical test |
|---|---|
| 1.4.3 Contrast | 4.5:1 body text with automated scanner + manual hero images |
| 2.4.11 Focus not obscured | Tab through modals/sticky headers—focus never hidden |
| 2.5.8 Target size | 24×24 CSS px minimum for controls (44×44 touch ideal) |
| 2.4.7 Focus visible | Distinct ring, not outline: none without replacement |
Keyboard flows
- Every interactive element reachable and operable via keyboard
- Skip link to main content on first Tab
- Escape closes dialogs and returns focus to trigger
Testing workflow
- Automated: axe, Lighthouse on CI for regressions
- Manual: keyboard-only pass on checkout and settings
- Screen reader spot check: VoiceOver + NVDA on critical paths
Design system integration
Document accessible component variants in Storybook with a11y addon. Designers pick approved patterns—not one-off colors per page.
Accessibility is continuous QA—not a pre-launch checkbox buried in legal.
Comments
Loading comments…
Related posts
Design
Brand Identity for Digital-First Products
Logo systems, voice, and visual language that survive app icons and social crops.
Design
Design Ops for Growing Product Teams
Rituals, tooling, and intake processes that keep design shipping with engineering.
Design
Inclusive Design Beyond Compliance Checklists
Cognitive accessibility, plain language, and trauma-informed patterns.
Design
Data Visualization UX for Dashboards
Chart selection, color semantics, and drill-down patterns for decision makers.