How to start testing screen reader support using VoiceOver

Testing your website using assistive technologies is a vital way to ensure the accessibility of your website for disabled people. I'll bring you up to speed on the basics of VoiceOver on macOS so you can make it a habit to test your content for screen readers.

What you'll learn

When I started out trying to use VoiceOver to test websites I was quite intimidated by it. It takes some getting used to. After quite a lot of tinkering with it I found some important shortcuts and features that made it click for me.

I won't be going over all the features since there are seemingly infinite options. I just want provide some pointers so you have a basic understanding of how VoiceOver works and give you the confidence to discover other features on your own.

I don't use a screen reader as my primary interface, so this article is not intended to be representative of how most screen reader users will navigate. But the things I will cover here have been super helpful for me to get comfortable with using VoiceOver in my daily workflow.

For more information on how people actually use screen readers I recommend reading the results from the WebAIM Screen Reader User Survey as well as the responses to Heydon Pickering's screen reader strategy survey. There are some terrific and insightful stories in there.

I will be touching on VoiceOver since that's what I have experience with. It's also very easy to get started with if you have an Apple device since it comes pre-installed. It's important to note though that there are several other screen reader options. NVDA and JAWS are the most popular options with about a 40% market share each according to the 2019 WebAIM survey. VoiceOver in comparison has about a 13% market share.

I won't be going over how to optimise your content for screen readers in this article since that's a whole topic on it's own. First let's get comfortable with using one.

Aren't accessibility developer tools good enough?

Developer tools now include amazing accessibility debugging options, like the accessibility features in Chrome DevTools and the Accessibility Inspector in Firefox. These are amazing because they give us the opportunity to quickly discover pain-points in our websites and they give us ways to debug accessibility issues right inside the tools we are already familiar with.

That said, developer tools don't give us a good impression of what the user experience is actually like when using a screen reader.

Fixing accessibility issues without testing them with assistive technologies is akin to fixing design issues without testing them in a browser.

So often I see products that have implemented theoretical fixes for accessibility issues that seem like great solutions in code, but when tested they didn't make sense in practice.

Of course the best results come from actual user testing and hiring disabled people with first hand experience using assistive technology. But even in an ideal scenario you should be working out the obvious problems yourself first. That way your product testers can focus on documenting the more nuanced issues that you might have looked over instead of them having to spend all their time pointing out table stakes stuff like which input fields are missing labels.

What is VoiceOver?

VoiceOver is the built-in screen reader on Apple's platforms that allows you to control your device by having it read text back to you or show it on a braille display. It allows people to control their devices via auditory or tactile feedback instead of—or in addition to—visual feedback.

One thing to note is the customisable nature of VoiceOver. macOS comes bundles with a VoiceOver Utility app. This app allows you to tweak every little aspect of VoiceOver so it works in a way that fits your needs. There is much more than we can cover in this article, but I want to encourage you to take a look in there to get a feel for the different ways that people might use their device.

Since this article is meant as a beginners guide I will stick to the default configuration in VoiceOver: via the keyboard and spoken feedback. But know that VoiceOver can be used with a wide array of input and output methods, like a braille display, trackpad gestures, switches, and voice control.

How to get started

To activate VoiceOver press Command + F5. You'll be greeted with the Welcome to VoiceOver dialog. You can press V to start using VoiceOver. Instead you can also press Space to open the VoiceOver Quickstart if you want to follow Apple's quick interactive tutorial on how to use VoiceOver.

You can check the Do not show this message again option so you can activate VoiceOver super fast whenever you want to test something. If there is less friction to enable VoiceOver you'll be more inclined to use it regularly to check small things.

Finding your bearings

Now VoiceOver is enabled, what are all these things on the screen? You'll notice that two new elements appear on screen: the VoiceOver cursor and the caption panel. The VoiceOver cursor is presented as a box around the element that VoiceOver is currently announcing and with which you can interact. The caption panel shows whatever VoiceOver is announcing in text.

One interesting thing to note is that the VoiceOver cursor isn't the same as keyboard focus. You might have heard that screen reader users navigate via the Tab key. This isn't totally true. The Tab key will only cycle through interactive (focusable) elements on a page. For example, if you want to navigate through fields in a form or links in a navigation. It won't show you any non-interactive elements like paragraphs and images. The VoiceOver cursor will go over each element on the page. Even if it's not interactive.

With the default preferences the element in focus and the VoiceOver cursor are linked to each other. Meaning that if you hit the Tab key and move focus to an element, VoiceOver will jump to it as well.

The VoiceOver modifier key

One of the things that I didn't fully understand at first is the concept of the "VoiceOver modifier key" (or VO-key for short). VoiceOver uses a lot of keyboard shortcuts. To avoid conflicts with other system shortcuts all VoiceOver shortcuts require you to hold down a set of modifier keys. By default you get the option to use either Control + Option together or Caps Lock. Since this key is configurable we refer to it in documentation as the VO-key. So whenever you see the VO-key mentioned somewhere, just know that you can choose to use either Control + Option together or Caps Lock.

