Designing for visionOS & Accessibility

Mar 27 2024 · Swift 5.10, iOS 17, visionOS 1.1, Xcode 15.3

Lesson 02: SwiftUI Accessibility API

Demo: SwiftUI Accessibility API

Episode complete

Play next episode

Next

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Demo: SwiftUI Accessibility API

In this demo, you’ll see a few ways to use the SwiftUI Accessibility API to customize labels and values, sort priorities, and hide or combine elements. You’ll use Xcode’s Accessibility inspector to examine iOS projects because, at the time of writing, the Accessibility inspector doesn’t work for visionOS apps.

Final Version

To see some accessibility fixes, open the RGBullsEye app in the Final folder.

// BevelText(text: "R ??? G ??? B ???", ...)
.accessibilityLabel("Target red, green, blue, values you must guess")
var rInt: Int {
  Int(red * 255.0)
}
var gInt: Int {
  Int(green * 255.0)
}
var bInt: Int {
  Int(blue * 255.0)
}

/// A String representing the integer values of an RGB instance.
var intString: String {
  "R \(rInt) G \(gInt) B \(bInt)"
}

var accString: String {
  "Red \(rInt), Green \(gInt), Blue \(bInt)."
}
BevelText(
  text: guess.intString,
  width: proxy.size.width * labelWidth,
  height: proxy.size.height * labelHeight)
  .accessibilityLabel("Your guess: " + guess.accString)
  .accessibilitySortPriority(2)
Text("0")
  .accessibilityHidden(true)
Slider(value: $value)
  .accentColor(trackColor)
  .accessibilityValue(
      String(describing: trackColor) + " " +
      String(Int(value * 255)))
Text("255")
  .accessibilityHidden(true)
ColorSlider(value: $guess.red, trackColor: .red)
title: Text("You scored \(game.scoreRound)"),
message: Text("Target values: " + game.target.intString),
.sheet(isPresented: $showScore) {
  SuccessView(
    game: $game,
    score: game.scoreRound,
    target: game.target,
    guess: $guess)
}
.accessibilityElement(children: .combine)
See forum comments
Cinema mode Download course materials from Github
Previous: SwiftUI Accessibility API Next: Conclusion