Testing with screen readers

Owned by Liam Tanner
Last updated: Aug 02, 2021Version comment

Testing with a screen reader is an important part of accessibility work. It helps anyone who uses that particular assistive technology (such as blind people and people with other visual disabilities). It also helps us check that our code is robust and semantic.

It can take some time to become familiar with using a screen reader. You can test a page quite effectively with a handful of checks rather than working through the page piece by piece from start to finish.

What to test

Below is an example plan for what to test when checking your work with a screen reader.

  1. Check the structure:
    • Headings: Are they nested correctly?
    • Landmarks: Do they exist and do they have helpful names?
    • Tables: Is there a caption? Are row and column headers correctly scoped?
  2. Check interactions:
    • Links: Does the link text describe the destination?
    • Form controls:
      • Do fields have associated labels?
      • Does button text describe the action?
      • Is help text associated with the control (using aria-describedby)?
      • Do radio and checkboxes have a group name (using fieldset and legend)?
  3. Check alt text of images - does it convey the content and function of the image?
  4. Check form error handling. Note that this can be complex step.
    • Is the error message with the field (added to the label, or in an associated aria-labelledby)?
    • Is the field marked as invalid (with an aria-invalid="true" attribute)?
    • If there’s a list of errors at the top of the page:
      • Are there in-page links down the page to the fields with errors (and is focus set to that field on jump)?
      • Are errors announced? Add aria-live="assertive" so it announces and aria-relevant="additions removals" so it isn’t overly verbose. role="alert" gets aria-atomic="true" by default, so re-reads the whole thing each time.
  5. Does the order of content make sense?

Which OS / browser / screen reader combinations to test

Broadly speaking, the majority of people using screen readers are on Windows (just over 2/3rds). JAWS with Chrome, NVDA with Firefox, and NVDA with Chrome are the most popular combinations, each having around 20% user share. See WebAIM's surveys for more detailed stats, to be used as a guide.

  • First choice is testing with NVDA on Windows, if you can. You can get VMs of Windows for testing at the MS Developer site.
  • Second choice is testing with the screen reader you have on your machine.
  • Third choice is testing with the ARC Toolkit browser extension. It puts elements of the page into groups that let you check structure, interactions, and alt text as described above.

Testing with VoiceOver on MacOS

First-time set up

VoiceOver and Safari work better together than Chrome or Firefox, so use this combination when testing on MacOS.

  1. In System Preferences, navigate to Keyboard item > Shortcuts tab, then tick Use keyboard navigation to move focus between controls.
  2. In Safari Preferences:
    1. Navigate to Advanced tab > Accessibility item and tick Press Tab to highlight each item on a web page.
    2. Navigate to AutoFill tab and untick all options. This can make VoiceOver less noisy on form fields.

Each time set up

Follow these steps each time you're testing with VoiceOver:

  1. Open Safari.
  2. Start VoiceOver (VO) with Cmd + F5.
  3. Lock VO activation keys with Ctrl + Option + ;. This means you can use the activation keys without having to hold Ctrl + Option each time.
  4. Press Shift + ↓ to jump into the page.

Testing

  • Open the Rotor with U (and later exit it with Esc).
    • Use the ← and → keys to move between menus and ↑ and ↓ inside menus. (Test landmarks, headings, links, and forms from here.)
  • Cycle through images using Cmd + G.
  • Use R and C to hear row and column headers of tables.
  • Start reading with A. Jump through the page with →. Stop reading with Ctrl.
  • Jump to the top of the page with Fn + ←.

Testing with NVDA on Windows

First time set up

Turn on Speech Viewer in Tools. This displays the speech as text on the screen. This is very helpful for accessibility testing.

Testing

Here are some tips for testing with NVDA:

  • Turn off Num Lock.
  • Start NVDA with Ctrl + Alt + N.
  • Open the helper with Ins + F7. Test landmarks, headings, links, forms from here.
  • Cycle through images using G.
  • Use T to cycle through tables. Use Ctrl + Alt + arrow keys to move around table cells.
  • Use Ins + Space to switch between Browse mode (reading) and Focus mode (entering data in forms) if needed.
  • Jump to the top of the page with Numpad +.

Testing with Orca on Ubuntu

Setup

Run orca --setup to get to preferences. Orca is a bit fiddly compared to NVDA or VoiceOver since it doesn't show the read text on screen.

  • Start with Super + Alt + S . If you're using Firefox, you may need to restart it after starting Orca.
  • Orca Modifier (OM): Laptop - CapsLock, Desktop - Insert + KeyPad Insert. You can change this in preferences.
  • OM + Z  to switch to Structural nav mode (this is the default mode, so you may not need to).

Testing

  • Add shift to go back, add Alt+Shift for a list (and use Esc to close it before showing the next list):
    • Headings - H
    • Links - K
    • Images - G
    • Landmarks - M
    • Lists - L (read as a group, use I for list items)
    • Form elements:
      • Buttons - B
      • Combobox - C
      • Radio - R
      • Checkboxes - X
    • Tables:
      • T, Alt+Shift+ arrows keys, or Alt+Shift+Home/End
      • OM + R / C for row / column headers
    • Paragraphs - P
    • Form fields
      • Alt+Shift+F list, OM+Tab for form fields
  • Up, Down for line by line
  • Say All (start reading from current location) - KP +

Testing with VoiceOver on iOS

VoiceOver is most frequently used with Safari, so test using the latest version of Safari.

First-time set up

  • Use the Accessibility Shortcut to switch VoiceOver on and off quickly:
    • This lets you triple-click the side button to stop and start VoiceOver.
    • Navigate to Settings > Accessibility > General > Accessibility Shortcut and select VoiceOver.
      • If you want to see the text of VoiceOver on screen, enable Caption Panel.
  • Customise the Rotor:
    • This lets you choose what appears in the Rotor.
    • Navigate to Settings > Accessibility > VoiceOver > Rotor. Enable the following: Buttons, Form Controls, Headings, Images, Landmarks, Links, Lists, Search fields, Static Text, and Zoom.

Testing

  • Navigate by touch
    • Drag your finger over the screen
    • Double tap to open links, press buttons, etc.
  • Navigate by swiping
    • Swipe right to move to the next item (text or interactive controls)
    • Swipe left to move to the previous item
  • Scroll by flicking with three fingers
  • Use the Rotor to navigate by elements
    • Open the Rotor by twisting two fingers like a dial
    • Swipe up or down to jump between elements in the the selected category

Testing with TalkBack on Android

TalkBack is most frequently used with Chrome, so test using the latest version of Chrome.

First-time set up

  • Use the shortcut service to switch TalkBack on and off quickly.
    • This allows you to hold both volume keys for three seconds to start and stop TalkBack.
    • Go to Settings > Accessibility > Volume key shortcut. Select Use service and choose TalkBack as the Shortcut service.
  • If you want to see the text of TalkBack on screen, go to Settings > Accessibility > Caption preferences > Use captions.

Testing

  • Navigate by touch
    • Drag your finger over the screen
    • Double tap to open links, press buttons, etc.
  • Navigate by swiping
    • Swipe right to move to the next item (text or interactive controls)
    • Swipe left to move to the previous item
  • Scroll with two fingers