Getting started with VoiceOver on macOS

An understanding of how screen readers work is an important part of the journey for anyone who works on digital products. It gives us an appreciation for the many ways people use the web, and there are two solid things you can do:

1. Observe people who use screen readers using the web
2. Use a screen reader yourself

The first involves some research and planning, which can be huge barriers, unless you work for an organisation that has access to a panel of volunteers, or know someone personally who uses a screen reader and doesn’t mind giving you a demo.

The second might seem daunting, but, thinking back, it only took me around an hour of fumbling to get to grips with VoiceOver on my Mac.

VoiceOver is an Apple-only product; if you’re a Windows user NVDA is a great screen reader to get started with there.

Page contents:

Open Safari

If you don’t use Safari, the temptation might be to use your preferred browser; I urge you not to do this.

While Chrome shares a common root with Safari, and it’s usable with VoiceOver, I’ve found some quirky behaviour that isn’t there in Safari. Opera, Edge, Brave, Vivaldi and all the rest piggy back on the Chromium project, so they suffer from the same downsides as Chrome.

Firefox used to be impossible to use with VoiceOver, but Mozilla began to change that. Problem is, it’s not perfect and is unlikely to improve any time soon, since Mozilla now have fewer people working on Firefox.

So if you’re looking to experience the same thing as almost all actual VoiceOver users, Safari is what you should test with.

Configure VoiceOver

For the most part, you’re going to want to use VoiceOver with its default settings, but there are a couple of things that will make your life a bit easier.

Turn off extra instructions

VoiceOver gives you information about the thing you have moved its cursor onto, for example:

Visited, link, Getting started with VoiceOver on macOS

By default, it pauses slightly then goes on to give you instructions on how to interact with the element:

You are currently on a link. To click this link, press Control-Option-Space

This might be useful the first time you hear it, but after that it’s just unnecessary noise. This is more when you’re focused on a non-interactive element like a heading, where it says:

Heading level 1, Getting started with VoiceOver on macOS

Then the redundant:

You are currently on a heading level 1

To turn the extra hints off open VoiceOver Utility → Verbosity → Hints → de-check Speak instructions for using the item in the VoiceOver cursor.

Prevent automatic reading

By default, when you land on a new page VoiceOver starts reading the page until you stop it by moving the cursor. This can get annoying very quickly. To turn it off go to the VoiceOver Utility app → Web → General → de-check Automatically speak the web page.

Activate VoiceOver

Once you’ve got VoiceOver configured you need to turn it on. The default keyboard shortcut is ⌘ (Command) + F5, but on some Macs F5 can be a bit tricky:

• If your keyboard doesn’t have a Touch Bar, you need to use the fn (Function) key too: ⌘ + fn + F5
• If your keyboard does have a Touch Bar, getting access to the Function keys might be more difficult. In System Preferences → Keyboard → Keyboard, you need to ensure either ‘Touch Bar shows’ or ‘Press and hold Fn key to’ (or ‘Press Fn key to’ if you’re on macOS Catalina or earlier) is set to ‘F1, F2, etc. keys’. If this configuration doesn’t work for you (it doesn’t for me), it’s probably best to remap the shortcut to activate VoiceOver.

Remapping the VoiceOver shortcut

To remap the VoiceOver shortcut, head to System Preferences → Keyboard → Shortcuts → Accessibility → Turn VoiceOver on or off. I change the shortcut to ⌘ + §.

Alternatively, you can forget the keyboard shortcut and navigate to System Preferences → Accessibility → VoiceOver → Enable VoiceOver any time you want to use it.

The same method you used to turn VoiceOver on will turn it off.

The VoiceOver modifier

Keyboard navigation works as normal when VoiceOver is turned on, so tabbing will jump from one interactive element (links, buttons, form inputs) to the next, and so on. But users that can’t see the screen need more than just the keyboard basics to read and navigate web content, which is where the VoiceOver modifier (VO) comes in.

The VoiceOver modifier is two keys: ⌃ (Control) + ⌥ (Option). By itself, VO doesn’t do anything, but if you combine it with another key or keys you access the VoiceOver commands.

If holding down two keys feels a bit fiddly, you can change the VoiceOver key to ⇪ (Caps Lock) instead of (or in addition to) ⌃ + ⌥ in VoiceOver Utility → General → Keys to use as the VoiceOver modifier.

VoiceOver’s ‘modes’

As with most screen readers, VoiceOver has two distinct modes:

• Navigation
• Interaction

Navigation is reading through the text on a webpage, skim-reading the contents, and following links from page to page. Interaction is generally more form-filling.

As a general rule, navigation requires the VoiceOver modifier and interaction doesn’t.

Navigation commands to get started

The good news is you can get around a web page with only a handful of commands:

VO + → (right arrow key)

Go to next thing (heading, paragraph, list item, etc.)

VO + ← (left arrow key)

Go to previous thing (heading, paragraph, list item, etc.)

VO + Space

Follow a link or press a button.

VO + ⌘ + h

Go to next heading

VO + ⌘ + ⇧ + h

Go to previous heading

The overwhelming majority of screen reader users use headings to find information on a page.

Getting into Safari’s web content

Since VoiceOver is a way to use your whole operating system, when you open Safari it focusses on the browser as a whole; you can navigate the toolbar, check your bookmarks, cycle through your tabs, or view the web content (VO + → or ← to move between them). But once you’re the thing you want to use, you have to enter it:

VO + ⇧ (shift) + ↓ (down arrow key)

Enter an 'area'

VO + ⇧ + ↑ (up arrow key)

Exit an 'area'

So to dig into the web content, so you need to put VoiceOver’s focus on the “web content” and hit VO + ⇧ + ↓; you can then navigate through the webpage.

If you want to come out of the web content and back up to that top level to, for example, enter a new web address, use VO + ⇧ + ↑, move your cursor to the “toolbar”, enter the toolbar area and move your cursor to the address search box.

Interacting with the web content

A screen reader user is likely to move from one form-field to the next using VO + → but when filling out the form they fall back on keyboard-only behaviour, for example:

• Space to press a button or check a checkbox
• Numbers, letters, and other characters to type in a <textarea> or text <input>
• Arrow keys to move the selection within a <select> or group of radio buttons
• ⏎ from any field to submit the form

Hopefully that makes the getting used to a screen reader like VoiceOver a bit more straightforward. With all of that information it just requires a bit of time to get used to using the software; it’s a great way to build empathy with users who use the web in a different way to you!