How to Make VoiceOver More Friendly in Your iOS App

With a few changes during development, you can create a better VoiceOver experience for your users.

Since Apple first introduced accessibility features to iOS about five years ago, the company has extended these features to third-party apps by creating a rich set of accessibility APIs. These APIs give developers the ability to create assistive applications that reach a much broader range of users.

But, making your app accessible is just a start. You should also be empathetic to the way a user might need to navigate the accessibility content within your apps.

Primarily speaking about VoiceOver, think about ways to cut down on the navigation load that accessibility may add to an experience. Additionally, keep in mind how VoiceOver may sound to a user as it announces the content from one screen to another or one component to the next.

In this tutorial, we’ll show you how to group your accessibility items in complex views. This decreases the amount of swiping through elements on the screen and makes the navigation process a bit less cumbersome for users.

Before we get started, let’s make sure you have some of the fundamentals down.

Accessibility Properties, Learn to Love Them

Accessibility properties are essential in the road to making your content available to a broader community. The accessibility properties we’ll focus on here are isAccessibilityElement, shouldGroupAccessibilityChildren, accessibilityLabel, and accessibilityHint.

• isAccessibilityElement: Simple enough, right? This value tells iOS whether or not it’s an element that an assistive application can access.
• shouldGroupAccessibilityChildren: This expresses whether VoiceOver should group together the elements that are children of the receiver, regardless of their positions on the screen (i.e., UICollectionView and UITableView cells).
• accessibilityLabel: This is what VoiceOver will announce for a given accessibility element. It’s a concise label that identifies the accessibility element.
• accessibilityHint: Typically, this is a description of what a particular accessibility element is or can do. For example, “Double-tap to view” or “Button.”

Turning on VoiceOver in your Apple product can be done in one of two ways:

• Manually: On your device, go to Settings > General > Accessibility > VoiceOver and tap VoiceOver to the on state. That’s easy to do once, but doing these steps multiple times in a row during testing becomes tedious. Luckily, there’s a shortcut!
• VoiceOver Shortcut: On your device, go to Settings > General > Accessibility > Accessibility Shortcut and make sure VoiceOver is selected. Now, all you need to do to turn VoiceOver on or off is triple-tap the Home button. Great, right?!

In case you’re wondering this will not work in the iOS Simulator. You’ll need to test your accessibility additions on a physical device.

Got it? Great, let’s get started.

Combining Accessibility Content Into Groups

As I mentioned before, navigating through accessibility elements can quickly become a cumbersome activity. Imagine having to swipe left and right between every single label and image contained in a UICollectionViewController or UITableViewController. Not fun, right? What can you do to make that a little more bearable?

One way I like to solve this problem is to think of each cell in those instances as a single element. Now imagine if you could swipe left and right between each cell as the cell reads off all of its content and not label by label. That’s right, Apple’s rich accessibility API gives us the ability to do this with a simple trick.

Let’s look at how we can do this with a UICollectionView.

First, within your code, set the accessibility properties for your collection view. See the example below.

// Accessibility
collectionView.isAccessibilityElement = false
collectionView.shouldGroupAccessibilityChildren = true

Here we tell the assistive application to act like the collection view isn’t there. Thus, it won’t be selected as a user swipes through its parent view when VoiceOver is turned on. I know this seems counter intuitive, but don’t worry. The next thing we’ll do is set each element in that collection view as an accessibility element.

In this example, we’ll apply accessibility to a UICollectionViewCell that displays information for a music album. Each cell will have an image, album title, and artist name.

@IBOutlet var imageView: UIImageView!
@IBOutlet var titleLabel: UILabel!
@IBOutlet var artistLabel: UILabel!

First, we’ll configure our cell:

final func configure(cellWithModel model: Album) {
    if let artworkName = model.artworkName {
        imageView.image = UIImage(named: artworkName)
    }
    artistLabel.text = model.artist?.name
    titleLabel.text = model.title
    applyAccessibility()
}

Then, apply accessibility properties to each UICollectionViewCell:

final func applyAccessibility() {
    isAccessibilityElement = true
    accessibilityLabel = “\(titleLabel.text!)\(artistLabel.text!)”
    accessibilityHint = “Double tap to play.”
    imageView.isAccessibilityElement = false;
    artistLabel.isAccessibilityElement = false;
    titleLabel.isAccessibilityElement = false;
}

As you can see, each cell is set as an accessibility element which in turn adds it to the accessibility items list for its parent view. This means that as a user swipes through the collection view items, each element will have an opportunity to describe its contents.

Then, we added not just the titleLabel text but also the artistLabel text to the cell’s accessibilityLabel property. This way, as VoiceOver speaks to the user, they hear the content of both labels in our album cell instead of just one or the other. And, of course, we set the accessibilityHint property so that users can know what will happen when they perform the double-tap action. Keep in mind that accessibility hints will always be spoken following a brief pause after an element’s accessibilityLabel has been read. You will not hear it right away.

Lastly, within our album cell we set each child element’s isAccessibilityElement value to false. Of course, setting a cell as an accessibility element will, by default, make its children non-accessibility elements.

Whew, now after all that, let’s see how it works. This video demonstrates what would happen if we did not do all the above steps and then shows an example where we applied our accessibility properties.

Grouped cell elements not only sound better when read by VoiceOver, they cut down on navigation.

Making Accessible UICollectionViewCells Sound Like a Human

A lot of the time, I notice developers rushing through accessibility within their apps. This can be due to a number of factors, but the contents of the accessibilityLabel property tend to need just a slight touch of love.

In the previous example of how we set the accessibilityLabel of our album cell, you’ll notice that it reads straight through its content rather quickly in some cases. But what if we wrote our labels similar to how we talk? Adding a comma, or even a conjunction, may help make the label sound a bit better to your audience by creating pauses in VoiceOver’s dictation

Here’s a simple example of just adding a comma to the accessibilityLabel for our album cells.

accessibilityLabel = “\(titleLabel.text!), \(artistLabel.text!)”

It’s subtle but effective. Watch this short video to hear what a difference this can make. In the video, cells on the left do not contain commas, while the cells on the right do.

Work With Accessibility in Mind

Apple has taken the first step and provided developers with the ability to create assisted applications. Carry on that effort by adding accessibility into your development workflows. It’s easier than you think and your app’s users will thank you for it!

For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.

Black Pixel is a creative digital products agency. Learn more at blackpixel.com.