Desktop Screen Reader Practice

Overview

In this lesson, you will learn the basics of using screen readers in a desktop environment. This will include learning to navigate content, announce structure, and interact with form controls. Past the basics, understanding screen readers in a desktop setting requires learning at least some of the common screen reader commands. These issues along with a few other common affordances will be highlighted.

Goals

You have the following goals for this lesson:

• Understand what a screen reader is and how to use one in a desktop setting
• Learn basic navigation commands for screen readers, including modes
• Observe how screen readers announce content
• Practice navigating a web page using a screen reader

Warm up

Imagine a site you are very familiar with. It could be a news site, email service, or an online store. When you imagine it you might remember how it looks and how it’s laid out but instead of seeing it, try to listen to it or feel it. Think through at a high level how you might get around, how you might know where you are, what the page might say, and also how you might find what you need quickly. How would that work?

Vocabulary

You will be learning about the following vocabulary words:

Web Content Accessibility Standards

This lesson covers the following standards:

• WCAG 2.2 - 1.1.1 Non-text Content
• WCAG 2.2 - 1.3.1 Info and Relationships
• WCAG 2.2 - 1.3.2 Meaningful Sequence
• WCAG 2.2 - 1.3.3 Sensory Characteristics
• WCAG 2.2 - 2.1 Keyboard Accessible
• WCAG 2.2 - 2.4.3 Focus Order
• WCAG 2.2 - 2.4.6 Headings and Labels
• WCAG 2.2 - 3.3.2 Labels or Instructions

Explore

Screen readers are specialized software tools that assist users by converting text into speech, Braille, or other touch feedback. These tools are crucial for enabling people to interact with the web and other digital content independently. Screen readers interpret the structure of a web page, such as headings, paragraphs, links, or form fields, and translate this into feedback that can be used by non-visual senses. Without them, users that need it would be unable to do basic operations in society, like paying taxes, accessing bank accounts, signing contracts, buying a home, or other critical things.

While screen readers have an obvious use case for those with vision challenges, counterintuitively screen readers are commonly used by other groups. For example, those with dyslexia may use such tools to read visual text. Further, younger users still learning to read often use spoken text as part of the learning process, which is akin to a screen reader. At the end of the day, reading text aloud, which is a crucial function of such devices, has many applications beyond disabilities and is an important part of universal design. By definition, if an application cannot connect to screen readers, it may break more things than the designer intended.

Screen Readers work by interpreting the underlying structure of an application. On a web page, this would be the HTML. The simplest way to think about it would be to read aloud in a linear fashion, although this would be slow. On a web page, a screen reader will read the text content and can provide other contextual information. Additionally, many screen readers are compatible with Braille displays that can translate the context into braille characters for users more comfortable reading braille than listening.

The point here is that accessibility is a lot more than understanding WCAG's often clear as mud regulatory structure. Sometimes, just being able to use an application with a screen reader is a starting point for evidence that an application is accessible, but it requires being able to use one. It is not as hard as you might think and practicing can go a long way.

Screen Readers

There are several screen readers available for desktop use. There are different options based on your operating system and each has their own features. Some of the most widely used screen readers include NVDA (NonVisual Desktop Access) [1], JAWS (Job Access With Speech) [2], and VoiceOver (built into macOS) [3]. Unfortunately, how they work, what they do, and how to use them, is not standardized.

Several screen readers are available across different operating systems. On Windows, the most commonly used screen reader is NVDA, which is free and can be downloaded from the NVDA website. Another popular option is JAWS, a powerful commercial screen reader that requires a paid license but offers a free trial. Windows Narrator is also built into the operating system, though it is less widely used than NVDA and JAWS. It tends to be quite standards compliant, but arguably might be less powerful or robust. That said, its adherence to standards can make it very useful for testing. On Mac, the built-in screen reader is VoiceOver, which comes pre-installed with macOS. For a device like a Chromebook, ChromeVox is the default screen reader and is included with the ChromeOS operating system.

Each screen reader offers a range of customizable settings and to say there are differences is an understatement. A particularly useful feature for testing is NVDA's Speech Viewer, which displays a live text log of everything the screen reader announces. This allows developers and testers to review exactly what is being read aloud. To enable the speech viewer for NVDA, right-click the NVDA-icon in the taskbar or use the hotkey and under ‘Tools’ select ‘Speech Viewer.’ A window will open showing the spoken output as text in real time. Not all screen readers have a speech viewer, or at least not in the same way.

Finally, one crucial point to remember when learning screen readers is that they work differently under the hood and this is especially important to understand between platforms. The actual way screen readers talk to systems is almost entirely incompatible between Mac and PC, for example. As such, you can and will get different speech and different interactions. Further, screen readers are trying to make every program in the universe accessible, through any crazy hack the designers can think of. This is the way things are, but because so many applications are inaccessible, it really is the wild wild west of technical incompatibility. Point being, you kind of just need to embrace the chaos. Changing it would require a renaissance across industry tools that to-date has not happened would likely take legislation.

