VoiceOver: Getting Started


A screenshot of the VoiceOver settings menu on iOS.Settings > Accessibility > VoiceOver

Getting Started with VoiceOver

VoiceOver is an assistive technology for the iOS platform which allows users to interact with textual expressions of the interface by using various swipe gestures and by tapping on the screen. The functionality of VoiceOver also serves as the foundation for other assistive technologies such as Braille devices.

Getting started with VoiceOver can be a daunting task. In fact occasionally we receive consulting requests just to help people turn it off! Don't be afraid though, once you get used to using VoiceOver the basics are easy.

Getting Started

You might think that a VoiceOver User Guide would start with turning VoiceOver on... and you would almost be correct! However, the aforementioned consulting calls were not a joke, so it can be safer to start with configuring your Accessibility Shortcut. This makes turning VoiceOver on and off very easy!

Step 1: Enable Accessibility Shortcut

The Accessibility Shortcut is super useful for users who need to test with multiple assistive technology and is absolutely essential for non AT users. It allows you to toggle VoiceOver on and off trivially. Shifting quickly between testing and user workflows. And useful for not turning your iPhone into a brick until you can reach tech support :).

  1. Enable Accessibility Shortcut
    1. Navigate To: Settings > Accessibility > Accessibility Shortcut
    2. Confirm: VoiceOver has a blue checkmark next to it.

Once VoiceOver is check in the Accessibility Shortcut menu all you have to do is triple tap the power button. This should toggle VoiceOver on and off. Yay!

Step 2: Turn on VoiceOver

It can be helpful to know how to turn on VoiceOver the standard way as well. It is the path to VoiceOver configurations and we encourage you to explore these! You can learn about VoiceOver just by reading through them or even changing some of the settings to see what they do.

  1. Turn on VoiceOver
    1. Navigate To: Settings > Accessibility > VoiceOver
    2. Tap: The VoiceOver Switch.

Or you can just Triple Tap the Power Button because you enabled the Accessibility Shortcut.

Optional: Caption Panel

The caption panel displays VoiceOver speech output in a panel at the bottom of your display. It's pretty small, but very useful.

💡
The Caption Panel makes it easier to identify the portions of an Accessibility Announcement and is essential to help identify distinctions between Label and Value.
  1. Enable Caption Panel
    1. Navigate To: Settings > Accessibility > VoiceOver
    2. Scroll To: Caption Panel
    3. Tap: Caption Panel Switch

This is a particularly useful setting for noisy environments... or when you're testing during a call you barely need to be on.

Using VoiceOver

If this is your first time using VoiceOver take a minute and slowly run your finger across the screen and watch Accessibility Focus move to match where your finger is hovering. We will refer to this action as Touch to Explore. It's very important to be able to distinguish this type of gesture from a faster Swipe gesture.

The Swipe Right and Swipe Left gestures allow you to navigate a linear presentation of the screen that we will call the Accessibility Tree. Let's look at a very simple example of an Accessibility Element that may appear in the Accessibility Tree.

The Anatomy of a VoiceOver Announcement

Understanding the structure of an Accessibility Announcement will help you understand the structure of an iOS Application more deeply. It will and how VoiceOver experiences impact other Assistive Technologies.

  1. Accessibility Element: A switch that turns off a set of lights.
    1. Label: The Lights
    2. Value: Off
    3. Trait: Switch (See Note!)
    4. Other: Internal private state per control.
    5. Hint: Activate to turn the lights on.

Notice how this information comes in separate pieces. Each piece is always optional, VoiceOver only needs one of these pieces of information to focus a control. As you shift Accessibility Focus around this results in the following announcement pattern:

{Label} pause {Trait} pause {Value} long pause {Hint}

Let's assume we place the values for our Light Switch into this formula. We would expect the following to be displayed in the Caption Panel:

The Lights, Switch, Off, Activate to turn the lights on.

Notice how the pauses in the announcement are subtle and get shown in the caption panel as commas! It is important to note that these commas are different from the pauses that come from the natural language processor. They are placed intentionally by VoiceOver between portions of the Accessibility Announcement. Listening for this structure can help you understand the information VoiceOver is sharing more deeply!

💡
Note: "Switch" is a private trait only available to UISwitch. The importance of this is covered in our Developer articles(Coming Soon!). Don't ask developers to assign something the "Switch" trait... they can't.

VoiceOver Gestures

We will provide a full list of gestures in another article! The full gesture list is distracting and unnecessary for our purpose here, which is a gradual introduction to a powerful tool. Day to day the gestures you will use most are:

  1. Basic Gestures
    1. Slow Drag: Touch to Explore.
    2. Swipe Right: Move Accessibility Focus Forward.
    3. Swipe Left: Move Accessibility Focus Backward.
    4. Double Tap: Activate.
  2. Rotor Gestures
    1. Twist Bottle Cap: Change Rotor Setting
    2. Swipe Down/Up: Next/Previous Item Based on Rotor Setting
      1. Headings - Navigation Landmarks.
      2. Actions - List of actions for the control.
      3. Adjustable - Increment adjustable Value.
      4. Containers - Not useful. Poorly implemented across ecosystem.
      5. Paragraphs - Separates text by new line characters.
      6. Words - Separates text by white space.
      7. Characters - Separates text by character.
      8. Links - Links within HTML or TextViews.
      9. Buttons - HTML Buttons. (Note: Only works in Safari)
  3. Navigation Gestures
    1. Home
      1. Place finger on bottom of screen.
      2. Drag to slightly less than half way.
      3. Wait for vibration or "Lift for Home" announcement.
    1. App Switcher
      1. Place finger on bottom of screen.
      2. Drag to slightly less than half way.
      3. Wait for vibration or "Lift for App Switcher" announcement.

Conclusion

That's probably enough for one article! There are other things to learn about VoiceOver in our other articles.

Featured Posts

Developing an Accessible SwiftUI Design System

Designing for Device and Text Size

Applying WCAG 2.2 to Native Mobile Applications

Creating an Efficient iOS Accessibility Test Plan