Make SwiftUI Images Accessible with Descriptions

Written by Team Kodeco

When developing interfaces, it’s crucial to ensure that all users, regardless of abilities, can access the interface’s content. For users with visual impairments, images can be accompanied by a description that VoiceOver, an Apple screen-reading technology, can read out loud to provide context.

To make an image accessible, you’ll need to provide a description of the image’s contents using the accessibilityLabel and accessibilityHint modifiers. Here’s an example:

struct ContentView: View {
  var body: some View {
    Image(systemName: "photo")
      .resizable()
      .scaledToFit()
      .frame(width: 200, height: 200)
      .accessibilityLabel(Text("Mountain Landscape"))
      .accessibilityHint(Text("A beautiful mountain landscape with a serene waterfall."))
  }
}

To open the Accessibility Inspector, go to Xcode ▸ Open Developer Tool ▸ Accessibility Inspector, then set your build machine and Simulator (or All Processes) as its target. Select the image and you should see the following:

In the example above, you add the accessibilityLabel modifier to the image and provide a label with a textual description of the image’s contents. When VoiceOver is enabled, it will automatically read the contents of this label when the user focuses on the image. This helps users with visual impairments understand the context of the image.

Because you added the accessibilityHint modifier, VoiceOver users will hear the additional hint, “A beautiful mountain landscape with a serene waterfall”. accessibilityHint is useful when you want to provide a more detailed description of the image’s contents for VoiceOver users, while still displaying a shorter label for sighted users.

By providing accessibility descriptions for images in SwiftUI, you can ensure that all users can access the content of your interface effectively, even those with visual impairments.