Describe SwiftUI View Values for Accessibility

Written by Team Kodeco

The accessibility features built into SwiftUI make it possible to develop applications that are usable by a broad range of individuals, including those with visual impairments or motor difficulties. One such feature is the ability to describe the value contained within a SwiftUI view. This can be crucial when working with dynamic UI elements such as sliders or switches, where the value can change based on user interaction.

When a user with VoiceOver enabled interacts with your app, SwiftUI will automatically read out the label of the control. However, in some cases, you might need to provide additional information. This is where the accessibilityValue modifier comes into play.

The accessibilityValue modifier adds a textual description of the current value that a view contains. This description is used by assistive technologies like VoiceOver to inform the user about the value of the view. It is recommended to use this modifier if the value represented by a view is different than the view’s label.

Here’s an example of how you might use accessibilityValue with a Slider view:

struct ContentView: View {
  @State private var volumeLevel: Double = 50

  var body: some View {
    VStack {
      Slider(value: $volumeLevel, in: 0...100, step: 1)
        .padding()
        .accessibilityLabel(Text("Volume"))
        .accessibilityValue(Text("\(Int(volumeLevel)) percent"))

      Text("Volume: \(Int(volumeLevel))%")
    }
    .padding()
  }
}

Your preview should look like this, although you’ll need to build onto a device and use the Accessibility Inspector to see the accessibility label and value:

To see the label and value contents, build the app onto a device, then launch the Accessibility Inspector. Select the device as its target and interact with the slider. You should see something like this:

In this example, the Slider view has an accessibility label of “Volume”. Additionally, we use accessibilityValue to provide a description of the slider’s current value, making it clear to the user what the slider’s current value is. This information will be read aloud by VoiceOver when the user interacts with the slider.

Remember, creating an accessible app is not just about compliance, but also about ensuring your app can be used by everyone. By providing clear and useful accessibility value descriptions, you enable users with disabilities to interact with your app effectively.