Apr 22, 2024 5 min read

iOS Accessibility Basics with VoiceOver

Voice Over is an accessibility feature that reads aloud the items that appears on the device screen. It helps your users to navigate and interact with your app by describing its content and giving useful context about each element

Turn on VoiceOver

Can be turned on in Settings -> Accessibility -> Voice Over

While testing it's convenient to turn it on/off either with

"Hey Siri, turn Voice Over off/on"
or with Accessibility Shortcut on iOS

Accessibility Element, Label, Identifier

By default, UIKit already helps us leverage a lot of the Voice Over functionalities.

Accessibility Element Flag – isAccessibilityElement

If you use standard UIKit control like UIButton, UILabelor UITextfield, accessibility is already enabled by default since isAccessibilityElement is set to true.

If you set text on your UIButton without touching any of the accessibility elements, Voice Over will read aloud that particular text to the user.

myButton.text = "This text will be read out loud to the user"

Accessibility Label

accessibilityLabel is used for the case if no text is set or you are dealing with something textless like UIImage

myButton.accessibilityLabel = "This is what the user will hear"

Accessibility Identifier

If app supports localization, labels should be localized to different languages.

In that caseaccessibilityIdentifier can ensure you have a standard way to access that element on screen.

This is particularly useful if you have any user interface automation like UI tests

myButton.accessibilityLabel = "This is still what is read out loud to the user"
myButton.accessibilityIdentifier = "Helps access element for example with UI tests"

Accessibility Traits

UIAccessibilityTraits traits allow to add more context to the UI elements.

none
button
link
image
search field
toggle
keyboard key
static text
header (divides content into sections, such as the title of a navigation bar)
tabbar
summary (provides summary information when the app starts.)
selected (element is currently in a selected state.)
notEnabled (element isn't in an enabled state and doesn't respond to user interaction.)
adjustable (element allows continuous adjustment through a range of values)
updatesFrequently (element frequently updates its label or value.)
causesPageTurn (element causes an automatic page turn when VoiceOver finishes reading the text within it.)
playsSound (element plays its own sound when the user activates it.)
startsMediaSession (element starts a media session when the user activates it)
Supports Zoom (element supports zooming in and out on its content.)

Accessibility Hints

AccessibilityHint gives supplemental information on actions that can be performed when the label isn’t self-explanatory. The label and the traits are announced first and after a short pause, the accessibility hint will be spoken out loud.

The default value for this property is nil unless the element is a UIKit control, in which case, the value is a system-provided hint that derives from the type of control.

An accessibility hint helps users understand what happens when they perform an action on the accessibility element when that result isn't obvious from the accessibility label.

For example, if you provide an Add button in your app, the button’s accessibility label helps users understand that tapping the button adds value. If, however, your app allows users to play a song by tapping its title in a list of song titles, the accessibility label for the list row doesn't tell users that. To help an assistive app provide this information to users with disabilities, an appropriate hint for the list row is “Plays the song.”

Follow these guidelines to create a hint for an accessibility element:

Begin with a verb that explains the results of the action in a very brief phrase, like “Plays the song” or “Purchases the item.”
Avoid beginning the phrase with the imperative form of a verb because that can make the hint sound like a command. For example, don't create hints like “Play the song” or “Purchase the item.”
Don’t include the action type in the hint. For example, don't create hints like “Tap to play the song” or “Tapping plays the song.”
Don’t include the control or view type in the hint. For example, don't create hints like “Plays the song in the row” or “Button that adds a contact name.”

Accessibility Value

AccessibilityValue

The value is a localized string that contains the current value of an element.

For example, the value of a slider might be 9.5 or 35% and the value of a text field is the text it contains.

Use the value property only when an accessibility element can have a value that is not represented by its label.

For example, a volume slider’s label might be “Volume,” but its value is the current volume level. In this case, it’s not enough for users to know the identity of the slider, because they also need to know its current value.The label of a Save button, on the other hand, tells users everything they need to know about the control; supplying the word “Save” as a value would be unnecessary and confusing.

Accessibility for Subviews

Any children's UI elements under the view need to have the accessibility element set to false.

If the parent view is being read with VoiceOver to the user, the children don’t have to be accessible since all the information is already read by the parent.

VoiceOver navigation capabilities:

VoiceOver rotor to navigate headers, containers, and landmarks.
By swiping left or right to navigate each element at a time,
By pointing a finger directly on the screen.

To facilitate navigation in your app, it could be necessary to

group elements together with UIAccessibilityElement
or by implementing UIAccessibilityActions
or by implementing custom actions.

Testing Tips & Caveats

For example, if we use our shopping app, a shopping item cell could contain a lot of information like a title, a description, a price, the colors, the fabric, the availability, an image, etc. A problematic experience could be that the user needs to swipe through all information in that item cell to be read out loud before reaching the next shopping item. If this is the case, then extra steps are needed to ensure the proper level of detail.

Screen Curtain

Test your app like a VoiceOver user would – navigate it with the screen curtain..

This feature will make your iPhone screen dark, making it possible for you to test navigation in your app through VoiceOver without relying on any visual cues.

On iPhone, iPad, iPod touch:

Wake your device.
With three fingers, quickly triple-tap the screen. If the Zoom feature is in use with VoiceOver, tap the screen four times with three fingers.

If you use a bluetooth keyboard with your device, press Control-Option-Shift-S to turn Screen Curtain on or off.

On Apple Watch

Use your iPhone to turn on Screen Curtain for your Apple Watch:

On your iPhone, open the Apple Watch app and go to My Watch.
Tap Accessibility > VoiceOver > Screen Curtain. This setting keeps Screen Curtain active whenever VoiceOver is on.
To turn Screen Curtain off, repeat these steps.

Enable it and try to do some tasks in your app.

Are you able to access all items and actions?
Were you lost by trying to do those tasks?
What could have helped you?