Design and accessibility
WCAG 2.2 inside the design system
Turn focus, target size and accessible authentication into reusable product rules.
WCAG 2.2 adds criteria for focus, target size, dragging, redundant entry and accessible authentication. Solving them page by page creates inconsistent results.
A design system can encode minimum targets, larger touch areas, visible focus, sticky headers that do not obscure focus and alternatives to complex gestures.
Editorial visual
Accessible coverage by layer
Components need complete states: labels, help, associated errors, contrast, keyboard order and behavior under zoom belong in both implementation and documentation.
Automation catches attributes and contrast, while keyboard, screen-reader, zoom and comprehension testing still require human review.
Turn criteria into contracts
A button defines size, contrast, focus, disabled state and accessible name. A modal defines initial focus, trapping, closing and focus return. Expressing these behaviors as contracts gives every product a consistent base and makes exceptions visible in code review and documentation.
Design focus and targets in the component
The indicator must retain contrast and remain visible below sticky headers. Icon buttons need a sufficient touch surface even when the icon is small. Dense groups may satisfy the criterion through spacing, while mobile usually benefits from 44 pixels as a practical target.
Forms and authentication without cognitive friction
Persistent labels, associated help, actionable errors and correct autocomplete reduce work for everyone. Authentication should support password managers, paste and alternatives to cognitive puzzles. A screen-reader announcement needs to explain what failed and how to continue.
Govern through layered testing
Lint, unit tests and axe cover part of the semantics. Manual review adds keyboard, zoom, reflow, screen readers and content comprehension. The design system should publish examples and acceptance criteria so accessibility does not depend on one person remembering every rule.
The system removes repetition
WCAG 2.2 becomes manageable when requirements live in reusable decisions. A system cannot guarantee an accessible product by itself, but it prevents every team from repeating the same foundational mistakes.