SwiftUI: Default Accessibility

SwiftUI: Default Accessibility

Apple’s own apps work well with VoiceOver: All the words make sense, and you get enough information to use the app without looking at the screen. How do you make sure this happens with your apps? One thing that will help a lot is using SwiftUI.

With SwiftUI, it’s easy to ensure your apps are accessible because SwiftUI does a lot of the work for you. SwiftUI elements are accessible by default:

• SwiftUI generates accessibility elements for standard and custom SwiftUI elements like Button, Text, and Toggle.
• SwiftUI views automatically get labels and actions, and, thanks to declarative layout, their VoiceOver order matches the order they appear on the screen.
• SwiftUI tracks changes to views and sends notifications to keep VoiceOver up to date on visual changes in your app.
• SwiftUI elements support Dynamic Type: Text with font sizes like .title, .caption, etc. will automatically adjust to the user’s preferred reading size.

Accessibility Attributes

When a user of your app turns on an iOS assistive technology like VoiceOver, they’re actually interacting with an accessible user interface that iOS creates for your app. This accessible UI tells a VoiceOver user about the accessible elements of your UI — what they are and how to use them.

Every accessible UI element has these two attributes:

• Frame: The element’s location and size in its CGRect structure.
• Label: The default value of an element’s label — the label, name, or text used to create the element. Apple’s programming guide provides guidelines for creating labels and hints.

Depending on its nature, a UI element might have one or more of these three attributes:

• Traits: An element can have one or more traits describing its type or state. The list of traits includes isButton, isModal, isSelected, and updatesFrequently. SwiftUI views have default traits. For example, a Trait of Toggle is Button.
• Value: A UI element has a value if its content can change.
• Hint: This attribute is optional. If the user doesn’t do anything after VoiceOver reads a label, VoiceOver reads the hint.

Accessibility Inspector

Running your app on a device is the best way to check its VoiceOver performance, but Xcode provides a tool to help you get a good idea of what VoiceOver will read out. Under the right conditions, Xcode’s Accessibility Inspector, to the left of the Attributes Inspector, shows you an element’s accessibility attributes.

The conditions are:

• A preview of the view appears in the canvas. This works better if the run destination is a simulator, not a device.
• The canvas is in Selectable mode.
• The element is a standard SwiftUI view.
• You’re holding your breath and have crossed all your fingers and toes. :] Sometimes, it helps to click another inspector and then re-select the Accessibility Inspector.

Since most of us don’t have a Vision Pro device handy for checking VoiceOver performance, the Accessibility Inspector is an essential tool. So next, you’ll take a quick look at Xcode’s Accessibility Inspector and learn a few more VoiceOver tricks.