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.
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.
Basic VoiceOver Commands (Safari)
- 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.
Basic VoiceOver Commands (iOS)
- 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!
