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.
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.
