Screen reader testing

Screen readers are an important part of the accessibility testing process. Users with low, partial, or no vision depend on screen readers to interpret web pages and help them navigate.

Screen reader testing is an intensive, manual process. It involves subjective judgment and takes a lot of time. The accessibility specialists are encouraging front-end engineers to do basic screen reader testing as part of their software development cycle. Our goal is to identify issues sooner and collaborate on solutions ahead of the staging accessibiltiy review.

MacOS - VoiceOver and Safari

For users working on an Apple laptop or desktop, Safari and VoiceOver are included in MacOS. You do not need to download any software to get started.

Read the A11y Project's quick tip on keyboard navigation in MacOS.
Read the Apple Accessibility: VoiceOver Getting Started Guide.

Windows 10 - NVDA and Firefox

Read the WebAIM guide to getting started with NVDA.
Download Firefox latest. Firefox is the best browser to pair with NVDA.
Download the NVDA screen reader.
Add plugin(s) to NVDA to customize your experience.
- To install an add-on, go to the NVDA tools menu and select manage add-ons. Then select install and navigate to the location where you saved the downloaded add-on. Choose the add-on package you wish to install.
  - NVDA Community Add-ons Website
Focus Highlight plugin (recommended)

Windows 10 - VirtualBox VM

If you want to test NVDA on an Apple or Linux device, you will need to create a virtual machine. Microsoft has removed support for Windows 7, so you will have to create a Windows 10 VM. This can significantly decrease performance on your machine; we recommend testing with all non-essential services and applications turned off.

If you're working on a Mac: VirtualBox MacOS build instructions
If you're working on a Linux distro: VirtualBox downloads for common distros
Download an official Windows 10 iso

iOS - VoiceOver and Safari

For testing on Apple mobile devices, Safari and VoiceOver are included with iOS. Note that the mobile versions of both Safari and VoiceOver behave differently than the desktop versions.

Android - TalkBack and Chrome

For testing on Android mobile devices, Chrome and TalkBack are included with Android.

Step-by-step things you should do to assess

For all page types

1) Tab through the entire page.

Every element that can have an action taken on it should be accessible by just hitting the tab key. Every element should have a blue halo around it as you move through the page. The order that you move through the elements should match the visual hierarchy of the page (i.e. it shouldn't jump from main content to footer and skip past other important pieces).

Tab from beginning to end of page watching the focus and order.

2) Navigate by headings should be properly nested and labeled well.

Imagine you can't see the page and reading out headings was your only way to find the section you're looking for. Headings should be properly nested (no heading level is skipped) and labeled well enough to provide context when navigated outside the context of the page.

3) Navigate by links.

Link labels out of context of the rest of the page should be descriptive enough to indicate the destination (no "click here"!).

If applicable

4) Check loading messages.

Loading messages should audibly indicate that something is happening.

5) Check tabbed views, pop-ups, modal windows, and other interactive elements.

Activate any elements that result in a pop-up or modal to make sure a user can access them and read them correctly.
After using any interactive element, make sure that pressing tab moves to an element that is immediately after where you left off or to an element that’s unsurprising.