I have heard many people say, “I’ll just download a screen reader and test that bug”. Using a screen reader takes time and practice to use in a similar way that a user with a disability would use the tool. It’s important to know the keyboard shortcuts as well as understanding how to use them to scan a page to find what you are looking for. You can read about the shortcut keys here, then watch this video and see them in action.

What is a screen reader?

A screen reader is a tool that turns text into speech. There are three main screen readers available for desktops.

NVDA – Windows
JAWS – Windows
VoiceOver – MacOS

They all have the same goal – to read content to a user. Just like browsers, they all work slightly differently. You should test on multiple screen readers when possible. Be aware that screen readers on mobile devices work different from desktop.

Can’t I just use automated testing tools?

Automated testing tools are a great place to begin checking your sites accessibility. They can scan your site quickly and alert you to basic issues. Here is a list of some popular tools.

Siteimprove
WAVE
Axe
ARC
Lighthouse
Headings Map

But they only tell half the story. To make our pages useful to screen reader users, we must listen to the page, make judgements about the experience, and improve the experience. The siteimprove website even says, “manual testing is an integral part of accessibility testing as not everything can be automated.”

Why should I care?

As a sighted person, it is easy to overlook the necessity of creating good experiences for screen reader users. When I look at a web page, I can see that something is above, below, left, or right of something else. I can tie meaning to placement. But spatial clues have less meaning if you can’t see. Watch this video of a blind person asking for directions at a mall https://www.youtube.com/watch?v=BDc59Z1CYgA. The clerk tells the person “The elevator is over there on the back wall”. Even then, the elevator is down a hall with several turns. Can you imagine trying to find this elevator yourself?

Who are we designing our sites for?

There are 4 main types of users that visit our websites

Sighted user with a mouse
Sighted user with a keyboard

Mobility issues or impairment
Power user (ie has memorized many keyboard shortcuts)

Visually impaired user with screen reader and a keyboard

Low vision
Color contrast deficiency
Blind (one or both eyes)

User with cognitive disability with screen reader and/or a keyboard

What is our goal?

We want to provide user experiences to all four types of users that are

Equivalent
Efficient
Useful
Usable
Accessible

Using NVDA screen reader

NVDA has a long list of keyboard shortcuts for different mode and different applications. You can see the full list by right clicking on the tray icon, opening the help menu and selecting “user guide”. We’ll focus on the shortcuts for “browse mode” here. Many of the shortcuts use the “NVDA key” which is “insert” by default. You can configure this in the settings.

General Navigation

NVDA + T – Read current window title
NVDA + Tab – Read currently focused element
Ctrl + Home – Top of the page
Ctrl + End – Bottom of the page
Ctrl + L – Browser address bar
Ctrl + R – Refresh page
Ctrl + down arrow – Start reading
Escape – Stop reading

Browse Mode

Tab – Next focusable element
h – Next heading
# – Next heading by level (1 – 6)
d – Next landmark
b – Next button
f – Next form field
g – Next graphic
Shift + X – Previous (heading, landmark, button, etc)
NVDA + Ctrl + f – find

This is different from the browsers find as it moves the screen reader to the found element. Subsequent shortcuts begin from this element.

NVDA + f7 – Elements List

Show you the structure of the page as the screen reader sees it.
This is like dev tools for the screen reader. You can see how sections of the page are labeled and how many items exist.

Final Thoughts

Remember, it takes time and practice to become adept at using a screen reader. We want to create good user experiences for all our users. Using semantic html and aria attributes improves usability for screen reader users as they can quickly scan the page using the shortcut keys. Be sure to watch the video and see how to navigate a page with these shortcuts.

For those businesses looking for insights on website accessibility, Perficient has created a set of information to help. Download our guide Digitally Accessible Experiences: Why It Matters and How to Create Them and read our UX for Accessible Design series.