-
Refine accessibility for custom controls
Unlock the full potential of your app's interactive elements by making them accessible to everyone. We'll break down how people understand and use controls with VoiceOver and other assistive technologies, exploring a variety of input methods like actions, the passthrough gesture, and direct touch. Join us for an in-depth exploration of several example controls as we refine and elevate the accessibility experience in each one.
Chapters
- 0:01 - Introduction
- 1:02 - Guiding principles
- 8:41 - Complex controls
Resources
Related Videos
WWDC24
-
Search this video…
-
-
5:01 - Improve accessibility for coffee dispenser
// Improve accessibility for coffee dispenser import SwiftUI struct CoffeeDispenserView: View { @State var coffee: Double = 0.0 var body: some View { CoffeeSlider(value: coffee) .accessibilityElement() .accessibilityLabel("Coffee Dispenser") .accessibilityValue("\(Int(coffee)) ounces") .accessibilityAddTraits(.adjustable) .accessibilityAdjustableAction { direction in switch direction { case .increment: increaseCoffeeAmount() case .decrement: decreaseCoffeeAmount() } } } } -
7:05 - Set the accessibility activation point
// Set the accessibility activation point import SwiftUI struct CoffeeDispenserView: View { @State var coffee: Double = 0.0 var body: some View { CoffeeSlider(value: coffee) .accessibilityActivationPoint( UnitPoint(x: 0.5, y: 1 - coffee) ) } } -
7:27 - Post accessibility announcements
// Post accessibility announcements import SwiftUI struct CoffeeDispenserView: View { @State var coffee: Double = 0.0 var body: some View { CoffeeSlider(value: coffee) // ... .onChange(of: coffee) { _, newValue in if sufficientTimeSinceLastAnnouncement() && valueHasChanged() { cacheLastSpokenValue(newValue) AccessibilityNotification .Announcement(newValue) .post() } } } } -
10:13 - Add custom actions
// Add custom actions import SwiftUI struct EqualizerView: View { var body: some View { EqualizerPad() .accessibilityActions("Move Up") { increaseY(by: 10) } .accessibilityActions("Move Right") { increaseX(by: 10) } .accessibilityActions("Move Down") { decreaseY(by: 10) } .accessibilityActions("Move Left") { decreaseX(by: 10) } } } -
12:47 - Customize accessibility for the interactive cat surface
// Customize accessibility for the interactive cat surface import SwiftUI struct VirtualCat: View { var cat: CatModel var body: some View { InteractiveCatSurface() .accessibilityLabel("Virtual Cat") .accessibilityValue(cat.currentReaction.description) .accessibilityDirectTouch([.requiresActivation]) } }
-
-
- 0:01 - Introduction
Why custom controls need accessibility support so everyone can use what your app was built to do, and what the session covers — guiding principles and how to apply them to complex controls.
- 1:02 - Guiding principles
Create accessible custom controls by translating implicit visual cues into explicit information for assistive technologies. Apply labels, values, traits, and actions to ensure these controls are universally understood and actionable by everyone.
- 8:41 - Complex controls
Complex controls, like multi-dimensional pads and highly interactive virtual surfaces, demand advanced accessibility techniques beyond basic labels and values. Implementing features like passthrough gestures, custom actions, and the Direct Touch API allows people to seamlessly navigate and interact with these interfaces.