Getting Started

Every screen reader has their own shortcuts and features. For a full list of commands of each you can refer to the official documentation provided by the developers. In this section, however, there is a brief summary of what seemed the most important. For NVDA, they have created a quick reference guide and VoiceOver has a User Guide provided by Apple Support.

Screen reader commands typically use a special modifier key which can be changed to a custom key if needed. NVDA’s modifier key is referred to as the ‘NVDA key’, by default it is typically the Insert key, but the Caps Lock key is also common on laptops. Apple’s modifier key for VoiceOver is known as the ‘VO key’ and by default it is Control + Option key.

Reading Commands

Once you have opened and started using a screen reader, it is important to first learn the primary navigation commands. These allow the screen reader to move through a web page and begin reading different parts of the content. On a web page, the screen reader relies on the page’s underlying code to determine the reading order. These commands tell the screen reader how to follow that order and what content to read aloud. Note that you can use Shift + any of these commands to move focus backwards.

Navigation Commands

NVDA has several single key shortcuts that let you quickly move focus around a web page. In contrast, most of the shortcut navigation commands in VoiceOver require use of the VO key in combination with other keys. Note that you can use Shift + any of these shortcuts to move focus backwards. This is one of many reasons why testing conflicting keyboard shortcuts is so important. It is very easy to accidentally override something that you did not know existed.

Voice over has its own commands, which focus on using the voice over keys. Which approach is more accessible is partially subjective, but regardless you often cannot change this per platform anyway. Even if you can, you should not unless you absolutely know what you are doing. Put another way, even if you are right about making key changes, it is good to second guess your opinions.

VoiceOver Rotor and Modes

The Rotor is a navigation tool in VoiceOver designed to help move between different types of content on a web page or within an application. The Rotor provides a customizable way to navigate large and complex documents or web pages by allowing you to focus on specific elements, such as headings, links, form fields, and more, without having to manually move through each item. This idea, having a mode to skip between different kinds of structure, is common with screen readers. The idea is that going through every item linearly, one by one, is slow, and thus skipping around makes navigation easier.

Consider an example where you want to get a quick summary of a page. Tools like artificial intelligence might seem like the solution, but this is wrong, as it presumes the user wants a summary of the page at all. Often, however, the user wants to interact with specific pieces of the page. You might want to fill out a form and submit, where AI is really the wrong tool for the job, even if you presume it works accurately.

Thus, features like the rotor or others are helpful for skipping from one heading to another or quickly jumping to the next link or form control. Ideas like this, or modes, are a very common way in which a user can navigate the structure of the page. This explains fully why structure is so important. Everyone can use structure in a document to better understand it, but the specific tags matter a whole lot when using screen readers.

To activate the Rotor in the desktop version of VoiceOver, press VO + U. Once the Rotor is activated, you can cycle through various navigation options (e.g., headings, links, form controls, tables, etc.) by using the Left and Right arrow keys. On the screen, this will also show a visual window. These options represent different types of content or elements that can be found on the page, and selecting one allows you to quickly jump between those elements. You might presume again that this is a feature exclusively for users that lack functional vision, but again this is not how accessibility works. Tools like the rotor have visuals on the screen, in addition to sound or touch, exactly because it makes the design more universal.

When navigating a web page, selecting Headings from the Rotor will allow you to quickly jump between heading levels (e.g., H1, H2, etc.), while selecting Links will focus on iterating through each of the hyperlinks on the page. When reading through a form, selecting Form Controls will let you skip directly between input fields, radio buttons, checkboxes, and submit buttons. This makes it easier for users to interact with complex or multi-layered content without needing to wade through every element manually. The Rotor is customizable, allowing you to adjust the list of available navigation options. By default, you can navigate by headings, links, form controls, static text, tables, and more.

NVDA Browse Mode and Focus Mode

Screen readers off of Mac also offer different modes that optimize the way users interact with content. In NVDA, two of the most important modes are Browse Mode and Focus Mode. VoiceOver has a similar setting for DOM or Group Mode for web navigation and the additional QuickNav Mode. Each mode is designed for different types of interactions, allowing users to navigate a web page or application in different ways depending on the task. Understanding when to switch between these modes can help you get around.

