No Touch(screen) Required: Voice & Keyboard Accessibility

Accessibility is a topic that I care deeply about. Making sure everyone can use a product is something we, involved in building products, should think about.

On Apple platforms, you may be familiar with features like dynamic type (different text sizes), dark mode, and maybe even VoiceOver and Switch Control. But things don't stop there.

With Voice Control and Full Keyboard Access, Apple has taken accessibility another step further, making interacting with your device without needing to touch it easier than ever. Let's take a look at these technologies — how they work, and how you can support them by leveraging accessibility APIs.

Transcript

1. No (Touch)screen Required Voice & Keyboard Accessibility Bas Broek @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 1
2. Today is a special day. @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 2
3. Global Accessibility Awareness Day @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 3
4. Bas Broek • iOS, Accessibility & more @ WeTransfer • Previously macOS Accessibility / VoiceOver @ Apple • Swift for Good co-author @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 4
5. It's the right thing to do. @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 5
6. If only it were that easy. @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 6
7. "Evolution" of Accessibility on Apple platforms • VoiceOver, Switch Control • Voice Control • Full Keyboard Access • ... and more; think zoom, Dynamic Type, Reduce Motion etc. • ... as well as Dark Mode, Back Tap, Siri, haptics @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 7
8. Two layers of accessibility @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 8
9. Act I: VoiceOver @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 9
10. UIKit accessibilityLabel accessibilityTraits accessibilityValue accessibilityHint @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 10
11. UIKit accessibilityLabel - "Volume" accessibilityTraits - .adjustable accessibilityValue - "56%" accessibilityHint - "Swipe up or down to adjust." @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 11
12. SwiftUI .accessibilityLabel("Volume") .accessibilityAdjustableAction { direction in } .accessibilityValue("50%") .accessibilityHint("Swipe up or down to adjust.") @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 12
13. VoiceOver Demo @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 13
14. VoiceOver Demo: "Normal" speed & Screen Curtain @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 14
15. Act II: Voice Control @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 15
16. accessibilityUserInputLabels @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 16
17. ! @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 17
18. /// The default value for this property is an empty array /// unless the element is a UIKit control. /// In that case, the value is an array with /// an appropriate label, if different from `accessibilityLabel`. /// /// Use this property when the `accessibilityLabel` isn't appropriate for /// dictated or typed input. /// For example, an element that contains additional descriptive /// information in its `accessibilityLabel` can return a more concise label. /// /// The primary label is first in the array, optionally followed /// by alternative labels in descending order of importance. /// /// If this property returns an empty array or an invalid value, /// the system uses `accessibilityLabel` instead. @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 18
19. /// The default value for this property is an empty array /// unless the element is a UIKit control. /// In that case, the value is an array with /// an appropriate label, if different from `accessibilityLabel`. /// /// Use this property when the `accessibilityLabel` isn't appropriate for /// dictated or typed input. /// For example, an element that contains additional descriptive /// information in its `accessibilityLabel` can return a more concise label. /// /// The primary label is first in the array, optionally followed /// by alternative labels in descending order of importance. /// /// If this property returns an empty array or an invalid value, /// the system uses `accessibilityLabel` instead. @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 19
20. "TAP TO COPY LINK" "Tap 'tap to copy link'" @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 20
21. "TAP TO COPY LINK" "Tap 'tap to copy link'" "Tap 'copy link'" @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 21
22. "It's Complicated: Inside an A. Lange & Söhne Split- Seconds Chronograph" "Tap 'It's Complicated: Inside an A. Lange & Söhne Split-Seconds Chronograph'" @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 22
23. "It's Complicated: Inside an A. Lange & Söhne Split- Seconds Chronograph" "Tap 'It's Complicated: Inside an A. Lange & Söhne Split-Seconds Chronograph'" "Tap 'article, 1'" @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 23
24. UIKit copyLinkButton.accessibilityLabel = "Tap to copy link" copyLinkButton.accessibilityUserInputLabels = [ "Copy link", "Copy" ] article.accessibilityLabel = "It's Complicated: Inside an A. Lange & Söhne Split-Seconds Chronograph" article.accessibilityUserInputLabels = [ "Article", "News", article.accessibilityLabel ] @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 24
25. SwiftUI .accessibilityLabel( "Tap to copy link" ) .accessibilityInputLabels([ "Copy link", "Copy" ]) .accessibilityLabel( "It's Complicated: Inside an A. Lange & Söhne Split-Seconds Chronograph" ) .accessibilityInputLabels([ "Article", "News", "It's Complicated: Inside an A. Lange & Söhne Split-Seconds Chronograph" ]) @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 25
26. Demo @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 26
27. Act III: Full Keyboard Access @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 27
28. /// The default value for this property is an empty array /// unless the element is a UIKit control. /// In that case, the value is an array with /// an appropriate label, if different from `accessibilityLabel`. /// /// Use this property when the `accessibilityLabel` isn't appropriate for /// dictated or typed input. /// For example, an element that contains additional descriptive /// information in its `accessibilityLabel` can return a more concise label. /// /// The primary label is first in the array, optionally followed /// by alternative labels in descending order of importance. /// /// If this property returns an empty array or an invalid value, /// the system uses `accessibilityLabel` instead. @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 28
29. ! @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 29
30. Demo @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 30
31. Loopin' back • VoiceOver support gets you most of the way there • Adding Voice Control support will get you ±all the way • ... to also support Full Keyboard Access on iOS! @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 31
32. One last thing... @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 32
33. WeTransfer: Mission Accessible @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 33
34. Thank you! @basthomas @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 34
35. References • https://www.basbroek.nl/getting-started- voiceover • https://www.basbroek.nl/custom-tab-bar- accessibility • https://developer.apple.com/videos/play/ wwdc2021/10120/ • https://about.wetransfer.com/accessibility @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 35