Control Activation Points for Accessibility in SwiftUI

Written by Team Kodeco

Accessibility in SwiftUI goes beyond just labels and values; it provides deeper controls that are valuable for people who use assistive technologies like VoiceOver. One such control is the ability to specify the activation point for a view. The activation point is the location where assistive technologies initiate gestures.

Let’s consider a SwiftUI view with an image that expands on a tap action. For visually impaired users who use VoiceOver, you want to make sure that even when the image is expanded, the activation point remains consistent, providing a predictable user experience.

Here’s an example of how to use the accessibilityActivationPoint modifier:

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

  var body: some View {
    VStack {
      Image(systemName: "sun.max.fill")
        .resizable()
        .frame(width: isExpanded ? 200 : 100, height: isExpanded ? 200 : 100)
        .onTapGesture {
          withAnimation {
            isExpanded.toggle()
          }
        }
        .accessibilityActivationPoint(CGPoint(x: 100, y: 100))
    }
  }
}

Here’s what your preview should look like:

In this SwiftUI view, you have a simple image of a sun that expands from 100x100 to 200x200 pixels when tapped. When using VoiceOver, the activation point is where the user double-taps to activate the view.

By using the .accessibilityActivationPoint modifier, you’re able to specify a consistent point (x: 100, y: 100) for the activation, regardless of the image’s current size. This provides a consistent experience for VoiceOver users.

In this way, SwiftUI gives us control over the fine-grained details of accessibility, allowing you to build apps that provide a great user experience for everyone.