iOS Accessibility in SwiftUI Tutorial Part 2: Organizing

Using VoiceOver on a Device: Sliders

You’ll need a couple more gestures for ColorPicker:

• Navigate to a slider, then swipe up or down with one finger to increase or decrease its value.
• Alternative: Double-tap and hold the slider until you hear three rising tones, then drag the slider in the usual way. Double-tap-and-hold also works for other standard gestures. When you lift your finger, VoiceOver gestures resume.
• To dismiss a modal sheet or return to the previous screen: Two-finger scrub — make a “z” by moving two fingers back and forth three times quickly.

Triple-click the side button to turn on VoiceOver on your device.

Swipe right until you reach a slider: VoiceOver says Swipe up or down with one finger to adjust the value. So swipe up or down, then listen to VoiceOver tell you the new color and ratio values.

To try out the double-tap-hold-then-slide gesture, rotate your device to landscape orientation — in portrait orientation, the sliders are too short for this gesture to work effectively. This standard slider gesture is probably less useful to a user who’s relying on VoiceOver, as the ratio values change faster than VoiceOver can speak them.

Use the two-finger scrub to return to the list view, then turn off VoiceOver.

Headings for Faster Navigation

ColorPicker has three sections:

1. The contrast view with the contrast ratio in the text color on the background color.
2. Red, Green and Blue sliders to change the Text color.
3. Red, Green and Blue sliders to change the Background color.

It’s easy for a sighted user to move from one slider to any other slider, but a VoiceOver user has to swipe through all the elements in between: Four right swipes to move from Text Red to Background Red.

The tree is a flat hierarchy:

The solution is to organize your elements under headings.

Rotating the VoiceOver Rotor

VoiceOver provides an on-screen rotor that lets a user choose to navigate between headings.

To see this in action, open Settings▸Accessibility on your device, then triple-click the side button to turn on VoiceOver. Rotate two fingers on your screen — pretend you’re turning a dial. You’ll see a rotor, and VoiceOver will say the first rotor option. Rotate until VoiceOver says Headings, then lift your fingers. (You can lift your fingers in between rotations.) Flick down to select the next heading, flick up to select the previous heading. Swipe right to move to the first item in the group.

Triple-click the side button to turn off VoiceOver.

Creating Headings

You’ve already seen that a NavigationView title is automatically a Header. To take advantage of the VoiceOver rotor, you’ll set up your own Header elements for ColorPicker: the contrast ratio Text and the Text and Background labels above the slider sets.

In ColorPicker.swift, add this modifier to the ZStack, and to the Text elements in the two VStacks.

.accessibility(addTraits: .isHeader)

Build and run the app on your device. Navigate to a detail view, then triple-click the side button to turn on VoiceOver.

You’ve already set VoiceOver to navigate between Headings, so flick down to select the next heading. Swipe right to select the red slider. Unfortunately, the slider also uses flick up/down, to change its value, so you must swipe-left to return to the heading, then flick down or up to move to the next or previous heading.

This is still a big improvement for your VoiceOver users to navigate your app: Congratulations! With all these tools in your toolbox, you’ll be an accessibility ninja in no time!

Where to Go From Here?

You can download the completed version of the project using the Download Materials button at the top or bottom of this tutorial.

You’ve learned a lot more about SwiftUI accessibility in this article. Here’s what you’ve done:

• Modified your app’s accessibility tree to improve VoiceOver information and navigation.
• Improved the accessibility of a complex SwiftUI control.

Here are some links for further exploration:

• Apple’s Color and Contrast HIG
• WWDC 2019 Accessibility videos
• Apple HIG for accessibility
• Learn VoiceOver gestures on iPhone

Continue to Part 3, to learn how to adapt your app to some common user accessibility settings.

We hope you enjoyed this article. If you have any questions or comments, please join the forum discussion below!