Browse Mode is primarily used for reading and navigating static content on a web page or document. When a screen reader is in Browse Mode, it allows you to quickly move through large blocks of content, such as paragraphs, headings, links, and images, using keyboard shortcuts. In this mode, you can also move between the major structural elements of a page, such as navigating from one heading to another or jumping directly to a specific link. The screen reader presents content in a way that is linear, similar to how it would be read by a sighted user, but with the added benefit of allowing you to control the pace of reading and skip over irrelevant sections easily. While VoiceOver does not have a true Browse Mode, QuickNav Mode serves a similar purpose in web navigation. Note that it is sometimes easy to turn quick nav mode on accidentally on mac, so if navigation all of a sudden changes in a way you did not expect, consider checking by tapping the left and the right arrow on the keyboard at once to toggle it.

Focus Mode, on the other hand, is used when you need to interact with specific elements on a page, such as entering data in a form, or pressing a button. When the screen reader enters Focus Mode, it shifts from a read-only navigation state to one that allows you to interact directly with elements on the page. For example, when you navigate to a form field in Focus Mode, the screen reader will allow you to type, select options, or modify the content, depending on the field’s requirements.

The main difference between Browse Mode and Focus Mode is the way the screen reader handles keyboard input. In Focus Mode, keyboard commands are directed toward interacting with specific elements, rather than navigating between them. When in Focus Mode, you can use Tab to move between form fields or buttons and Enter to activate links or buttons. Focus Mode is essential when performing actions like submitting a form, activating a menu, or interacting with other complex widgets that require user input.

Screen readers can change between the modes manually but also in some situations try to change automatically. NVDA will automatically switch modes when focus moves to an interactive element, like a form field or button. However, users can manually toggle between modes using specific keyboard shortcuts. In NVDA you can press NVDA + Space to toggle between Browse Mode and Focus Mode.

To see the difference between the modes you can open a web page and by default the reading commands should work. If you are on a page and you press the up and down arrow keys NVDA will try to read the page line by line. If you are familiar with navigating without a mouse you will know that by default the up and down arrow keys will scroll the page up and down. NVDA in Browse Mode is now intercepting those keys to instead read and navigate in a different way. To use the arrow keys normally again you would enter Focus Mode by pressing NVDA + Space and the arrow keys should be able to scroll the page.

Citations

1. NV Access. User guide. https://www.nvaccess.org/files/nvda/documentation/userGuide.html
2. Freedom Scientific. JAWS screen reader documentation. https://www.freedomscientific.com/Training/Fusion-JAWS-ZoomText-Training/JAWS-Training
3. Apple Inc. VoiceOver for Mac. https://support.apple.com/guide/voiceover/welcome/mac

Engage

There is no better way to learn screen reader accessibility than to actually use one. Reading about accessibility is not the same as feeling it in your hands and ears. In this activity, you will explore what it is like to use a computer with a screen reader and keyboard only, no mouse. This is real usage of the tools that blind and low-vision users rely on every day to read, navigate, and interact with content. There is one, and only one hard rule for this exercise:

DO NOT TOUCH THE MOUSE OR ANY OTHER POINTING DEVICE

If you have a physical mouse: unplug it. If you have a trackpad and cannot unplug it, then do not touch it. If you really want to commit, you can turn on the Screen Curtain or cover your monitor, but this is not recommended for this exercise. While it might seem intuitive to fully block out the screen, practicing screen reader skills can be hard and make people uncomfortable. Allowing sighted users the ability to see the screen while learning the keyboard commands may help them get a mental model of what is happening, which has value. That said, in NVDA you can use NVDA + Ctrl + Escape to turn on or off screen curtains. For VoiceOver the shortcut is VO + Shift + Fn + _ . Regardless of your approach, the goal is to practice and get a feel for how it works, but the goal is not to stress yourself out by jumping in the deep end of the pool right away.

Directions

Based on your platform choose the appropriate screen reader. For Windows, you should use NVDA for this exercise rather than Narrator, although you can try any screen reader you wish or multiple. Make sure you screen reader is speaking, and spend a minute or two learning how to:

• Pause and resume speech
• Move by element, heading, or link
• Read the current item

Now each group will pick a web page to explore. This could be something like a homepage or product page. Try to choose something that you are not already familiar with so you do not rely too much on your memory.

Now give yourself a basic task a user would do. Some examples might be:

• Locate the main navigation and go to a specific section
• Change a setting in an interface or web application

Now try to complete the task. Really listen to the screen reader’s announcements to try to understand what is happening or where it is missing. Keep a list of shortcuts for your screen reader handy to try to use them if you think they will help.

When you are done, reflect on the experience of trying to complete the task:

• What helped you understand the layout of the page?
• What was frustrating, slow, or confusing?
• Were there any parts of the site that were impossible to reach or understand?
• What made something easy to use with a screen reader?
• If you used the screen curtain, how did that change your experience?

Next Tutorial

In the next tutorial, we will discuss Mobile Screen Reader Practice, which describes how mobile screen readers differ from desktop screen readers.