11 / Accessibility
Access is part of the interface
Keyboard, touch, zoom, screen-reader, forced-color and reduced-motion behavior are tested as product states, not release notes.
Automated + manual
Accessibility state lab
Choose a state family and inspect the contract as a product state, not a release-note promise.
Keyboard path
Focus follows reading order, selected state remains visible and Escape returns to the trigger.
Representative state matrix
| State | Test surface | Pass condition |
|---|---|---|
| Keyboard | Tab, Shift+Tab, Enter, Space, arrows, Escape | Visible focus and logical return |
| Touch | 320px, coarse pointer, safe area | 44 × 44px minimum action target |
| Zoom and reflow | 200% browser zoom | One reading column; no two-axis scroll |
| Screen reader | Names, landmarks, state and live regions | Meaning survives without graphics |
| Motion | prefers-reduced-motion | No decorative loop or essential spatial dependency |
| Forced colors | forced-colors: active | Borders, focus and selected state remain visible |
Accessibility verification chain
Automation blocks serious and critical regressions. True-device screen-reader, switch-control and motor-path checks remain explicitly manual.
Semantic owners and 44px geometry
Axe, landmarks, focus and overflow
Light, Dark, reduced motion and forced colors
VoiceOver, TalkBack and switch input
Finding record
| Field | Required value | Example |
|---|---|---|
| Severity | Critical / serious / moderate / minor | Serious |
| Surface | Route + component + state | Visual System / mobile index / open |
| Mode | Theme + viewport + input | Dark · 320px · keyboard |
| Evidence | Reproduction + screenshot or trace | Tab to close key; target is 40px |
| Owner | Source path + follow-up | visual-system.css · PETS issue |