Funka Accessibility Days: Mobile Accessibility - A Technical Perspective and iOS Case Study

A technical look at mobile accessibility: What is mobile accessibility? What technologies do we care about? How does one specific set of mobile accessibility APIs work, that being iOS? What are some mobile specific design concerns?

Transcript

1. How to Put the World in your Pocket A Technical Look at Mobile Accessibility on iOS Sommer Panage Sommer Panage - Funka Accessibility Days 2018
2. Sommer Panage - Funka Accessibility Days 2018 Hello A little bit about me…
3. Sommer Panage - Funka Accessibility Days 2018 About me $
4. Sommer Panage - Funka Accessibility Days 2018 Mobile Accessibility
5. Sommer Panage - Funka Accessibility Days 2018 https://www.w3.org/WAI/mobile/ “Mobile accessibility refers to making websites and applications more accessible to people with disabilities when they are using mobile phones and other devices.”
6. Sommer Panage - Funka Accessibility Days 2018 http://media.idownloadblog.com/wp-content/uploads/2015/09/iOS-9-teaser-iPhone-iPad-imagae-002-1024x610.jpg Sommer Panage - Funka Accessibility Days 2018
7. Sommer Panage - Funka Accessibility Days 2018 https://pisces.bbystatic.com/image2/BestBuy_US/images/products/5763/5763401ld.jpg
8. Sommer Panage - Funka Accessibility Days 2018 https://www.apple.com/watch/ Sommer Panage - Funka Accessibility Days 2018
9. Sommer Panage - Funka Accessibility Days 2018 https://icdn2.digitaltrends.com/image/ now-boarding-in-flight-entertainment-0006-1500x1000.jpg Sommer Panage - Funka Accessibility Days 2018
10. Sommer Panage - Funka Accessibility Days 2018 https://store.nest.com/assets/images/gallery/thermostat/images/f/steel/1@2x.png
11. Sommer Panage - Funka Accessibility Days 2018 And much more!
12. Sommer Panage - Funka Accessibility Days 2018 Mobile challenges • Touch screens • Small screens • Different input modalities • Variable usage environment https://www.w3.org/WAI/mobile/
13. Sommer Panage - Funka Accessibility Days 2018 Mobile Accessibility
14. Sommer Panage - Funka Accessibility Days 2018 Today • Key assistive technologies present on mobile devices • Technical case study: iOS UIAccessibility APIs • Accessible design concerns on mobile
15. Sommer Panage - Funka Accessibility Days 2018 Assistive Technology on Mobile
16. Vision Sommer Panage - Funka Accessibility Days 2018
17. Sommer Panage - Funka Accessibility Days 2018 Color Settings
18. Sommer Panage - Funka Accessibility Days 2018 Color Settings Color Inversion https://www.apple.com/accessibility/
19. Sommer Panage - Funka Accessibility Days 2018 Color Settings Grayscale
20. Sommer Panage - Funka Accessibility Days 2018 Font Settings
21. Sommer Panage - Funka Accessibility Days 2018
22. Screen readers Sommer Panage - Funka Accessibility Days 2018
23. Sommer Panage - Funka Accessibility Days 2018 Hearing https://www.apple.com/accessibility/
24. Captioning https://www.imore.com/how-enable-subtitles-and-captioning-auditory-accessibility-iphone-or-ipad Sommer Panage - Funka Accessibility Days 2018
25. Motor Sommer Panage - Funka Accessibility Days 2018
26. Sommer Panage - Funka Accessibility Days 2018 Switch system
27. Learning / Cognitive Sommer Panage - Funka Accessibility Days 2018
28. Sommer Panage - Funka Accessibility Days 2018 Screen locking
29. Sommer Panage - Funka Accessibility Days 2018 Case study: Summary • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
30. Sommer Panage - Funka Accessibility Days 2018 iOS: A Case Study
31. Sommer Panage - Funka Accessibility Days 2018 Case study: Summary • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
32. Sommer Panage - Funka Accessibility Days 2018 Dynamic Type
33. Sommer Panage - Funka Accessibility Days 2018
34. Sommer Panage - Funka Accessibility Days 2018
35. Sommer Panage - Funka Accessibility Days 2018 Steps: Dynamic Type 1. Use system-sized fonts 2. Tell your text fields, labels etc. to respect system-sized fonts dynamically 3. Use AutoLayout to make sure that anything housing text can grow
36. Sommer Panage - Funka Accessibility Days 2018 1. Use system-sized fonts User updates font between application runs
37. Sommer Panage - Funka Accessibility Days 2018 https://useyourloaf.com/blog/using-a-custom-font-with-dynamic-type/
38. Sommer Panage - Funka Accessibility Days 2018 https://useyourloaf.com/blog/using-a-custom-font-with-dynamic-type/ Custom Fonts as of iOS 11
39. Sommer Panage - Funka Accessibility Days 2018 Sommer Panage - Funka Accessibility Days 2018
40. Sommer Panage - Funka Accessibility Days 2018 Sommer Panage - Funka Accessibility Days 2018
41. Sommer Panage - Funka Accessibility Days 2018 In code… funkaLabel.font = UIFont.preferredFont(forTextStyle: .title1) funkaLabel.numberOfLines = 0
42. Sommer Panage - Funka Accessibility Days 2018 Sommer Panage - Funka Accessibility Days 2018
43. Sommer Panage - Funka Accessibility Days 2018 2. Respect dynamic system font changes User updates font DURING application run
44. Sommer Panage - Funka Accessibility Days 2018 Sommer Panage - Funka Accessibility Days 2018
45. Sommer Panage - Funka Accessibility Days 2018 In code… funkaLabel.adjustsFontForContentSizeCategory = true
46. Sommer Panage - Funka Accessibility Days 2018 3. Use AutoLayout
47. Sommer Panage - Funka Accessibility Days 2018 Flexible layouts are an accessibly feature!
48. Sommer Panage - Funka Accessibility Days 2018 Not going to teach auto layout today…
49. Sommer Panage - Funka Accessibility Days 2018 More on AutoLayout • WWDC 2017 - Apple - Auto Layout Techniques in Interface Builder • UIKonf 2017 - Mischa Hildebrand - Auto Layout: From Trailing to Leading • GOTO 2015 - Sam Davies - Adaptive UI
50. Sommer Panage - Funka Accessibility Days 2018
51. Sommer Panage - Funka Accessibility Days 2018 Case study: Summary • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
52. Sommer Panage - Funka Accessibility Days 2018 Display accommodations • Invert colors • Color filters • Increased contrast • Grayscale • Reduce motion • Reduce transparency
53. Sommer Panage - Funka Accessibility Days 2018
54. Sommer Panage - Funka Accessibility Days 2018
55. Sommer Panage - Funka Accessibility Days 2018 How to check… UIAccessibilityDarkerSystemColorsEnabled() UIAccessibilityIsGrayscaleEnabled() UIAccessibilityIsInvertColorsEnabled() UIAccessibilityIsReduceMotionEnabled() UIAccessibilityIsReduceTransparencyEnabled()
56. Sommer Panage - Funka Accessibility Days 2018 A special note on inversion var accessibilityIgnoresInvertColors: Bool { get set }
57. Sommer Panage - Funka Accessibility Days 2018 Generally speaking • Test your app in each display mode • Make adjustments as needed • Do not use color alone to signal the user!
58. Sommer Panage - Funka Accessibility Days 2018 Case study: Summary • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
59. VoiceOver! Sommer Panage - Funka Accessibility Days 2018
60. Sommer Panage - Funka Accessibility Days 2018 “Mail. One new item. Double-tap to open.” Accessibility Label Accessibility Value Accessibility Hint
61. Sommer Panage - Funka Accessibility Days 2018 Accessibility On/Off myView.isAccessibilityElement = true
62. Sommer Panage - Funka Accessibility Days 2018 Accessibility Label myView.accessibilityLabel = “Mail” Don’t forget to localize!
63. Sommer Panage - Funka Accessibility Days 2018 Accessibility Label • Tells us what the object is. • Strings will be their own labels, but… • Image based controls need this set manually • Don’t include the type of object or control this is (i.e. “button”) • Good labels: “Mail” “Send” “New Tweet” • Bad labels: “Mail icon” “Send button” “Tap this to tweet”
64. Sommer Panage - Funka Accessibility Days 2018 Accessibility Value myView.accessibilityValue = “One new item”
65. Sommer Panage - Funka Accessibility Days 2018 Accessibility Value myView.accessibilityValue = itemsString()
66. Sommer Panage - Funka Accessibility Days 2018 Accessibility Value • Less frequently used • Useful when an item has a dynamic value • If focus doesn’t move but value changes, only value is read • Don’t repeat the label! • Good values: “One new item” “50 percent” • Bad labels: “One new mail item” “50 percent of the slider”
67. Sommer Panage - Funka Accessibility Days 2018 Accessibility Hint myView.accessibilityHint = “Double-tap to open”
68. Sommer Panage - Funka Accessibility Days 2018 Accessibility Hint • Describes outcome of activation, i.e. double-tap • May also describe other possible actions • Should start with verb and be concise • Good values: “Sends message” “Double-tap and hold to delete” • Bad labels: “You can send the message” “Delete”
69. Sommer Panage - Funka Accessibility Days 2018 Accessibility Hint Important!! Users can turn off hints!
70. Sommer Panage - Funka Accessibility Days 2018 Compose. Button. Double- tap and hold to bring up drafts.
71. Sommer Panage - Funka Accessibility Days 2018 “Compose. Button. Double-tap and hold to bring up drafts.” Accessibility Trait
72. Sommer Panage - Funka Accessibility Days 2018 Accessibility Traits myView.accessibilityTraits |= UIAccessibilityTraitButton
73. Sommer Panage - Funka Accessibility Days 2018 Accessibility Traits • Not strings! iOS will handle the correct strings • Describe characteristics of the object • Link, button, adjustable, image, etc. • UIKit objects have default traits, but you may need to add more • Should use bitwise-or to combine traits
74. Sommer Panage - Funka Accessibility Days 2018 Interface Builder
75. Sommer Panage - Funka Accessibility Days 2018 Those are the basics!
76. Sommer Panage - Funka Accessibility Days 2018 But often, our apps aren’t so basic.
77. Sommer Panage - Funka Accessibility Days 2018 March 20th, 2018. 297 minutes. What about things that aren’t views?
78. Sommer Panage - Funka Accessibility Days 2018 Custom UIAccessibilityElement var barElement = UIAccessibilityElement(accessibilityContainer: self) barElement.accessibilityLabel = "\(date) \(minutesString)" barElement.accessibilityFrameInContainerSpace = barFrame
79. Sommer Panage - Funka Accessibility Days 2018 Accessibility Elements self.isAccessibilityElement= false self.accessibilityElements = [barElement1, barElement2, barElement3]
80. Sommer Panage - Funka Accessibility Days 2018 Custom Accessibility Elements • Set isAccessibilityElement on self to false • All custom UIAccessibilityElement objects must have • label • frame • Set accessibilityElements array when: • Not using UIViews (custom drawing) • Controlling VoiceOver reading-order of elements
81. Sommer Panage - Funka Accessibility Days 2018 Custom Gestures Sommer Panage - Funka Accessibility Days 2018
82. Sommer Panage - Funka Accessibility Days 2018 Custom Gestures • Two-finger double tap = Magic Tap • Two-finger “Z” = Escape • Three-finger swipe-up or swipe-down = Scroll
83. Sommer Panage - Funka Accessibility Days 2018 Supporting Custom Gestures override func accessibilityPerformMagicTap() -> Bool { // Handle gesture return true // if gesture was handled, false otherwise } override func accessibilityPerformEscape() -> Bool { // Handle gesture return true // if gesture was handled, false otherwise } override func accessibilityScroll(_ direction: UIAccessibilityScrollDirection) -> Bool { // Handle gesture return true // if gesture was handled, false otherwise }
84. Sommer Panage - Funka Accessibility Days 2018 Alax Allan. April 29, 2016. Soma Discount. Actions Available Custom Actions
85. Sommer Panage - Funka Accessibility Days 2018 Custom Accessibility Actions let deleteAction = UIAccessibilityCustomAction(name: “Delete", target: self, selector: #selector(deletedSelectedMessage)) let moreAction = UIAccessibilityCustomAction(name: “More", target: self, selector: #selector(moreActionSheetForSelectedMessage)) self.accessibilityCustomActions = [deleteAction, moreAction]
86. Sommer Panage - Funka Accessibility Days 2018 Custom Accessibility Actions • UIAccessibilityCustomAction initialized with a localized name, target and action • Set the accessibilityCustomActions on the correct view • Best used when a view has • gestures • many buttons within it
87. Sommer Panage - Funka Accessibility Days 2018
88. Sommer Panage - Funka Accessibility Days 2018 Could not submit. Phone number invalid. Announcements
89. Sommer Panage - Funka Accessibility Days 2018 Accessibility Announcements UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, "Could not submit. Invalid phone number.")
90. Sommer Panage - Funka Accessibility Days 2018 Notifications • Announcements should be localized • Other notification types include: • UIAccessibilityScreenChangedNotification • UIAccessibilityLayoutChangedNotification • UIAccessibilityPageScrolledNotification
91. Sommer Panage - Funka Accessibility Days 2018 VoiceOver in Summary • Basic labels, values, traits, hints • Custom elements • VoiceOver gestures • Custom actions • Announcements
92. Sommer Panage - Funka Accessibility Days 2018 Case study: Summary • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
93. Sommer Panage - Funka Accessibility Days 2018 Synchronized Media Captions
94. Sommer Panage - Funka Accessibility Days 2018 Audio-only Alternative text
95. Sommer Panage - Funka Accessibility Days 2018 Video-only Alternative text Video-only Audio track
96. Sommer Panage - Funka Accessibility Days 2018
97. Sommer Panage - Funka Accessibility Days 2018 Checking for Captions if UIAccessibilityIsClosedCaptioningEnabled() { // Do something } NotificationCenter.default.addObserver( self, selector: #selector(captionStatusDidChange), name: Notification.Name.UIAccessibilityClosedCaptioningStatusDidChange, object: nil)
98. Sommer Panage - Funka Accessibility Days 2018 Captions • Primarily a content concern • App layout changes or manual captions possible
99. Sommer Panage - Funka Accessibility Days 2018 Summary • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
100. Sommer Panage - Funka Accessibility Days 2018
101. Sommer Panage - Funka Accessibility Days 2018 Switch Control • Good VoiceOver support ➡ Good Switch Control support • Custom Actions work with Switch Control as well • A few cases for special concern • Stopping the cursor • Modifying how the cursor navigates items
102. Sommer Panage - Funka Accessibility Days 2018 Stopping the Cursor
103. Sommer Panage - Funka Accessibility Days 2018 Stopping the Cursor
104. Sommer Panage - Funka Accessibility Days 2018 Stopping the Cursor UIAccessibilityPostNotification(UIAccessibilityPauseAssistiveTechnologyNotification, “a11y-cat-animation“) // Cat animation occurs UIAccessibilityPostNotification(UIAccessibilityResumeAssistiveTechnologyNotification, “a11y-cat-animation“)
105. Sommer Panage - Funka Accessibility Days 2018 Modifying Cursor Hierarchy CLICK!
106. Sommer Panage - Funka Accessibility Days 2018 Modifying Cursor Hierarchy CLICK!
107. Sommer Panage - Funka Accessibility Days 2018 Modifying Cursor Hierarchy
108. Sommer Panage - Funka Accessibility Days 2018 Modifying Cursor Hierarchy
109. Sommer Panage - Funka Accessibility Days 2018 Modifying Cursor Hierarchy self.accessibilityNavigationStyle = UIAccessibilityNavigationStyle.separate
110. Sommer Panage - Funka Accessibility Days 2018 iOS Case Study Complete!
111. Sommer Panage - Funka Accessibility Days 2018 Design Considerations
112. Sommer Panage - Funka Accessibility Days 2018 Similar to Web • Contrast • 3:1 for large text • 4.5:1 for normal text • Simplify colors • Simplify design
113. Sommer Panage - Funka Accessibility Days 2018 Key Design Considerations on Mobile
114. Sommer Panage - Funka Accessibility Days 2018 Tap Targets • Don’t make users tap tiny things! • 44 pts x 44 pts (9mm square) • At least 32 points apart
115. Sommer Panage - Funka Accessibility Days 2018 Gestures • Conflict with screen reader gestures • Learning curve • Memorization • Not the same between apps • Not motor-disability friendly
116. Sommer Panage - Funka Accessibility Days 2018 Gestures = Power-User Features! • Make things easier • Save time • Be equivalent to another set of actions
117. Sommer Panage - Funka Accessibility Days 2018 That’s it!
118. Sommer Panage - Funka Accessibility Days 2018 Recap • Color and text settings, screen readers, switch systems and more • Technical case study: iOS UIAccessibility APIs • UX / Design: Tap Targets and Gestures
119. Sommer Panage - Funka Accessibility Days 2018 Thank you!
120. Sommer Panage - Funka Accessibility Days 2018 Questions? • @sommer on Twitter • email: sommer@panage.org