Why
- native input events
Common issues
- Unable to read
- Incorrect screen reader (VoiceOver) behavior
- Focus landing on wrong element
- Focus order is incorrect
- Missing alt-text (static violations)
- Incorrect screen reader (VoiceOver) behavior
- Unable to interact
- Enter to click a link
- Left/right to select options
- Form interactions: checkbox space
- Special elements
- Auto completion
- Date picker
Recommended patterns
- Autofocus or not
- Google has auto-focus
- most blind users always intuitively press Ctrl + Home first ("Auto focus workaround")
Techniques to solving
- Static violations detection with Axe (check for semantics?)
- Alt-text
- Contrast
- Full list: https://dequeuniversity.com/rules/axe/3.5
- Full website violations (https://github.com/JakePartusch/lumberjack)
- Tab stops
- After page load
- Tab after a specific active element
- Accessibility tree
- Shadow DOM testing
- Aria live regions
- Can I test assertive / polite announcement?
Other approaches
- Press tab to check all interactive elements are covered
- Including "fake buttons (div)"
- Roving tabindex for custom components
Limitations
- Regressions – and not exploratory
- How to avoid? Always define behavior if current element is in focus?
Notes
-
What does "swipe left" do in VO?
-
Aria role=application