Enhancing Accessibility in SwiftUI: Effective Strategies

Make your apps inclusive with simple steps!

This guide complements our journey in making SwiftUI apps more user-friendly and inclusive. If you're interested in SwiftUI development, don't miss out on my other works, such as the SwiftUI Fundamentals covered on my GitHub page.

Difficulty: Beginner | Easy | Normal | Challenging
This article has been developed using Xcode 15.0, and Swift 5.9

Terminology:

Accessibility: Refers to the design of products, devices, services, or environments for people with disabilities. SwiftUI: A framework by Apple for building user interfaces for all of its platforms. View Modifier: A function in SwiftUI that changes the view’s display or other properties.

The background

In SwiftUI, accessibility settings are typically configured using the built-in accessibility modifiers, which are applied directly to views.

The three main methods we might use are:

• setting accessibility properties directly on the view
• passing accessibility values through an initializer
• applying a custom modifier can either set accessibility from the outside, pass it in an initialiser or through a custom modifier.

There are more ways of doing this. I've also covered binding in this article because why not? In this case you can control the accessibility features of a view based on some state that exists outside the view

The techniques

External Accessibility Settings

This is the common way that accessibility is set on views in SwiftUI.

Sometimes, you want to modify a view's accessibility features from the outside. This method is particularly useful when accessibility attributes depend on external factors, such as user settings.

Text("A standard Text component")
    .accessibilityLabel(Text("This is standard accessibility"))

Accessibility through Initializers

Encapsulating accessibility settings within a view's initialization makes your code cleaner and more modular. Here's how you can pass accessibility values through a custom initializer:

InitializerAccessibleView(label: "Custom Message", hint: "Shows a message with custom accessibility settings")

struct InitializerAccessibleView: View {
    var label: String
    var hint: String

    init(label: String, hint: String) {
        self.label = label
        self.hint = hint
    }

    var body: some View {
        Text("Example Text")
            .accessibilityLabel(label)
            .accessibilityHint(hint)
    }
}

Custom Modifiers for Accessibility

SwiftUI allows you to create custom modifiers, which can be reused across different views. This approach is excellent for applying consistent accessibility settings:

struct AccessibilityModifier: ViewModifier {
    var label: String
    var hint: String

    func body(content: Content) -> some View {
        content
            .accessibilityLabel(label)
            .accessibilityHint(hint)
    }
}

extension View {
    func accessibilitySettings(label: String, hint: String) -> some View {
        self.modifier(AccessibilityModifier(label: label, hint: hint))
    }
}

Text("Adjustable Text")
    .accessibilitySettings(label: "Adjustable", hint: "This text can be adjusted")

Crafting Custom Accessibility Labels in SwiftUI

SwiftUI's flexibility allows us to craft more accessible apps by customizing components according to our needs. One such customization involves creating a view that allows dynamic setting of accessibility labels, enhancing the app's usability for VoiceOver users.

This means we can decouple the visual representation from the accessibility layer - meaning that for components in a design library you could have a default accessibility label that is overridden from the outside of the component.

Let's delve into a practical example using a custom SwiftUI view named MyText.

Defining the view 'MyText'

The MyText view encapsulates text display functionality but with an added twist: it allows us to specify an accessibility label different from the displayed text. This can be particularly useful in situations where the displayed text might not fully convey the necessary context or information for users relying on screen readers.

Here's the code for our MyText struct:

struct MyText: View {
    var text: String
    private var accessibilityLabel: Text?
    
    init(text: String) {
        self.text = text
    }
    
    var body: some View {
        Text(text)
            .accessibilityLabel(accessibilityLabel ?? Text(text))
    }
    
    func accessibilityLabel(_ label: Text) -> some View {
        var copy = self
        copy.accessibilityLabel = label
        return copy
    }
}

MyText(text: "My Text")
    .accessibilityLabel(Text("this is my text"))

Conclusion

Understanding and implementing accessibility in SwiftUI allows developers to create apps that are not only inclusive but also compliant with modern standards. By using external settings, initializers, and custom modifiers, you can ensure your SwiftUI views are accessible to all users. Remember, an app is only as good as its accessibility; by following these strategies, your SwiftUI apps will be more usable and appreciated by a broader audience.

Thanks for reading!

If you've any questions, comments or suggestions please hit me up on Twitter