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 lockoption + 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
idandfor - 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
Top comments (0)