Tweet
Tweet

Slide 1

Slide 1 text

No (Touch)screen Required Voice & Keyboard Accessibility Bas Broek @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 1

Slide 2

Slide 2 text

Today is a special day. @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 2

Slide 3

Slide 3 text

Global Accessibility Awareness Day @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 3

Slide 4

Slide 4 text

Bas Broek • iOS, Accessibility & more @ WeTransfer • Previously macOS Accessibility / VoiceOver @ Apple • Swift for Good co-author @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 4

Slide 5

Slide 5 text

It's the right thing to do. @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 5

Slide 6

Slide 6 text

If only it were that easy. @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 6

Slide 7

Slide 7 text

"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

Slide 8

Slide 8 text

Two layers of accessibility @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 8

Slide 9

Slide 9 text

Act I: VoiceOver @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 9

Slide 10

Slide 10 text

UIKit accessibilityLabel accessibilityTraits accessibilityValue accessibilityHint @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 10

Slide 11

Slide 11 text

UIKit accessibilityLabel - "Volume" accessibilityTraits - .adjustable accessibilityValue - "56%" accessibilityHint - "Swipe up or down to adjust." @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 11

Slide 12

Slide 12 text

SwiftUI .accessibilityLabel("Volume") .accessibilityAdjustableAction { direction in } .accessibilityValue("50%") .accessibilityHint("Swipe up or down to adjust.") @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 12

Slide 13

Slide 13 text

VoiceOver Demo @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 13

Slide 14

Slide 14 text

VoiceOver Demo: "Normal" speed & Screen Curtain @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 14

Slide 15

Slide 15 text

Act II: Voice Control @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 15

Slide 16

Slide 16 text

accessibilityUserInputLabels @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 16

Slide 17

Slide 17 text

! @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 17

Slide 18

Slide 18 text

/// 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

Slide 19

Slide 19 text

/// 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

Slide 20

Slide 20 text

"TAP TO COPY LINK" "Tap 'tap to copy link'" @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 20

Slide 21

Slide 21 text

"TAP TO COPY LINK" "Tap 'tap to copy link'" "Tap 'copy link'" @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 21

Slide 22

Slide 22 text

"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

Slide 23

Slide 23 text

"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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Demo @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 26

Slide 27

Slide 27 text

Act III: Full Keyboard Access @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 27

Slide 28

Slide 28 text

/// 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

Slide 29

Slide 29 text

! @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 29

Slide 30

Slide 30 text

Demo @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 30

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

One last thing... @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 32

Slide 33

Slide 33 text

WeTransfer: Mission Accessible @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 33

Slide 34

Slide 34 text

Thank you! @basthomas @basthomas, #GAAD, May 19, 2022 @ CocoaHeads Sydney 34

Slide 35

Slide 35 text

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