Accessibility Deep Dive
ARIA Patterns
| Component | Key ARIA |
|---|---|
| Modal | role=dialog, aria-modal=true, aria-labelledby |
| Tab panel | role=tablist, role=tab, role=tabpanel, aria-selected |
| Accordion | aria-expanded, aria-controls |
| Menu | role=menu, role=menuitem, aria-haspopup |
| Combobox | role=combobox, aria-expanded, aria-activedescendant |
| Alert | role=alert, aria-live=assertive |
| Status | role=status, aria-live=polite |
| Progress | role=progressbar, aria-valuenow, aria-valuemin, aria-valuemax |
Focus Management
- Focus order follows visual order (or logical reading order)
- Focus trap inside modals and dialogs
- Return focus to trigger when modal closes
- Skip links for repetitive navigation
- Focus visible: always show, never remove
:focus-visible
Screen Reader Testing
- Test with VoiceOver (Mac), NVDA (Windows), TalkBack (Android)
- Every interactive element has an accessible name
- Dynamic content changes are announced (aria-live)
- Images have meaningful alt text (or alt="" if decorative)
- Form errors are announced when they appear
Cognitive Accessibility
- Plain language (no jargon without explanation)
- Consistent navigation and layout across pages
- Clear error messages with recovery instructions
- Avoid timeouts (or provide extension option)
- Don't rely on memory (show information in context)