Using VoiceOver to Evaluate Web Accessibility

Introduction

VoiceOver is a screen reader program that comes on new Mac computers, iPhones, iPads, and iPod touches. This article is designed to help users who are new to VoiceOver learn the basic controls for testing web content, and to serve as a reference for the occasional VoiceOver user.

While reading this article, keep a few things in mind:

  • This article does not contain a comprehensive list of VoiceOver shortcuts. It does provide a list of the essential commands that new or novice VoiceOver users should know. For a more comprehensive list of VoiceOver keyboard shortcuts, see the VoiceOver Commands Chart. The VoiceOver Getting Started Guide is also available.
  • If you are new to screen readers, plan on spending some time (perhaps several hours) becoming comfortable using VoiceOver. Don't get discouraged if things still seem confusing after only a few minutes. Slow down the reading speed and take your time.
  • While VoiceOver is available on most Apple platforms, this guide will primarily focus on using the OS X version of VoiceOver.

Getting Started

You can start (or stop) VoiceOver by pressing Command + F5. If you are on a laptop, you will likely need to additionally press the fn (function) key to activate F5.

The VoiceOver Activation keys (called VO keys) are control + option. These keys are used to access special VoiceOver commands and functions and will be referenced simply as VO. For example, VO + H (or control + option + H) will open the VoiceOver Help menu.

While working in VoiceOver, keep the following in mind:

  • VoiceOver currently only functions with the Safari and (with limited support) Opera web browsers. It can also access most OS X native applications and functions. This article will only focus on accessing web content with Safari.
  • Remember that screen reader users typically do not use a mouse. As you become more comfortable with VoiceOver, try using only the keyboard.
  • Most browser shortcut keys will work when using VoiceOver.

Reading

There are dozens of keyboard shortcuts that allow you to read web content. The following is a list of essential reading shortcuts. With these shortcuts, you should be able to read through most content.

  • VO + A: Start reading
  • control: Stop Reading
  • VO + : Read next item
  • VO + : Read previous item
  • VO + P: Read paragraph
  • VO + S: Read sentence
  • VO + W: Read word (press W multiple times to spell words alphabetically and phonetically)
  • VO + B: Read from top to current location
  • VO + Home: Jump to top of page (on laptop keyboards, fn + is Home)
  • VO + End: Jump to bottom of page (on laptop keyboards, fn + is End)
  • VO + command + / : Select speech setting option (speaking rate, voice, pitch, etc.). Use VO + command + / to modify the selected speech setting

You may want to practice reading through the content on this page with VoiceOver right now.

Images

Every image that conveys content or has a function on a page needs alt text. Navigate or listen through the following page to experience how VoiceOver behaves with various images, both with and without alternative text.

Image examples and practice

Data Tables

The cells of data tables can be navigated using VO + the arrow keys. If a table has proper table headers, the column headers will be identified as the table is explored. VoiceOver does not currently read row headers, though it will identify the row number. VO + C will read the column header. VoiceOver also has difficulty with spanned row or column headers and when the top-left cell is empty. This often results in incorrect headers being read.

Table examples and practice

Forms

Support for correctly-labeled forms is good in VoiceOver. When the <label> element is used to explicitly associate form controls and their descriptions, VoiceOver will read the appropriate label when that form element is navigated to. If a form control has a visual label that is not associated using the <label> element, VoiceOver will not auto-associate the label to the form control based on proximity. The legend for a <fieldset> will be read for grouped form controls. The title attribute value of unlabeled form controls will be read. If both a title attribute and a label is provided, both will be read.

Form examples and practice

Practice

  • Review these pages, section by section. At the end of each section, return to the top and navigate to new sections in different ways. For example:
    • Use the Table of Contents.
    • Use VO + U to navigate by various items in the Rotor.
    • Navigate by headings (VO + command + H).
  • There are a couple of elements in this page that are visually hidden, but which are provided to better orient screen reader users. See if you can identify them (Hint: one is right before the main content section and the other is right after).
  • Subscribe to the WebAIM Newsletter without using your mouse.
  • You can turn on Screen Curtain with VO + shift + F11. This blackens the screen, thus giving you a more accurate experience allowing you to better ensure that the web page is truly accessible through audio only. Enable screen curtain or turn off or ignore the monitor and repeat some of these tasks.

VoiceOver on the iPhone, iPod Touch, and iPad

VoiceOver on handheld and mobile devices functions much like the desktop version of VoiceOver, except everything is controlled via the touch-screen interface. With VoiceOver enabled in the Settings, interface content can be read aloud and navigated. Touch an item or swipe left and right to select an item. Double tapping (or selecting and holding with one finger and then tapping with another finger) will activate a screen item (note that once selected, you can double tap anywhere else on the screen to activate the selected item).

While there is much you can do with VoiceOver on the iPhone, to perform basic web accessibility evaluation in Safari, simply open Safari and browse to the page you want to evaluate. The following core functions are available:

  • Read the entire page: Swipe two fingers upward
  • Stop reading: Tap with two fingers
  • Read through page elements: Swipe left or right
  • Open or modify the rotor: Twist two fingers on the screen
    • Select from multiple rotor element types by twisting
    • Once selected, swipe up or down to cycle through the available elements
  • Read from current location: Swipe downward with two fingers
  • Select an element: Tap an item, drag finger to an item, or navigate to an item using another navigation gesture
  • Activate an item: Double tap
  • Zoom: Triple tap

Desktop and laptop users can enable VoiceOver touch gestures that are nearly identical to the controls above. Enable the Trackpad Commander in VoiceOver by selecting VO + rotating two fingers clockwise on the trackpad. You can now use the trackpad to control the computer in the same manner as you would an iPhone, iPod Touch, or iPad. Turn gesture controls off by selecting VO + rotating two fingers counterclockwise.