Basic navigation

Sequential navigation

Let's start exploring. With VoiceOver you'll mainly navigate sequentially, meaning that you move over each item on screen one by one and VoiceOver will announce what's under your cursor. You do this by holding down the VO-key and pressing the Left Arrow or Right Arrow key. VoiceOver will announce a few different characteristics of the current element: it's name, role, description, and value.

You can "click" on an item by pressing VO + Space.

Whenever you want VoiceOver to stop talking press the Control key.

Grouped navigation

Often related elements are grouped together, for example; windows, sidebars, headers, and menus. This way you can more easily navigate to where you want to go. Sometimes when browsing you will automatically jump into one of these groups (e.g. landmarks, like headers and navigations), but other times you need to purposefully navigate into it (e.g. selects and text fields). When your cursor is on a group that you want to jump into you can use the shortcut VO + Shift + Down Arrow to jump in and VO + Shift + Up Arrow to go back out of the group. If you want to skip to the last item in a group you can use VO + End or use VO + Home to go to the first item in a group.

So here's a cheat sheet of the basic navigation shortcuts we've learned so far, as well as some other useful ones. These are enough to get you started playing around, but I'll cover some other useful features further on.

The rotor

The rotor is VoiceOver's superpower. It's a menu system you activate by pressing VO + U and it helps you navigate websites quickly by categorising information by type. You can use the left and right arrow keys to move through the different categories like Links, Headings, Tables, Form controls, Articles, and Landmarks. This is where you'll hopefully get a well structured overview of your document structure. To go through the list use the up and down arrow keys.

Note that whenever you are in a VoiceOver menu you can also type in a search term to filter down the list. This can also be helpful if you want to only see second-level headings by typing "2".

The rotor comes equipped with some standard types of items, but you can add other types via the VoiceOver Utility, like articles, lists, images, and non-visited links.

The find menu

There are a lot of specific keyboard shortcuts for navigating items by a specific type, like headings, images, and lists. I find that it's best to learn these over time whenever you need them. A good place to find these is via the Find menu. If you press VO + Shift + F you'll notice that a menu opens with all different kinds of ways to navigate for specific content types. The shortcuts are also listed here if you want to use these features more frequently.

If you press VO + F You'll notice that a search bar opens. This allows you to find and focus on a specific phrase on your screen.

The help menu

By pressing VO + H you activate the VoiceOver help menu. This menu is where I go whenever I am stuck and want to learn how to do a certain thing in VoiceOver. There are a few options:

Commands help

This is one of the menus that I use the most. By pressing VO + H + H you open a giant menu with all the commands VoiceOver supports. You can filter this list by typing keywords. This is a great place to learn shortcuts.

User guide

The user guide (VO + ?) sends you to the macOS help guide for VoiceOver. It has lots of helpful articles to learn how to use VoiceOver.

Keyboard help

When keyboard help (VO + K) is active VoiceOver will announce which keys you are pressing on the keyboard. If you hold down the VO-key it will tell you what each shortcut key does.

Sounds help

VoiceOver has a lot of different sound cues to let you know when certain actions happen. The sounds help menu lists all these options and gives a preview of the sound so you can learn what they mean.

Change speech settings

You can change the speech settings in the VoiceOver Utility. But a faster way to do it on the fly is by holding down VO + Shift + Command and pressing the left or right arrow keys to cycle through settings for intonation, Voice, Rate, Pitch and Volume.

Verbosity

By default VoiceOver will speaks with a high level of detail to help you understand how it works. Once you get more comfortable with all the keyboard shortcuts you may not want VoiceOver to announce the keyboard shortcuts to you over and over again. To change these settings you can press VO + V. This opens the Verbosity Rotor. This gives a few different options for how and when VoiceOver will announce things.

Screen curtain

The screen curtain command (VO + fn + _) helps blind and low vision people from having others looking over their shoulders by blacking out the screen. I've found that this functionality is also helpful if you need to test something without being biased by stuff that's visible on the screen. The screen curtain will be removed when you press the shortcut again or when you turn VoiceOver off.

Make it yours

If there is anything you don't like about how VoiceOver works then you can configure it. Almost anything about VoiceOver can be customized. If you're using VoiceOver for testing purposes I wouldn't recommend to go too far from the default setup. But adapting things like voice, speed and pronunciations can make it feel more welcoming to you, which will make you more likely to use it on a regular basis.

I could go on for another hour about all the different ways to use VoiceOver. But this article is really just meant to get you up and running. Hopefully I've given you all the tools to explore and start testing on your own projects.

Further reading

These are some resources that I have found helpful:

• Appendix A. Commands and Gestures - Apple
• Screen Reader Basics: VoiceOver - A11ycasts #07
• Screen Reader User Survey #8 Results - WebAIM
• Responses To The Screen Reader Strategy Survey - HeydonWorks