A Screen Reader Quickstart Guide

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.

Resources

• List of VoiceOver keyboard shortcuts
• Screen Reader Basics: VoiceOver - A11ycasts - Google Chrome Developers video tutorial

ChromeVox

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

Recommended setup

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:

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

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:

Keyboard commands

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

Resources

• Using ChromeVox on your Chromebook: Fundamentals - Google Chrome video tutorial

NVDA

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

Recommended setup

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

In the Vision section select the Enable Highlighting checkbox:

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.

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.

Resources

• List of NVDA keyboard shortcuts
• Screen Reader Basics: NVDA - A11ycasts - Google Chrome Developers video tutorial

JAWS

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

Recommended initial setup

Access the settings menu by clicking Utilities > Settings Center:

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

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.

Resources

• List of JAWS keyboard shortcuts