Before we dive into the details of how to improve the accessibility of your (SwiftUI-based) iOS apps, we should see what SwiftUI does for us out-of-the-box. If you are just going to have a few Text() elements and a button, you might already have a good user experience for users using assitive technology.

Default Behavior

The basic UI elements in SwiftUI are accessible by default. If you create your app just as a series of Text, Button, Toggle or other default elements, it will be quite accessible by default. (And yes, I know that it is unlikely 🤷) Let's look at this example:

struct ContentView: View {
    @State private var useDiscount: Bool = false

    var price: Int {
        useDiscount ? 299 : 349
    }
    var body: some View {
        VStack {
            Text("Awesome product")
                .font(.largeTitle)
            Spacer()
            Text("This product is just perfect. It's small, pretty, and very expensive.")
            Spacer()
            Toggle(isOn: $useDiscount) {
                Text("Use Discount")
            }
            Text("Price: $\(price)")
                .font(.title)
            Spacer()
            Button {
                // TODO start checkout
            } label: {
                Text("Buy now")
            }
            Spacer()
        }
        .padding()
    }
}

It's a simplified version of a product detail page. It shows a product name at the top, a short description and the price. There is also a toggle to activate a discount and a button that will (sometime in the future) trigger the checkout process. Super simple. I threw it all in a VStack and added a couple of Spacers.

If you enable VoiceOver and open this app, you will hear this:

• "Awesome Product"

• *swipe right*

• "This product is just perfect. It's small, pretty, and very expensive."

• *swipe right*

• "Use Discount, switch button, off, double tap to toggle the setting"

• *double tap*

• "On"

• *swipe right*

• "Price: 299 Dollars"

• *swipe right*

• "Buy now, button"

That's it. There is no real difference between the user experience of blind users compared to users that can read the screen. And once again: Yes, it is an over-simplification. I know. But it's just here to show you, that simple screens will be somehow accessible by default.

One more thing

And there is one more thing in this sample app. In the beginning, I told you that the basic UI elements are accessible by default. So the "screen reader" (there is a reason that I put that in quotes. I will get to that later) will read out the important information about every element. But is it really every element? Go, check the code again.

No, VoiceOver will not read every element. What about the VStack or all the Spacer elements? VoiceOver ignored them. For a good reason. Most of the time, elements like VStack, HStack or Spacer don't provide any important information. Those elements are there to make things look nice. But (of course) VoiceOver does not care about the look of an app. It sounds like a small thing. But ignoring the "decoration" is just as important as reading out the important information.

That's it for today. In the next post, we will finally write some code. I promise. 😃