| title | Governance: Accessibility |
|---|---|
| description | Accessibility is a constraint on variables, not an afterthought. Variables should make accessible defaults easier to ship, not easier to bypass. |
Accessibility is a constraint on variables, not an afterthought. Variables should make accessible defaults easier to ship, not easier to bypass.
- Color and contrast: Semantic color variables should be chosen so common UI combinations can meet contrast requirements.
- Focus visibility: Variables for focus rings (color, width, offset) should exist and be used across all interactive states.
- Motion: Duration and easing variables should support reduced motion modes.
- Typography: Font sizes and line heights should avoid unreadable defaults.
When a variable changes:
- Identify impacted UI states (default, hover, active, disabled, focus).
- Verify contrast for intended pairings (text on surface, icon on surface, borders).
- Confirm focus variables remain visible across themes/modes.
- If the change affects motion variables, confirm reduced motion behavior.
- Contrast pairs meet the intended target
- Focus rings remain visible across modes
- Motion variables support reduced motion
- Typography variables avoid unreadable defaults
- Design Engineer: owns accessibility rules for variables
- Frontend Engineer: validates UI consumption