Quick guide on accessibility for SwiftUI

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.

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:

• accessibilityLabel(_:) to describe the contents of a view.
• accessibilityValue(_:) to describe the value that the view contains, if it is different from the view's accessibility label.
• accessibilityHint(_:) to describe what happens after performing the view’s action.
• accessibilityAction(_:_:) to add a custom accessibility action to the view.
• accessibilityAddTraits(_:) to add a trait like .isButton or .isSearchField to the view.
• accessibilityRemoveTraits(_:) to remove a trait from the view.
• accessibilityHidden(_:) to specify whether to hide the view from accessibility features.
• accessibilityElement(children:) to create a new accessibility element and influence its child views behaviour, for example to combine multiple views into one accessibility element.

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.

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.