A Screen Reader Quickstart Guide

By

Image

As the websites and digital products we build become more and more complex, it is more important than ever to ensure that we are not excluding people from being able to experience them. It is therefore imperative that we understand how all users interact with our products, particularly screen reader users. I'm not saying we all need to be experts at using them, even though that's not a bad goal, but at least a basic understanding can help us provide more accessible and inclusive experiences.

The aim of this blog post is to serve as a guide for using the most basic features of the most popular screen readers. My hope is that it will encourage more developers to use screen readers regularly when building websites, to help create a better, more inclusive web.

VoiceOver

VoiceOver is the screen reader that comes built into Mac OS.

Keyboard commands

Modifier keys: Control + Option

Note: Make sure QuickNav mode is off so that these commands work. To toggle QuickNav mode press Left arrow + Right arrow.

Keyboard shortcut Function
Command + F5 Activate VoiceOver
Control + Option + Right arrow Read next item
Control + Option + Left arrow Read previous item
Control Stop reading
Control + Option + U Show rotor for quick navigation. Use Left arrow or Right arrow to navigate between rotor sections
Left arrow + Right arrow Toggle QuickNav mode

Resources

ChromeVox

ChromeVox is a popular, free, screen reader, Chrome browser extension. It can be added to Chrome from the extensions webpage.

Set the modifier key shortcut to match VoiceOver so that both share the same controls to make switching between them easy. To do so first go to the Chrome extensions settings page by navigating to chrome://extensions. Next in the Screen Reader box click on the Details button:

Chrome extension settings page

Then in the ChromeVox extension details page click the Extension options:

ChromeVox extension details

Finally, on the settings page under Keyboard shortcuts > Modifier Keys click on the ChromeVox modifier key input box and press Control + Option (or nearest equivalent if using Windows) to set them as the modifier keys:

chromevox settings

Keyboard commands

Modifier keys: Control + Option if activated as described above.

Keyboard shortcut Function
Control + Option + Right arrow Read next item
Control + Option + Left arrow Read previous item
Control Stop reading

Resources

NVDA

NVDA is an extremely popular, free screen reader from NV Access for Windows. It can be installed from the NV Access website.

Access the settings menu by clicking on NVDA taskbar icon then Preferences > Settings.

In the Vision section select the Enable Highlighting checkbox:

NVDA vision settings

In the Keyboard section select the appropriate device from the Keyboard layout drop-down select. Then if your keyboard does not have an Insert key, in the Select NVDA Modifier Keys choose the caps lock checkbox.

NVDA keyboard settings

Keyboard commands

Unlike with VoiceOver and ChromeVox, navigation is achieved using the Up and Down arrow keys without the need for the modifier key. To stop the arrow keys from being intercepted by the screen reader and pass them to the browser, in order to interact with a component for example, you must switch from browse to focus mode.

Modifier key: Caps Lock if activated as described above, otherwise Insert.

Keyboard shortcut Function
Down arrow Read next item
Up arrow Read previous item
Ctrl Stop reading
Caps Lock + Space Switch between browse and focus modes. In 'focus' mode keyboard commands are not intercepted & passed to browser
Caps Lock + F7 Show Elements list for quick navigation

Resources

JAWS

JAWS is a popular screen reader from Freedom Scientific for Windows. It can be installed from the Freedom Scientific website.

Access the settings menu by clicking Utilities > Settings Center:

JAWS settings center

Go to Keyboard > General > JAWS Insert Key, then in the JAWS Key for Desktop Layout section select the Caps Lock radio option:

JAWS modifier key

Keyboard commands

Unlike with VoiceOver and ChromeVox, navigation is achieved using the Up and Down arrow keys without the need for the modifier key. To stop the arrow keys from being intercepted by the screen reader and pass them to the browser, in order to interact with a component for example, you must switch from browse to focus mode.

Modifier key: Caps Lock if activated as described above, otherwise Insert.

Keyboard shortcut Function
Down arrow Read next item
Up arrow Read previous item
Ctrl Stop reading
Caps Lock + Up arrow Re-read current line
H Navigate to next heading
Shift + H Navigate to previous heading
Caps Lock + F3 Show Elements list for quick navigation
Enter Enter focus mode. In focus mode keyboard commands are not intercepted & instead passed to browser
Esc Exit focus mode

Resources


Who are we?

Potato is an award-winning digital product development studio based in London and San Francisco, which develops purposeful and effective digital products and services. If we can help you, get in touch.