Image from Google search

AccessibilityFocusState in SwiftUI

What is AccessibilityFocusState

In SwiftUI, AccessibilityFocusState is a property wrapper used for managing the focus state of accessibility elements in your user interface. It's part of the accessibility features provided by SwiftUI to ensure that special users can interact with your app effectively.
This property wrapper enables developers to more effectively manage and respond to the focus state of accessibility features such as VoiceOver, thereby creating application interfaces that are easier to navigate and use for all users.

Usage: We can use AccessibilityFocusState to manage the focus state of accessibility elements within your SwiftUI views. By wrapping an accessibility element’s focus state with AccessibilityFocusState, you can control when an element gains or loses focus.

Example:

struct AccessibilityFocusStateBasicView: View {
    // 1. Create focus state
    @AccessibilityFocusState(for: .switchControl) var isEmailFocused: Bool
    @State private var emailAddress = ""

    var body: some View {
        VStack {
            TextField("email", text: $emailAddress, prompt: Text("email"))
                .accessibilityFocused($isEmailFocused) // 2. Set accessibility Focus
            
            Button("Login") {
                // loginAction() : Call login
            }
        }
        .onChange(of: isEmailFocused, { oldValue, newValue in
            print(newValue)
        })
    }
}

In the above basic example first, we create an AccessibilityFocusState and add it to TextField.

Accessibility Mode Type: Accessibility Mode can be configured as needed to activate only in specific accessibility modes, such as .switchControl or .voiceOver. By default, it supports all accessibility features.

@AccessibilityFocusState(for: .switchControl) var isEmailFocused: Bool

OR

@AccessibilityFocusState(for: .voiceOver) var isEmailFocused: Bool

Handling more than one element on Screen: We have more than one element on the screen, and want to move the focus between them.

We can extend our login example by adding a new password field before sending it to a server for login requests. Now we can have

struct AccessibilityFocusStateMultipleElement: View {
    @State private var emailAddress = ""
    @State private var password = ""
    var body: some View {
        VStack {
            TextField("email", text: $emailAddress, prompt: Text("email"))
            TextField("password", text: $password, prompt: Text("password")) // New password field

            Button("Login") {
                // loginAction() : Call login
            }
        }
    }
}

To add accessibility, SwiftUI provides a way to define our focusable fields via an enum (say FocusField) which confirm Hashable protocol

enum FocusField: Hashable {
    case emailAddressField
    case passwordField
}

And we can have our AccessibilityFocusStateMultipleElement.swift as below

struct AccessibilityFocusStateMultipleElement: View {
    @State private var emailAddress = ""
    @State private var password = ""
    @AccessibilityFocusState private var focusField: FocusField?
    var body: some View {
        VStack {
            TextField("email", text: $emailAddress, prompt: Text("email"))
                    .accessibilityFocused($focusField, equals: .emailAddressField) //Set to emailAddressField
            TextField("password", text: $password, prompt: Text("password")) 
                    .accessibilityFocused($focusField, equals: .passwordField)//Set to passwordField
            Button("Login") {
                // loginAction() : Call login
            }
        }
    }
}

Here we can add more features on user entry validation and even guide users on invalid field entry.

After adding validation on loginAction method, AccessibilityFocusStateMultipleElement.swift look as below

struct AccessibilityFocusStateMultipleElement: View {
    @State private var emailAddress = ""
    @State private var password = ""
    @AccessibilityFocusState private var focusField: FocusField?
    var body: some View {
        VStack {
            TextField("email", text: $emailAddress, prompt: Text("email"))
                    .accessibilityFocused($focusField, equals: .emailAddressField) //Set to emailAddress
            TextField("password", text: $password, prompt: Text("password"))
                    .accessibilityFocused($focusField, equals: .passwordField)//Set to password
            Button("Login") {
                loginAction()
            }
        }
    }
}

extension AccessibilityFocusStateMultipleElement {
    private func loginAction() {
        if emailAddress.isEmpty {
            focusField = .emailAddressField // Highlight email address field on wrong entry
         } else if password.isEmpty {
             focusField = .passwordField // Highlight password field on invalid entry
         } else {
             focusField = nil
             // send request to server for login
         }
    }
}

Testing of Accessibility: For accessibility users, focus management features in the app should be tested with accessibility tools such as VoiceOver to ensure they work as expected.

Final Thoughts:

When using AccessibilityFocusState in SwiftUI, it’s important to consider a few precautions to ensure that your app remains accessible and usable for all users, including those with disabilities. Here are some precautions to keep in mind:

1. Avoid Overusing Focus: While controlling the focus state of accessibility elements can be helpful in certain situations, overusing it can make the user experience confusing or frustrating for users who rely on assistive technologies. Only use AccessibilityFocusState when it enhances the accessibility of your app.
2. Maintain Logical Focus Order: Ensure that the focus order of your accessibility elements follows a logical sequence that makes sense for users navigating your app with assistive technologies. Consider the natural flow of your user interface and adjust the focus state accordingly.
3. Test with Assistive Technologies: Always test your app with assistive technologies such as VoiceOver on iOS to ensure that the focus behaviour is consistent and intuitive. This will help you identify any issues or usability problems related to focus management.
4. Provide Clear Feedback: When changing the focus state of accessibility elements, provide clear auditory or visual feedback to indicate to users that the focus has shifted. This feedback helps users understand which element is currently selected and how they can interact with it.
5. Consider Contextual Focus: In some cases, it may be appropriate to dynamically adjust the focus state based on the context of the user’s interaction. For example, when presenting a modal dialogue, you might want to shift the focus to the dialogue’s content to ensure that it’s accessible.
6. Document Accessibility Features: If you’re implementing custom focus behaviour using AccessibilityFocusState, consider documenting these features in your app’s accessibility documentation or user guides. This helps users understand how to navigate and interact with your app using assistive technologies.

Happy Coding with AccessibilityFocusState 🎉