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.
Windows 10 - NVDA and Firefox
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.
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
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"!).
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.
6) Make sure all elements that look like form elements are coded as such.
7) Make sure all form elements can be interacted with.
Tab through all form elements to make sure nothing gets skipped over.
Use enter key to access a drop down or buttons.