Manual testing is not difficult or time consuming once a team understands keyboard interactions.
1. Test with the keyboard only
It is crucial to test with the keyboard first, without the screenreader activated.
Why keyboard is so important
- Keyboard accessibility is prerequisite to screen reader accessibility.
- Screenreader applications will sometimes cover missing functionality that the sighted keyboard user won’t be able to use.
Devices
- Test with a mobile device and a bluetooth keyboard
- Test with a desktop device and a keyboard
Browsers
- Any major browser (Chrome, Safari, Firefox) is acceptable for keyboard testing.
- Note: In Safari, you’ll have to activate tab in Preferences » Advanced » Press Tab
2. Test with the mobile screenreader
Many websites have crossed the threshold to a majority of visits being from mobile devices.
3. Test with the desktop screenreader
About the tab key
The tab key is not the only key the screenreaders use to browse content. Before you test, learn the difference between interactive elements that should receive focus with the tab key and content that should not.
- Arrow keys browse content for reading
- The tab key focuses interactive controls
Screenreaders can also consume content automatically, starting reading at the top with no keyboard interaction
Screenreaders are all slightly different
- Not having all three screen readers available doesn’t mean you can’t test for accessibility.
- Most of the major accessibility defects you’re likely to encounter will show up in any screen reader.
| Platform | Screenreader | Browser |
|---|---|---|
iOS
|
VoiceOver
|
Safari
|
Android
|
Talkback
|
Chrome
|
Windows
|
JAWS
|
Chrome
|
|
Windows
|
NVDA
|
Chrome
|
|
MacOS
|
VoiceOver
|
Safari
|
Functional differences
Screen readers all offer a slightly different experience.
NVDA
NVDA screenreader shortcuts
| Shortcut | Action |
|---|---|
| Insert + down arrow | Start reading continuously from this point |
| Down arrow | Browse to the next element |
| Up arrow | Browse to the previous element |
| Tab | Focus the next interative control |
| Shift + tab | Focus the previous interative control |
| Enter | Activate a link |
| Enter or spacebar | Activate a button |
| Cntrl | Stop reading |
| Insert + spacebar | Toggle between browse and focus mode |
Use the screenreader to list useful elements: headings, links and landmarks.
| Shortcut | Action |
|---|---|
| Insert + F7 | List of all headings - Shows rotor: Select with L/R arrow keys |
| Insert + F7 | List of all links - Shows rotor: Select with L/R arrow keys |
| Insert + F7 | List of all landmarks - Shows rotor: Select with L/R arrow keys |
- Disable “Automatic Say All on page load” in NVDA Settings: Browse Mode
- This will increase the conformance of NVDA
- NVDA has 2 modes with different keyboard shortcuts.
- Browse (Red focus indicator)
- Arrow keys will browse from element to element
- Focus (Blue focus indicator)
- Arrow keys will only interact with the interactive element in focus
- Browse (Red focus indicator)
NVDA differences
- Only reads ~120 characters at at time
- Reads “clickable” when it detects a click event listener on an element, even when it’s not clickable
- Will read a button with
aria-haspopup="true"as “menu submenu” - Any element in focus like a dialog or section will be read in its entirety
VoiceOver
VoiceOver screenreader shortcuts
| Shortcut | Action |
|---|---|
| Cntrl + alt + A | Start reading continuously from this point |
| Down arrow | Browse to the next element |
| Up arrow | Browse to the previous element |
| Tab | Focus the next interative control |
| Shift + tab | Focus the previous interative control |
| Enter | Activate a link |
| Enter or spacebar | Activate a button |
| Cntrl | Stop reading |
Use the screenreader to list useful elements: headings, links and landmarks.
| Shortcut | Action |
|---|---|
| Cntrl + option + U | List of all headings - Shows rotor: Select with L/R arrow keys |
| Cntrl + option + U | List of all links - Shows rotor: Select with L/R arrow keys |
| Cntrl + option + U | List of all landmarks - Shows rotor: Select with L/R arrow keys |
- Pairs with Safari
- Does not have multiple modes like NVDA or JAWS
VoiceOver quirks
- Voiceover will say “dimmed” instead of “disabled”
JAWS
JAWS screenreader shortcuts
| Shortcut | Action |
|---|---|
| Insert + Down Arrow | Start reading continuously from this point |
| Down arrow | Browse to the next element |
| Up arrow | Browse to the previous element |
| Tab | Focus the next interative control |
| Shift + tab | Focus the previous interative control |
| Enter | Activate a link |
| Enter or spacebar | Activate a button |
| Cntrl | Stop reading |
| Enter | Activate forms mode |
| Numpad plus (+) | Deactivate forms mode |
Use the screenreader to list useful elements: headings, links and landmarks.
| Shortcut | Action |
|---|---|
| Insert + F6 | List of all headings - Shows rotor: Select with L/R arrow keys |
| Insert + F7 | List of all links - Shows rotor: Select with L/R arrow keys |
| Insert + F3 | List of all landmarks - Shows rotor: Select with L/R arrow keys |
- JAWS has 2 modes with different keyboard shortcuts
- Browse
- Arrow keys will browse from element to element
- Forms
- Arrow keys will only interact with the interactive element in focus
- Browse
- Can fake click events on elements, meaning it may work with the screen reader but not just the keyboard