VoiceOver quick start

VoiceOver is a screen reader that comes installed on all Apple computers. This article will serve as a quick introduction to some of the basic commands to help you get started using a screen reader on any website. VoiceOver will work in any browser but does work best in Safari.

The VoiceOver command keys will be used for almost every command going forward. I will refer to the command as VO which can be either of these:

• caps lock
• option + command

Start VoiceOver - command + F5
Select use VoiceOver

It might start reading off all the elements on a webpage without taking a break and this can be a little overwhelming.

Stop VoiceOver from auto reading - press the control key.
Start reading again - VO + a
I wouldn't suggest auto reading for a first-time screen reader user. For now, let's take it one element at a time.

In the case that the whole browser is selected (you will see an outline around the whole app):
Interact with the item (the browser in this instance) - VO + shift + down
Stop interacting with an item - VO + shift + up
This can also be thought of like navigating levels of a directory.

If the tabs or address bar are selected, you will use
VO + up or VO + down until the content of the webpage is selected.

Once the web content is selected,
navigate between elements on the page:
VO + left arrow
VO + right arrow

Open Rotor: VO + u
This tool is really interesting because it organizes the content of the website in a completely different way than what sighted users are used to seeing. Rotor breaks down the content into several different categories: links, headings, form controls and landmarks.

You can navigate between the Rotor sections with the arrow keys.

Since starting to test the sites that I'm developing with a screen reader, I've found:

• "read more" or other vague text in buttons are not helpful. Give buttons like this descriptive aria-labels
• images declared in the content property of pseudo-elements will be read, even though there's no alt or title.
• it's important to connect your labels to your inputs using id and for
• use html table elements instead of creating a table visually with divs

It is worth exploring how to use screen readers and other assistive technologies in order to become a more empathetic developer. VoiceOver is a great tool that is readily available to all Mac users. While VoiceOver comes with its own tutorial, I found it a bit long and slow but it is definitely worth doing when you have the time.

To see the whole list of commands:
Apple - VoiceOver commands