Your first screen reader test in 30 minutes

What you need

• Windows: NVDA, a free open-source screen reader, with Firefox or Chrome.
• Mac: VoiceOver is built in; Safari works best with it.
• iPhone or iPad: VoiceOver is built in too.
• Headphones, a quiet half hour and two or three typical tasks, such as “find a product and add it to the basket” or “send the contact form”.

Expect the first few minutes to feel strange. Slow the speech rate down enough to follow, but not too far.

NVDA on Windows: the key commands

The NVDA key is Insert by default; with the laptop layout, Caps Lock can serve as well. On web pages NVDA works in browse mode, where single letters jump between elements.

In form fields NVDA usually switches to focus mode by itself so you can type.

VoiceOver on the Mac

Command+F5 turns VoiceOver on and off. The VoiceOver modifier (VO for short) is Control+Option.

• VO+Right arrow / VO+Left arrow: next / previous item.
• VO+U: open the rotor. Left and right arrows switch between lists of headings, links, form controls and landmarks; up and down arrows pick an item.
• VO+Space: activate the current item.
• Control: stop speaking.

VoiceOver on the iPhone

Turn VoiceOver on under Settings, Accessibility, VoiceOver. Set up the Accessibility Shortcut first so you can switch it off again quickly. With VoiceOver on:

• Tap once to select an item and hear it.
• Swipe right or left to move to the next or previous item.
• Double-tap to activate the selected item.
• Rotate two fingers on the screen to open the rotor, for example to move by headings, then swipe up or down.

What to listen for

1. Page title: is a meaningful title announced on load (2.4.2 Page Titled)?
2. Headings: does the elements list or rotor read like a table of contents (1.3.1 Info and Relationships, 2.4.6 Headings and Labels)?
3. Landmarks: are there header, navigation, main and footer regions?
4. Links and buttons: do their names make sense out of context, or do you hear “More” ten times (2.4.4 Link Purpose (In Context))?
5. Images: do you hear useful alt text, file names or nothing at all (1.1.1 Non-text Content)?
6. Forms: is each field announced with its label, and do you hear error messages (3.3.1 Error Identification)?
7. Dynamic changes: are you told when something lands in the basket or a dialog opens (4.1.3 Status Messages)?

Recording what you find

For each issue, note the page and step, what you expected, what you heard, and which screen reader and browser you used. A line such as “Add-to-basket button announced only as ‘button’” is usually all a developer needs. Map it to a criterion from the criteria encyclopedia and the fix is easier to find.

Your own test does not replace the experience of people who use a screen reader every day. In our audit, a screen reader walkthrough is always part of the review.

Step by step

Related WCAG criteria

• 1.1.1 Non-text Content
• 1.3.1 Info and Relationships
• 2.4.2 Page Titled
• 2.4.4 Link Purpose (In Context)
• 2.4.6 Headings and Labels
• 3.3.1 Error Identification
• 4.1.2 Name, Role, Value
• 4.1.3 Status Messages

Tools and patterns for this

• Getting there without a mouseMany people use the web without a mouse: with a keyboard, switches, voice control or a screen reader. Here is what has to work for them and how to manage focus properly in modern web apps.
• Forms that everyone can completeForms are where people buy, book or give up. This guide shows how labels, required fields and error messages need to work for keyboard, screen reader and magnifier users.
• ChecklistsFor design, code and content
• MethodAll 55 criteria, openly described

Frequently asked questions

Sources

• NV Access: NVDA User Guide
• Apple: VoiceOver User Guide for Mac
• Apple: Turn on and practise VoiceOver on iPhone
• W3C WAI: Easy Checks