09 — Accessibility Baseline (Shared)
- 1. Standards
- 2. Contrast (light & dark)
- 3. Touch & pointer targets
- 4. Dynamic type / text scaling
- 5. Semantics (TalkBack / VoiceOver)
- 6. Focus (keyboard, desktop, TV)
- 7. Screen reader labels (canonical patterns)
- 8. Motion & vestibular safety
- 9. Color-blind safe
- 10. Forms
- 11. Headings & landmarks
- 12. Testing checklist (per screen)
The mandatory accessibility standard every screen must meet. Module docs reference this; QA verifies per
14_QA_Checklist.mdand this file's tables.
1. Standards
- WCAG 2.1 AA (perceivable, operable, understandable, robust).
- Material 3 accessibility guidance.
- Android TalkBack + iOS VoiceOver certified flows; Windows NVDA (web/desktop).
2. Contrast (light & dark)
| Use | Minimum |
|---|---|
| Body text | 4.5:1 |
| Large text (≥ 18 pt / 14 pt bold) | 3:1 |
| UI components & iconography (required to identify) | 3:1 |
| Disabled content | exempt but ≥ 3:1 vs background |
| Focus indicators | 3:1 vs adjacent |
3. Touch & pointer targets
- ≥ 48 × 48 dp tappable; 44 dp allowed for inline dense controls.
- ≥ 8 dp gap between adjacent targets.
- Desktop hover targets ≥ 32 px.
4. Dynamic type / text scaling
- All layouts must reflow up to 200% text scale without clipping (test at system font scales: default, 1.5×, 2×).
maxLines/ellipsis only for labels, never for actionable content.- No fixed-height containers for body text.
5. Semantics (TalkBack / VoiceOver)
- Every interactive element: label, role, state (checked/toggled/expanded), hint when needed.
- Decorative icons:
excludeFromSemantics; icon-with-text buttons: single combined label. - Screen readers announce: validation errors on focus, loading states, list position ("item 3 of 12"), empty-state messages.
- Live regions for: search results count, snackbar actions (UNDO), realtime updates (notification count), infinite-scroll load.
- Order: follows visual reading order (focus traversal verified per screen).
6. Focus (keyboard, desktop, TV)
- Visible focus ring (
primary, 2 dp, offset 2) on all interactive elements. - Logical
FocusTraversalGroupper screen; modal dialogs trap focus. - ESC exits modals; focus returns to trigger.
7. Screen reader labels (canonical patterns)
| Element | Label pattern |
|---|---|
| NavigationBar destination | Label + "selected/unselected" |
| FAB | Verb + noun: "Add student" |
| Chart | "Attendance trend, October: 92% present" (summary text) |
| Table | Column headers announced; row summary |
| Avatar | Person's name; "photo" if image |
| Badge | "3 unread notifications" |
| Progress | "Loading fees" or percent |
| Error banner | "Error: could not load fees. Retry" |
| Offline banner | "You are offline. Showing saved data" |
8. Motion & vestibular safety
- Reduced motion respected everywhere (see 08_Interaction_&_Motion.md §4).
- No flashing content > 3 flashes/sec.
- Autoplay only with user intent; no parallax.
9. Color-blind safe
- Never color-only status (attendance present/absent, fee paid/overdue): pair with icon
- label (✓ present, ⚠ overdue).
- Approved combos:
primary/onPrimary,error/onError,success/onSuccesswith icons.
10. Forms
- Labels visible (not placeholder-only), associated with inputs.
- Errors: text + icon, announced, focus moved to first invalid field on submit.
- Autocomplete/autofill hints on auth, profile, address fields.
11. Headings & landmarks
- One
headlineMediumper screen; logical h-hierarchy; sections useSemantics(headers:); desktop landmark navigation (skip links on web).
12. Testing checklist (per screen)
- TalkBack walkthrough: full flow without sight
- VoiceOver walkthrough: full flow without sight
- Keyboard-only desktop flow
- Text scale 2×: no clipping/overlap
- Contrast audit (light + dark)
- Focus order + visible focus ring
- Live regions announce async updates
- No color-only statuses