How to test
Screen readers

1 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.

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

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

NVDA + Windows

NVDA screen reader 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 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.

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

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
  • 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
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 screen reader 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

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