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 only the keyboard first, without the screen reader activated.
Why keyboard testing is so important
- Keyboard accessibility is prerequisite to screen reader accessibility.
- If it doesn’t work with only the keyboard, it won’t work with a screen reader.
- screen reader 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 mobile screen readers
Because many websites have crossed the threshold to a majority of visits being from mobile devices this may be higher priority than desktop testing.
- Follow the mobile gesture test instructions (swipe, tap, doubletap, etc.)
- Do not tap on elements to navigate, you must swipe to browse the content in a linear pattern
Devices
- Test in both Android and iOS devices
- After testing using mobile gestures, test with a mobile device and a bluetooth keyboard
Browsers
Follow the screen reader browser pairings table
3 Test with desktop screen readers
About the tab key
The tab key is not the only key the screen readers 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
- screen readers can also consume content automatically, starting reading at the top with no keyboard interaction
Do not use a mouse
- Do not use the mouse for screen reader testing.
About screen readers
Screen readers are all slightly different
- Screen readers all offer a slightly different experience.
- Not having all 5 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
|
NVDA + Windows
NVDA screen reader 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 interactive control |
| Shift + tab | Focus the previous interactive control |
| Enter | Activate a link |
| Enter or spacebar | Activate a button |
| Cntrl | Stop reading |
| Insert + spacebar | Toggle between browse and focus mode |
Use the screen reader 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 |
Getting started
- Disable “Automatic Say All on page load” in NVDA Settings: Browse Mode
- This will increase the conformance of NVDA
NVDA differences
- 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)
- 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
- (Note: If the element is not intended to be clickable, this is a defect to be remediated)
- 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 + MacOS
VoiceOver screen reader 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 screen reader 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 |
VoiceOver differences
- Pairs with Safari
- Does not have multiple modes like NVDA or JAWS
- Voiceover will say “dimmed” instead of “disabled”
- It may say things in a different order than NVDA or JAWS but the core acceptance criteria are the same.
JAWS + Windows
JAWS screen reader 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 screen reader 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 differences
- 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