How to test

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.
Screen reader and browser pairings
Platform Screenreader Browser
Apple iOS Apple VoiceOver Apple Safari
Android Talkback Chrome
Windows JAWS Chrome
Windows NVDA Chrome
Apple MacOS Apple VoiceOver Apple Safari

Functional differences

Screen readers all offer a slightly different experience.

NVDA

NVDA screenreader shortcuts
NVDA basics
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.

NVDA summary list
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
  • 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

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
VoiceOver basics
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.

VoiceOver rotor summary
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
JAWS basics
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.

JAWS summary list
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
  • Can fake click events on elements, meaning it may work with the screen reader but not just the keyboard