How to use a screen reader

What is a screen reader?

In the UK there are almost 2 million people living with sight loss.

A screen reader is a type of assistive technology used by people with blindness and low vision. It works by providing text and images as speech or braille.

A screen reader is often used with other assistive technologies such as screen magnification or a braille display.

In a WebAIM survey in January 2024, of the users who described themselves as disabled, 76.6% of screen reader users said they were blind. 19.9% have a visual impairment. 16.7% reported having multiple disabilities.

It's always good to remember that not all screen reader users are blind users (and 'blind users' are not a comparable group).

Common frustrations for screen reader users

1. CAPTCHA
2. Interactive elements like menus, tabs, and dialogs do not behave as expected
3. Links or buttons that do not make sense
4. Screens or parts of screens that change unexpectedly
5. Lack of keyboard accessibility
6. Images with missing or unsuitable descriptions (alt text)
7. Complex or difficult forms
8. Missing or non-descriptive headings
9. Too many links or navigation items
10. Complex data tables

Most popular screen readers

WebAIM survey in January 2024.

71.6% of respondents use more than one desktop or laptop screen reader

Top desktop and laptop screen readers

• NVDA – Windows only, free, 65.6% of respondents
• JAWS – Windows only, 60.5% of respondents
• VoiceOver – Mac OS, free, 43.9% of respondents
• Narrator – Windows only, free, 37.3% of respondents
• ZoomText – combined screen reader and magnification, 7.5% of respondents

Top mobile screen readers

• VoiceOver – Android, 70.6% of respondents
• TalkBack – Android, 34.7% of respondents

When running any Fable tests with screen reader users, include JAWS and NVDA at a minimum and cover Voiceover on iOS too.

How to test with a screen reader

1. Turn on the screen reader
2. Adjust the settings, for example, screen reader speed and shortcuts
3. Navigate through all interactive content using the tab key:
   • Can you use the tab key to access everything that is clickable with a mouse?
   • Does it tab in a logical and sequential order?
4. Navigate through all content (for example text, images)
   • Can you access all content?
   • Is information read out correctly with no repeats? (for example, a link and image alt text the same)
5. Navigate through headings
   • Is everything that is a heading coded as a heading?
   • Are the headings descriptive?
   • Are heading levels in a logical and sequential order?
6. Navigate through links
   • Are the links descriptive? For example, no ‘click here’ or ‘learn more’. Hidden text can be used to assist screen readers
7. Navigate through buttons
• Are the buttons descriptive? For example no ‘click here’ or ‘learn more’. Hidden text can be used to assist screen readers

Using VoiceOver (on a Mac)

Turning on and off

Keyboard keys	Instruction
Cmd + F5	Turn Voiceover on and off
← + →	Turn Quick Nav on
Control + Option + Q	Turn Single Key on

Navigation

Keyboard keys	Instruction
Tab	Navigate through all interactive elements
→	Navigate through all content (text, images, links)
H	Navigate through headings
L	Navigate through links
B	Navigate through buttons

Browsing by all links and headings

Keyboard keys	Instruction
Ctrl + Option + U	Open up element view
→	View all links Press → arrow key until you reach Links
→	View all headings Press → arrow key until you reach Headings

Using forms

Going between fields

• Does it read out if the field is required or optional?
• Does it correctly read out the form label?

Keyboard keys	Instruction
Tab	Press Tab to go between the different form fields

Radio buttons

• Does it read out how many options there are?
• Does it read out which option is selected?

Keyboard keys	Instruction
↑ and ↓	Press ↑ and ↓ arrow keys to go between the options, it will automatically select the one in focus

Checkboxes

• Does it read out which options are selected and deselected?

Keyboard keys	Instruction
Tab	Press Tab go to the first check box and between the options
Space bar	Press Space to select or deselect an option

Dropdowns

• Does it read out which options are selected and deselected?

Keyboard keys	Instruction
↑ and ↓	Press ↑ and ↓ arrow keys to go between the options, it will automatically select the one in focus
Enter	Press Enter to select or deselect an option

Errors

• Errors should be alerted automatically
• Navigate through the form to correct errors
• Does it alert the user when there are errors?
• Are the errors descriptive and unique?