Many people have said, “I’ll just use a screen reader to test the bug.” It takes practice and time to use a screen reader in the same way as a person with disabilities. Knowing the keyboard shortcuts is important, as well as how to use them to scan pages to find what you’re looking for. The shortcut keys can be read here.
What does a screen reader do?
A screen reader converts text into speech. Three main screen readers are available for desktops.
- NVDA Windows
- JAWS – Windows
- VoiceOver MacOS
All of them have the same goal: to provide content to users. They all work differently, just like browsers. It is a good idea to test them on several screen readers. Mobile screen readers work differently to desktop.
Why can’t I use automated testing tools instead?
Automated testing tools can be a great way to check your site’s accessibility. These tools can quickly scan your site and alert you to any issues. Here’s a list of popular tools.
Choosing a Global Software Development Partner to Accelerate Your Digital Strategy
You need a partner in software development that is skilled in the types of digital projects you are currently facing and can help you to be more successful.
Download the Guide
They only tell half of the story. We must listen to what is being said and make judgments about how the experience can be improved. Siteimprove even states that manual testing is an important part of accessibility testing because not all things can be automated.
Why should I care?
It is easy for sighted people to forget the importance of providing good experiences for screen readers. If I look at a webpage, I can see if something is right, left, above, or below something else. Placement can be tied to meaning. However, spatial clues are less meaningful if you cannot see. Watch this video of a blind person asking for directions at a mall. The clerk informs the person that the elevator is located on the back wall. The elevator is still down a hallway with many turns. Imagine trying to find the elevator by yourself.
Who do we design our websites for?
Our websites are visited by 4 types of users
- User with a mouse
- User with sight using a keyboard
- Mobility problems or impairment
- Power user (ie, has memorized many keyboard shortcuts).
- A keyboard and screen reader for visually impaired users
- Low vision
- Color contrast deficiency
- Blind (either one or both eyes).
- Screen reader and keyboard for a user with cognitive impairment
What is our goal?
We aim to offer user experiences for all four types of users.
NVDA screen reader
NVDA offers a variety of keyboard shortcuts that can be used to switch between different modes and applications. The full list can be viewed by right-clicking on the tray icon and opening the help menu. Select “user guide” to see the complete list. Here, we’ll be focusing on shortcuts to “browse mode”. Many shortcuts use “NVDA key”, which defaults to “insert”. This can be changed in the settings.
- NVDA + T – View the current window title
- NVDA+ Tab – Read the currently focused element
- Ctrl + Homepage – Top of page
- Ctrl+ End – At the bottom of the page
- Ctrl+L – Browser address bar
- Ctrl+ R – Refresh page
- Ctrl+ down arrow – To start reading
- Escape – Stop reading
- Tab – Next focusable element
- h – Next heading
- # – Next heading according to level (1 – 6)
- d – Next landmark
- b – Next button
- f – Next field
- g – Next graphic
- Shift + X – Previous (heading, landmark, button, etc)
- NVDA + Ctrl+ f – Find
- This is different than the browsers search as it directs the screen reader to the element. The element is the starting point for subsequent shortcuts.
- NVDA + f7 – Elements List
- The structure of the page will be shown to you as it appears to the screen reader.
- This is similar to the screen reader’s dev tools. This will allow you to see which sections are labeled, and how many items are present.
It takes practice and time to master the screen reader. We strive to provide excellent user experiences for all of our users. Screen reader users can scan the page quickly using shortcut keys by using semantic html and/or aria attributes. Watch the video to learn how to navigate a page using these shortcuts.