Improve the VoiceOver experience in your app – Discover – Apple Developer

Improve the VoiceOver experience in your app - Discover - Apple Developer

VoiceOver is an essential part of helping people navigate without having to view their screen. Take this article, for example: You may read this text visually; However, if you’re a developer using VoiceOver, you’ll hear this paragraph (and the rest of the article) talking to you, along with verbal descriptions of important elements you may need to know. And if you’ve opened this article in the Developer app, you’ll also hear about navigation elements in the app.

Whether you use VoiceOver personally or not, here you can put yourself in the mindset of those who do to design a standout experience.

Control accessibility elements in your app

When someone turns on VoiceOver on iOS, iPadOS, watchOS or tvOS, it starts describing all the labeled elements on the screen. To decide what to read, VoiceOver looks for accessibility elements – individual or grouped visual elements within a view – and whether someone can interact with these elements. Since it describes an element, VoiceOver also highlights it on the screen by displaying a black rectangle around the content.

Tip: Explore VoiceOver on your own device

While Xcode offers several tools to test the accessibility of your app, you can learn a lot about VoiceOver and how different apps have implemented it by taking a test drive on your own iPhone, iPad, Mac, Apple Watch or Apple TV. You can enable VoiceOver in the Settings or System Preferences app on your Mac, and if you want easy access to the feature, you can even enable a hardware-based accessibility shortcut.

VoiceOver also adds a few specific multitouch gestures and taps to help people navigate their device. Swiping to the right anywhere on the screen moves to the next element in the view, while swiping to the left moves to the previous element. Every time VoiceOver lands on a new element, it speaks details such as the accessibility label and value aloud, along with hints or properties if the element has it.

Alternatively, people can tap directly on a visual element to navigate to it. If it falls within the confines of an accessibility element, VoiceOver will focus on it. Otherwise, VoiceOver will emit a “boink” sound.

By default, all standard UIKit controls are accessibility elements. To mark a custom control or view as an accessibility element, you can use isAccessibilityElement:

var isAccessibilityElement: Bool { get set }

More information on accessibility elements>

Group and decode accessibility elements

When you navigate by swiping, VoiceOver visits each element in order of appearance on the screen. That said, this isn’t always the most efficient way for someone to record information: If your app has too many accessibility elements, it can take a long time for someone to understand it. Instead, look for opportunities to group your accessibility elements and create a simplified hierarchy.

When you group your accessibility elements, VoiceOver describes them together, which can speed up navigation through your app. For example, you can group a view that contains a title, text, and a timestamp label, such as Health’s Heart Rate title, heart rate reading, and last reading time.

The Health app uses grouped elements in the outline view to provide a streamlined experience to people using VoiceOver.

This also helps provide context to someone using VoiceOver who would otherwise be present in a visual interface: by grouping them together and having them read together, people know that the time and text are linked to the title, rather than three unrelated items.

Add custom actions

You can assign custom actions for each accessibility element, which provides additional functionality. For example, if you’re using Mail without VoiceOver turned on, you can tap a message in the inbox to view it, but you can also swipe left or right on an individual message to access other features such as delete, mark, or move a message. With custom actions, people using VoiceOver can access those same functions in a different way: when VoiceOver focuses on the message element, it hints the “Available actions: swipe up or down to select a custom action.” Once you have arrived at the desired action, you can double-tap to perform it.

Fun fact: When you implement leading or following moves into the table in your app, you automatically get VoiceOver actions for these buttons in your project.

Custom actions are very powerful when combined with grouped elements and can help simplify your navigable hierarchy. For example, if you have an accessibility view with multiple buttons as sub-views, VoiceOver does not always allow you to navigate to those buttons. While it can be tempting to split this into smaller elements and make the buds individually focusable, this can create clutter.

We highly recommend using custom actions to display these button actions so that you can keep the element’s organization while still providing complete control to someone using VoiceOver. Carefully grouping your elements and adding custom actions will provide a better overall navigation experience and make your app much more enjoyable for people who rely on VoiceOver.

To a UIAccessibilityCustomAction you can use on your accessibility elements accessibilityCustomActions:

var accessibilityCustomActions: [UIAccessibilityCustomAction]? { get set }

More information about custom actions>

Changes in the flag layout

Your app can visually change the layout to indicate the result of an action or event. In the shortcuts app, for example, tap the + button to bring up components that help someone build a shortcut. For people using VoiceOver, you can use the ‘screen changed’ or ‘layout changed’ notifications to focus on the new elements.

The shortcuts app will play a ‘screen changed’ notification after someone selects the + button.

It is best to use ‘layout changed’ only if there is a major change in your interface, because focusing too often can confuse people and lose context in your app.

To post an accessibility notice, you can use post(notification:argument:) On UIAccessibility:

static func post(notification: UIAccessibility.Notification, 
        argument: Any?)

More information about accessibility notifications>

Next steps

Making these improvements in your app not only unlocks better VoiceOver support, but also lays the foundation for our other assistive technologies such as Switch Control and Full Keyboard Access. So go exploring and make your app’s accessibility experience great because technology is most powerful when it empowers everyone.


Learn more about VoiceOver gestures>

Check out “Writing great accessibility labels”>

View “Making apps more accessible with custom actions”>

Leave a Reply

Your email address will not be published. Required fields are marked *