Add VoiceOver to SwiftUI Views

Written by Team Kodeco

Accessibility is paramount in every app development process. It ensures that the application is user-friendly for all users, including those with physical impairments. A key accessibility feature in iOS is VoiceOver, a screen-reading tool providing audio descriptions of onscreen elements. In this chapter, you will learn how to integrate VoiceOver support in your SwiftUI app effectively.

When a user activates VoiceOver on their device, it audibly reads the screen’s content, thus aiding visually impaired users to understand the display’s content. Enhancing this feature in your SwiftUI views using the accessibilityLabel modifier substantially improves the usability of your app.

Consider a simple SwiftUI view with a button. You can add a VoiceOver label to describe the button’s action like so:

struct ContentView: View {
  var body: some View {
    VStack {
      Button(action: {
        // Perform an action when the button is pressed
      }) {
        Text("Tap Me")
      }
      .accessibilityLabel(Text("Press the button to execute an action"))
    }
  }
}

In this piece of code, the accessibility label for the button is “Press the button to execute an action”. This label is read aloud by VoiceOver when the user interacts with the button, providing a clear explanation of the button’s purpose.

Moreover, you can make your accessibility labels more descriptive and context-aware by leveraging SwiftUI’s String interpolation. For instance, if you have a toggle switch for the app’s Dark Mode:

struct ContentView: View {
  @State private var isDarkMode = false

  var body: some View {
    VStack {
      Button(action: {
        // Toggle simulated Dark Mode
        isDarkMode.toggle()
      }) {
        Image(systemName: isDarkMode ? "sun.max.fill" : "moon.fill")
          .frame(maxWidth: .infinity, maxHeight: .infinity)
          .background(isDarkMode ? Color.black : Color.white)
          .foregroundColor(isDarkMode ? Color.white : Color.black)
          .cornerRadius(50)
          .edgesIgnoringSafeArea(.all)
      }
      .accessibilityLabel(Text("Toggle dark mode. Currently, Dark Mode is \(isDarkMode ? "enabled" : "disabled")."))
    }
  }
}

To see your VoiceOver labels, build and run in the simulator. Then, go to Xcode ▸ Open Developer Tool ▸ Accessibility Inspector, setting the Accessibility Inspector’s target to either Simulator or All processes running on your development machine. You should see the following:

Note: While the Accessibility Inspector is helpful for testing the accessibility of your app during development, it is no substitute for testing your app with VoiceOver on a physical device.

In this example, the accessibilityLabel modifier employs string interpolation to dynamically update the VoiceOver label based on the current state of the Dark Mode setting.

In conclusion, integrating VoiceOver support into your SwiftUI views significantly enhances your app’s accessibility for visually impaired users. By providing clear, dynamic, and descriptive labels, you empower all users to effectively navigate and interact with your app.