Building VoiceOver Friendly iOS Apps

The VoiceOver feature is sometimes taken as synonymous with the broader term “Accessibility.” While this isn’t entirely accurate, it underscores the significance and popularity of the feature.

VoiceOver spans the entire Apple ecosystem, empowering users with visual impairments and exemplifying how technology can foster inclusivity. First introduced in 2009 with the iPod Shuffle and iPhone 3GS, VoiceOver has been in the picture for every iOS release ever since.

This is how Apple describes VoiceOver:

VoiceOver is an assistive technology that enables people to experience the interface on their devices without having to see the screen. People who are blind or have low vision depend on VoiceOver to provide auditory feedback while using their devices, but VoiceOver can be useful to people in a wide variety of contexts. For example, someone prone to motion sickness might choose to turn VoiceOver on while they’re in a moving vehicle. Learn more about testing your app with VoiceOver to make sure it works well for people who use this assistive technology.

This article delves into some nuances of crafting SwiftUI applications that are optimized for VoiceOver. But first, let’s understand how it works and what users expect when using this feature.

How VoiceOver Works

VoiceOver operates by reading aloud the elements on the screen, such as buttons, links, and text, enabling users to navigate through gestures and auditory feedback. Here’s a brief overview of how users interact with VoiceOver-enabled apps:

1. Gestures: VoiceOver introduces a set of unique gestures that allow users to navigate their device. For instance, a single tap will select an item, and a double-tap will activate it. Swiping left or right moves the focus to the previous or next item on the screen, respectively.

2. Focus: The focus is a concept in VoiceOver where a visual and auditory cursor highlights the item currently being described. Users can move the focus around the screen using gestures to hear descriptions of different elements.

3. Rotor: The rotor is an innovative virtual control introduced by VoiceOver, allowing users to adjust various settings and navigate through content more efficiently. By rotating two fingers on the screen, users can change the rotor settings to perform tasks like adjusting speech rate, browsing by headings, or selecting text.

4. Hints and Feedback: VoiceOver provides additional hints and feedback to assist users in understanding how to interact with different UI elements. For example, if a button requires a double-tap to activate, VoiceOver will announce this information to guide the user.

Understanding how VoiceOver works is crucial for developers aiming to create accessible iOS applications. By designing with VoiceOver in mind, you can ensure that your app is not only usable but also enjoyable for visually impaired users, thereby expanding your app’s reach and impact.

Best Practises for VoiceOver-Friendly SwiftUI Applications

Creating VoiceOver-friendly applications requires a mindful approach to design and development. Here are some general guidelines to help you make your SwiftUI apps more accessible:

1. Semantic Labeling: Ensure every interactive element has an appropriate accessibilityLabel. This label should describe the element’s purpose succinctly. For example, a button that submits a form should have a label like “Submit” or “Send”.

.accessibilityLabel("Submit Form")

2. Accessibility Traits: Use accessibilityTraits to inform VoiceOver about the behavior of UI elements. Traits such as .button, .link, .header, and .selected help VoiceOver convey the correct context to the user.

.accessibilityTraits(.button)

3. Accessibility Hints: Provide additional context with accessibilityHint to explain the action an element performs. For instance, a button can have a hint saying ”Sends the form data for processing”.

Button(action: {
    // Action
}) {
    Text("Submit")
}
.accessibilityLabel("Submit Form")
.accessibilityHint("Sends the form data for processing")
.accessibilityTraits(.button)

4. Group Related Elements: Use this feature to group related elements, allowing VoiceOver to treat them as a single unit. This is particularly useful for complex UI layouts. This works well for most cases, but not always. So you will need to test.

.accessibilityElement(children: .combine)

5. Readable Content: Ensure all text content is readable and concise. Avoid using abbreviations or jargon that might confuse the user.

Testing Your App with VoiceOver

Ensuring that your app is accessible requires thorough testing. This section will guide you through the tools and techniques for testing your app with VoiceOver.

Accessibility inspector icon from the Apple website

Tools and Techniques

1. VoiceOver on a Physical Device: Testing on a physical device provides the most accurate representation of how users will interact with your app. There’s nothing better and more accurate than running your new code with VoiceOver enabled and trying to use it.

• Enable VoiceOver: Go to Settings > Accessibility > VoiceOver.

• Navigate through your app: Pay close attention to how VoiceOver describes each element.

• Test various gestures: Ensure that all interactive elements are accessible and usable.

2. Accessibility Inspector: The Accessibility Inspector is a powerful tool available in Xcode that helps you audit the accessibility of your app.

• Open the Accessibility Inspector: From Xcode’s Developer Tools menu.

• Run your app: On the simulator or a connected device.

• Examine each UI element: Ensure it has appropriate labels, traits, and hints.

• Simulate VoiceOver interactions: See how your app responds to VoiceOver.

By using these tools and techniques, and incorporating real-world user feedback, you can ensure that your app provides a seamless and accessible experience for all users.

As always I hope you enjoyed the article and are inspired to start working on improving accessibility. I am always happy to receive your feedback. Cheers!

Just Eat Takeaway.com is hiring! Want to come to work with us? Apply today