Logo for tanaschita.com

Quick guide on accessibility for SwiftUI

Learn how to use different accessibility modifiers in SwiftUI.

06 Jun 2022 · 4 min read

Making an app accessible means improving it for users who may have specific needs. For example if a user turns on an iOS assistive technology like VoiceOver, we want to make sure that the user can experience the app without having to see the screen.

When it comes to accessibility in iOS, the UIKit and SwiftUI frameworks already do most of the work for us. For views like navigation views, lists, text fields, sliders, buttons etc., they provide accessibility labels and values where possible.

There are still cases though where we might need to do some extra work to improve the user experience. For example if we use views with custom state, images, image-only buttons etc.

Let's directly jump into a small example.

Improving the accessibility of an image button

When using buttons with titles, SwiftUI automatically sets the correct accessibility values for us.

Button("Cancel", action: {
// Cancel button action
})

In this case, we don't need to do any additional work. VoiceOver will read "Cancel. Button" to the user.

However, things are different for image-only buttons. In this case, SwiftUI still knows that it is a button but it doesn't know which accessibility label to set. VoiceOver would simply read "Button" which is not very useful for a user who can't see the image.

In this case, we can improve accessibility by using the accessibility modifier accessibilityLabel(_:).

Button("", action: {
// Favorites button action
})
.buttonStyle(ImageButtonStyle(systemImage: "heart"))
.accessibilityLabel("Favorites")

With that set, VoiceOver will give a more usefull information by reading "Favorites. Button".

Besides accessibilityLabel(_:), SwiftUI provides other accessibility modifiers to improve accessibility.

Image of books
News from tanaschita.com: I'm now offering sponsorship
By publishing a new article on different iOS topics every week, tanaschita.com is constantly growing in the developer community and may provide a great audience for you as a sponsor. Click here to learn more.

Commonly used accessibility modifiers

Some of the commonly used accessibility modifiers are:

To figure out which of accessibility values are already set and which we may need to add, Xcode provides a handy tool, the Accessibility Inspector.

Accessibility Inspector

To open the Accessibility Inspector, select Xcode > Open Developer Tool > Accessibility Inspector in Xcode's menu.

We can use its navigation buttons to go through different view elements and have them read to us. This way, we can check if the accessibility values provide a good user experience.

Accessibility Inspector.
Accessibility Inspector.

It's a helpful tool during development, but doesn't replace testing accessibility with VoiceOver on a real device. To learn how to use VoiceOver, check out this guide on VoiceOver gestures for iOS (coming soon).

The Accessibility Inspector also shows us accessibility identifiers which can be very helpful when writing UI tests.

Newsletter

Receive a monthly newsletter about the latest articles and tips.

Image of a reading marmot

Related tags

Written by

Articles with related topics

Latest articles and tips