Automated tools tell you whether a name exists. A screen reader tells you what a blind user actually hears. Testing with one is the most direct way to check names, roles, states, reading order and announcements.
You do not need to be an expert user. A small set of commands covers most testing. Remember that experienced screen reader users are much faster and use many more shortcuts, so a page that is merely tolerable to you may still be hard for them, and the reverse.
Which screen reader and browser
Test with combinations that people really use. WebAIM's screen reader user surveys consistently show NVDA and JAWS as the most used on desktop, and VoiceOver dominating on iPhone.
| Screen reader | Platform | Cost | Test with |
|---|---|---|---|
| NVDA | Windows | Free | Firefox or Chrome |
| JAWS | Windows | Paid, with a time-limited demo mode | Chrome or Edge |
| VoiceOver | macOS, iOS, iPadOS | Built in | Safari |
| TalkBack | Android | Built in | Chrome |
| Narrator | Windows | Built in | Edge |
Start with one desktop pair, such as NVDA with Firefox or VoiceOver with Safari, and VoiceOver on an iPhone for mobile.
Turn on a visual output so you can see what is announced. NVDA has a Speech viewer in its Tools menu. VoiceOver shows a caption panel by default. You can then test with the sound low and read the output.
NVDA basics
Download NVDA from nvaccess.org and install it. The NVDA key is Insert by default; you can also set Caps Lock in the keyboard settings, which is easier on laptops.
| Action | Keys |
|---|---|
| Start NVDA | Ctrl+Alt+N |
| Stop speaking | Ctrl |
| Read from here | NVDA+Down Arrow |
| Next / previous item | Down Arrow / Up Arrow |
| Next heading / heading level 2 | H / 2 |
| Next landmark | D |
| Next form field / button / link | F / B / K |
| Next table / list | T / L |
| Elements list (headings, links, landmarks) | NVDA+F7 |
| Switch browse and focus mode | NVDA+Space |
| Quit NVDA | NVDA+Q |
Add Shift to most single-letter commands to move backwards, for example Shift+H for the previous heading.
Browse mode and focus mode
NVDA has two modes, and understanding them explains many test results.
- Browse mode is for reading. Letters such as
HandKare navigation shortcuts, and arrow keys move through content. - Focus mode passes keys to the page, so users can type in a text field or use arrow keys inside a widget. NVDA switches to focus mode automatically when you move into a form field or certain widgets, and plays a sound.
If arrow keys do nothing inside your custom widget, it may lack a role that tells NVDA to switch to focus mode. If typing in a field triggers navigation instead of text, focus mode did not activate.
VoiceOver on macOS basics
| Action | Keys |
|---|---|
| Turn VoiceOver on or off | Cmd+F5 (or hold Cmd and press Touch ID three times) |
| VoiceOver modifier (VO) | Control+Option, or Caps Lock if enabled |
| Stop speaking | Control |
| Next / previous item | VO+Right Arrow / VO+Left Arrow |
| Activate | VO+Space |
| Read from here | VO+A |
| Rotor: lists of headings, links, landmarks, form controls | VO+U, then left and right arrows to change list |
| Next heading | VO+Cmd+H |
| Enter / leave a group or web area | VO+Shift+Down Arrow / VO+Shift+Up Arrow |
Quick Nav lets you use single keys like NVDA's browse mode. Press the left and right arrows together to toggle it, then use the arrows alone to move. With single-key Quick Nav turned on in VoiceOver Utility, H jumps to headings.
The first time you start VoiceOver, macOS offers a tutorial. It takes about 15 minutes and is worth doing.
VoiceOver on iPhone
Turn it on under Settings, Accessibility, VoiceOver, and set the Accessibility Shortcut to triple-click the side button so you can turn it off quickly.
- Swipe right / left: next / previous item.
- Double-tap: activate the selected item.
- Rotate two fingers: open the rotor and choose Headings, Links or Form Controls, then swipe down and up to move.
- Two-finger swipe up: read the whole page.
A test routine
Run the same routine on each page or component.
- Page load: is the page title announced, and does it identify the page?
- Headings: open the headings list. Do the headings form a sensible outline, with one
h1? - Landmarks: jump through landmarks. Is all content inside one, and are repeated ones labelled?
- Links: open the links list. Does each link make sense out of context?
- Images: move through images. Is the alt text accurate, and are decorative images skipped?
- Forms: tab through the fields. Does each announce a label, its role, required state and hint? Submit with errors: are the errors announced and easy to find?
- Widgets: open menus, tabs, accordions and dialogs. Are the role and state announced, such as "collapsed" or "selected"? Does focus move into dialogs and back out again?
- Dynamic updates: trigger a search, add to the basket or save. Is the result announced?
What to listen for
Each interactive element should announce three things: its name, its role and its state if it has one. For example:
Delivery information, button, collapsed
Email address, edit, required, invalid entry. Enter your email address
Main, navigation landmark
Show password, checkbox, not checkedTypical failures sound like this:
| You hear | Likely cause |
|---|---|
| "button" with no name | Icon button without an accessible name |
| "clickable" or nothing for a control | A div or span used as a control |
| "edit" with no label, or the placeholder only | Missing label |
| "IMG_0423 dot jpg, graphic" | Missing alt attribute |
| No change after pressing a toggle | aria-expanded or aria-pressed not updated |
| Silence after a search or save | No live region or focus change |
| Reading jumps to the top of the page | Focus was lost when an element was removed |
| Content read that is visually hidden behind a modal | The background is not inert |
Write down exactly what you heard, the screen reader, browser and versions, and the steps to reproduce. Precise notes make issues easy to fix and retest.
Screen readers and browsers differ, and occasionally a correctly built pattern is announced oddly in one combination. Before adding workarounds, check that your code follows the spec and the ARIA Authoring Practices Guide. Fix your code first; do not code for one screen reader's quirks.
Summary
- Test with real combinations: NVDA with Firefox or Chrome, VoiceOver with Safari, and VoiceOver on iPhone.
- Learn a small set of commands: next heading, landmark, form field, elements list or rotor, stop speaking.
- Understand NVDA's browse and focus modes; they explain many widget problems.
- Listen for name, role and state on every control, and for announcements after updates.
- Follow the same routine on each page and record exactly what you heard.