Designing for visionOS & Accessibility
AcessibilityComponent
Continue with your Vision101 app from the previous video, or open the project in the Demo2-Starter folder.
Set Run Destination to Apple Vision Pro,
then build and run.
In the Apple Vision Pro simulator, select Volume from the side tab bar, then tap Start.
Switch back to Xcode and open Accessibility Inspector: Xcode ▸ Open Developer Tool ▸ Accessibility Inspector.
In the Process field, select Simulator, then select Vision101.
Tap Target an element and the speech button.
Now, click the “previous” (<) and “next” (>) buttons until you reach the Start button:
When you reach the Start button, look in the Actions section and click Perform.
You’ve toggled the Start button from the Accessibility Inspector!
While clicking through the elements, you might hear “Description for element unavailable”. RealityKit entities don’t have any default accessibility information. You must set up an AcessibilityComponent to add this.
In Xcode, open VolumeView, then start adding code in the if let scene = closure:
var accessibilityComponent = AccessibilityComponent()
First, you create a new AccessibilityComponent where you’ll set some attributes for the scene event. Next, specify a label and value for the scene:
accessibilityComponent.label = "Plane"
accessibilityComponent.value = "Flying"
Now, tell VoiceOver this event is navigable.
accessibilityComponent.isAccessibilityElement = true
Add some traits:
accessibilityComponent.traits = [.button, .playsSound]
accessibilityComponent.systemActions = [.activate]
The button and playsSound traits aren’t actually true, but you might want to make scene interactive later — maybe add gestures to increase or decrease the flying speed. Then, you’ll want the system to activate it.
Finally, add your new accessibilityComponent to the components set of scene.
scene.components[AccessibilityComponent.self] = accessibilityComponent
Build and run again, select Volume, and start the animation.
In the Accessibility Inspector, set Process to Simulator ▸ Vision101 again.
Now, move the Accessibility Inspector to the next element after the Start button.
It says “Plane, Flying, Button, Plays Sound” — precisely the accessibility information you added!
Open the Actions section:
Here’s an Activate: Perform button.
The Accessibility Inspector doesn’t work for the next exercise, so quit it and stop the app in Xcode.
VoiceOver in Apple Vision Pro Simulator
Unlike the iOS simulators, you can turn on VoiceOver in the Apple Vision Pro simulator, but then mouse gestures stop working, so you need a little hack.
In the simulator, when the home window appears, open Settings ▸ Accessibility ▸ Interaction (in the Physical and Motor section).
Then, select Dwell Control and toggle on Dwell Control and Highlight Control.
By default, Dwell waits 1 second before activating what’s under the cursor. You can reduce or increase this by 0.25-second increments.
Point-and-click still activates buttons, but to get used to Dwell Control, hover the cursor over the back button to return to Interaction.
Then, do this again to return to the Accessibility menu.
Now, hover over VoiceOver to open its menu, then turn on VoiceOver.
Clicking no longer works to activate anything.
To open the Speech options, you have to wait for the Dwell Control to kick in.
Now, explore the Speech options. You can change the voice:
Now, close Settings.
Announcements
Back in Xcode, in VolumeView, add an AccessibilityNotification announcement before scene.stopAllAnimations():
AccessibilityNotification.Announcement("Plane stopped flying").post()
Build and run again, select Volume, and start the animation.
Now, stop the animation.
And VoiceOver spoke your announcement “Plane stopped flying”.
Stop the app in Xcode, then turn off VoiceOver in the simulator.