Make your iOS app accessible with VoiceOver

This article first appeared in issues 213 and 215 of .net magazine – the world's best-selling magazine for web designers and developers.

You probably know that Apple’s range of iOS devices comes with a built-in screen reader called VoiceOver. What you may not be aware of, though, is just how easy it is to make your apps accessible.

When VoiceOver is enabled, the basic gesture set changes. For example, a single tap highlights an item and speaks its name, and a double one opens or activates the item.

If you haven’t used VoiceOver before, it’s worth taking a little time to play around with it. To turn it on, tap Settings > General > Accessibility > VoiceOver. You can assign VoiceOver to a triple-click of the Home button, which makes it easier to turn on and off. Just enable the option from Settings > General > Accessibility. Apple has some helpful advice on getting started at support.apple.com/kb/HT3598.

An app is accessible when its user interface elements support this style of interaction. Effectively, VoiceOver users need to know four basic bits of information about each UI element: does it exist, what is it, what does it do and what happens when it’s activated?

Happily for developers (and VoiceOver users), native UIKit controls provide this information by default. Ordinarily, you won’t need to change these controls, although there may be times when you want to make slight adjustments to create an optimal user experience. If you’re creating custom controls, though, you’ll definitely need to configure the following settings through the interface developer.

• Does it exist? Accessibility Enabled is a checkbox that determines whether the element is available to VoiceOver or not. It’s on by default for native UIKit controls, but you’ll need to enable it for your custom controls. When this setting is disabled it causes the element to vanish completely from VoiceOver’s awareness, so think carefully before you decide to turn it off.
• What does it do? The label is a short text description of what the element does. Usually just a single word, such as “Play” or “Delete”, it’s the information a VoiceOver user hears when they single-tap the element.
• What happens when it’s activated? The hint is a slightly longer text description that explains what happens when the control is used. A VoiceOver user will hear the hint following a short pause after the label is spoken. Hints are optional, and if you decide to provide one, Apple advises against using a phrase that sounds like an instruction. “Plays music” or “Deletes song” are recommended, whereas “Play music” or “Delete song” aren’t.
• What is it? Each element has a number of traits that tell VoiceOver what type of control it is. It’s worth looking at the accessibility traits in more detail, because they provide VoiceOver with a wealth of information about the element. You can choose one or more of them, and they collectively describe the accessibility characteristics of the element. The first step is to choose the trait that best describes the control type of your element. There are four of these to choose from, but you should only select one:

1. Button: indicates that the element is a button, or at least behaves like one.
2. Link: shows that the element is a link – especially when activating it opens a URL.
3. Search field: reveals that the element is a search field, where a search string can be entered (or chosen) and a set of search results returned once the element is activated.
4. Keyboard key: shows that the element is a key, or behaves as a keyboard key would.

The next step is to pick a trait that describes the element’s behaviour well. There are seven of these. Again, you should only choose one:

1. Static text: indicates that the element is text that cannot be changed or interacted with, but which VoiceOver will read.
2. Image: suitable if the element is a graphic, for which VoiceOver needs an accessibility label.
3. Plays sound: shows that the element plays a sound, enabling VoiceOver to manage volume for other sounds (or speech) being used at the time.
4. Selected: the element is selected (usually applied dynamically), letting VoiceOver know which element is currently chosen or active within the interface.
5. Summary: denotes that the element provides summary information about the app, which is read automatically by VoiceOver when the app opens.
6. Updates frequently: signals that the element updates too often for VoiceOver to keep up, allowing VoiceOver to poll the element at appropriate intervals instead.
7. Not enabled: indicates that the element is temporarily disabled and can’t be interacted with.

There are also a couple of traits that can only be set programmatically, since they’re not available through the interface developer:

1. Starts media session: shows that, when activated, the element initiates a session that should cause VoiceOver to silence.
2. Adjustable: means that the element can be moved through a range of positions, or values, enabling VoiceOver to notify the user that repeated interaction with the element causes its value to change accordingly.

You can have a lot of fun creating apps, and Apple has made it easy to make them accessible out of the box. For inspiration, check out Papa Sangre.