How to use the VoiceOver screen reader

If you care about your web content being accessible, try accessing it with a screen reader. Learning to use a screen reader is easier than ever. Both Windows and Mac operating systems (OS) have free screen readers available. This article refers to the Mac OS built-in screen reader, VoiceOver.

It’s important to use the Safari web browser with Voiceover because they were made to work together. You can use Voiceover with other browsers, but you may experience issues.

First, configure your Safari browser to be used with your keyboard alone:

Navigate to Safari > Preferences > Advanced.

In the Accessibility section, check the “Press Tab to highlight each item on a webpage” checkbox. Now you are ready to begin.Safari preferences pane

Second, open VoiceOver:

It’s finally time to open Voiceover. The list of commands below will help you to navigate through your content. There are separate commands for either your desktop computer or your iPhone. The most common keystroke for your desktop computer will be to tab through your site with the "tab" key.

Listen to assess if the experience would make sense for a non-sighted user as you tab through the site with your keyboard. If sites are poorly designed, it can be difficult or impossible for non-sighted users to understand what is happening.

Voiceover Commands (Safari)

ACTION COMMAND
Turn VoiceOver on or off Command-F5
Move to the next interactive element (link/button) Tab
Read from the current location to the end of the page Ctrl+Opt+A
Open the rotor Ctrl+Opt+U
Navigate to a table Ctrl+Opt+U > right/left arrow key > Tables
Navigate cells in a table (once you are in the table) Ctrl+Opt+arrows
Navigate to a heading Ctrl+Opt+U > right/left arrow key > Headings
See a list of all links on the page Ctrl+Opt+U > right/left arrow key > Links
Go back to the previous page Cmd+[

To turn on the accessibility features of your iPhone, navigate to Settings > General > Accessibility > VoiceOver > On. If the site you are testing is responsive, you can do a first sweep by testing the mobile breakpoint of your site on your desktop computer.

Voiceover Commands (iOS)

ACTION COMMAND
Turn VoiceOver on or off Settings > General > Accessibility > Voiceover > On
Select an item Tap once
Activate a selected item Double-tap
Scroll Swipe three fingers
Navigate to next page item (like tabbing on desktop) Swipe right
Navigate to prev page item (like tabbing on desktop) Swipe left
Use rotor Rotate two fingers like turning a dial; lift fingers to choose option
Use a rotor option Flick finger up or down to move through options
Select an element you are looking for Two-finger triple tap brings up item chooser. Swipe left/right to move through the list.

Test, log issues, fix them, and perfect your site. Repeat!

3 thoughts on “How to use the VoiceOver screen reader

Leave a Reply

Your email address will not be published. Required fields are marked *