UIKonf 2017: Accessibility for Users, Designers & Developers

Looking at accessibility on iOS from 3 perspectives: users, designers, and devs. What assistive technology is build into iOS devices for users? What other technologies are the devices compatible with? How should designers think about making their designs inclusive of all users? How can devs best make sure they're writing UIs that are accessible to everyone?

Transcript

1. ACCESSIBILITY FOR USERS, DESIGNERS & DEVELOPERS SOMMER PANAGE (@SOMMER)
2. ACCESSIBILITY: USERS PART 1
3. ACCESSIBILITY MEANS “USING TECHNOLOGY TO OVERCOME CHALLENGES.” Apple
4. CONTENT ASSISTIVE TECHNOLOGY
6. AN ASSISTIVE TECHNOLOGY IS ANY ITEM, PIECE OF EQUIPMENT OR PRODUCT SYSTEM THAT IS USED TO INCREASE, MAINTAIN OR IMPROVE THE FUNCTIONAL CAPABILITIES OF A PERSON WITH A DISABILITY.
7. CONTENT ASSISTIVE TECHNOLOGY
8. VISION
15. HEARING
19. MOTOR
23. LEARNING
25. ACCESSIBILITY: DESIGN PART 2
27. ACCESSIBLE DESIGN IS GOOD DESIGN - IT BENEFITS PEOPLE WHO DON'T HAVE DISABILITIES AS WELL AS PEOPLE WHO DO. ACCESSIBILITY IS ALL ABOUT REMOVING BARRIERS AND PROVIDING THE BENEFITS OF TECHNOLOGY FOR EVERYONE. Steve Ballmer WHY?
28. VOICEOVER
29. PLAY, BUTTON
30. SHUFFLE TRACKS, ON, BUTTON
31. ADD TO COLLECTION, BUTTON. TRACK IS NOT IN YOUR COLLECTION.
33. DON’T REINVENT THE WHEEL
36. VISION VOICEOVER - OTHER THINGS TO CONSIDER ▸ Avoid images with text ▸ Support standard gestures (back, scroll, etc) on touch devices ▸ Try to avoid “discoverable” things…interactions should be obvious! ▸ Design an experience - don’t just label things!
37. 44 minutes ago One nice thing about 2013 has been not having to hear Pumped Up Kicks very often. At rooland. Reply Retweet Favorite Jordan Kay At underscore Jordan Profile Picture EQUAL EXPERIENCES
38. “Jordan Kay. At Underscore Jordan. 44 minutes ago. One nice thing about 2013 has been not having to hear Pumped Up Kicks very often. Dash. At Roooooland. Two-finger double-tap for tweet actions.” EQUAL EXPERIENCES
39. VISUAL DESIGN
41. class MyView: UIView { let titleLabel: UILabel = { let l = UILabel() l.adjustsFontForContentSizeCategory = true l.font = .preferredFont(forTextStyle: .title1) return l }() init() { super.init(frame: .zero) NotificationCenter.default.addObserver(self, selector: #selector(userChangedTextSize), name: NSNotification.Name.UIContentSizeCategoryDidChange, object: nil) } // etc… }
42. class MyView: UIView { let titleLabel: UILabel = { let l = UILabel() l.adjustsFontForContentSizeCategory = true l.font = .preferredFont(forTextStyle: .title1) return l }() init() { super.init(frame: .zero) NotificationCenter.default.addObserver(self, selector: #selector(userChangedTextSize), name: NSNotification.Name.UIContentSizeCategoryDidChange, object: nil) } // etc… }
43. class MyView: UIView { let titleLabel: UILabel = { let l = UILabel() l.adjustsFontForContentSizeCategory = true l.font = .preferredFont(forTextStyle: .title1) return l }() init() { super.init(frame: .zero) NotificationCenter.default.addObserver(self, selector: #selector(userChangedTextSize), name: NSNotification.Name.UIContentSizeCategoryDidChange, object: nil) } // etc… }
44. 10.9 2.0 http://leaverou.github.io/contrast-ratio
45. LARGE TEXT: 3:1 NORMAL TEXT: 4.5:1
49. BETTER!! PASSWORD IS INCORRECT!
50. VISION VISUAL DESIGN - OTHER CONSIDERATIONS ▸ Tap targets should be no smaller than 44x44 points ▸ Keep color schemes simple ▸ Avoid clutter…again! (always)
51. ACCESSIBILITY: DEVELOPMENT PART 3
52. AUDIT CODE
53. AUDIT
54. THE AUDIT SPOTIFY — GOOD! ▸ Buttons are well labeled ▸ Grouping of content makes sense ▸ Navigation of music control is clear ▸ Buttons provide context to their behaviors when non-obvious
55. THE AUDIT MEDIUM — NOT GREAT ▸ Tabs aren’t labeled ▸ Swipe items behind cells are “visible” to VO ▸ Grouping of items is poor ▸ Compose items aren’t labeled ▸ Doesn’t respond to back gesture. ▸ And much more… ▸ NOTE: This is an old version of Medium - app is MUCH better now!
56. CODE
57. UIACCESSIBILITY
58. UIACCESSIBILITY UIACCESSIBILITY ASKS YOUR VIEWS ▸Who? ▸What? ▸Where?
59. UIACCESSIBILITY YOUR ANSWERS FOR UIACCESSIBILITY ▸Label / name of item ▸Link / button / heading / other traits ▸Frame
60. A REAL APP! DEMO APP ▸ Code at goo.gl/nCCw8I ▸ For children ▸ Learning numbers, colors and shapes ▸ We will focus on VoiceOver support
61. A REAL APP! WHAT IS THIS? ▸ No clear indication that the “learn” cells are tappable ▸ Tap + nav -> generally button behavior
62. A REAL APP! SOLUTION: UIACCESSIBILITYTRAIT ▸ UIAccessibilityTraits answer WHAT something is / HOW it behaves ▸ Common traits: ▸ - UIAccessibilityTraitButton ▸ - UIAccessibilityTraitHeader ▸ - UIAccessibilityTraitLink ▸ - UIAccessibilityTraitImage ▸ UIAccessibilityTraitAdjustable
63. A REAL APP THE CODE func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell: UITableViewCell // Set up the cell based on my data cell.accessibilityTraits |= UIAccessibilityTraitButton return cell }
64. A REAL APP UIACCESSIBILITYTRAITS ▸ Standardized behavior communication ▸ Localized ▸ Standardized interaction patterns (i.e. adjustable) ▸ Hook into VO navigation
65. A REAL APP! WHO IS THIS? ▸ Images take on resource or file names by default ▸ Name should be short and clear ▸ When combined with trait, name indicates interaction
66. A REAL APP! SOLUTION: UIACCESSIBILITYLABEL ▸ AccessibilityLabel answer WHO something is ▸ AccessibilityHint answers what will happen if I perform an action on the element ▸ Hints used when that result is not obvious from the label ▸ Hint read after pause ▸ Hints can be turned off AND UIACCESSIBILITYHINT
67. A REAL APP THE CODE let englishButton: UIButton = { let button = UIButton(type: .system) button.setBackgroundImage( #imageLiteral(resourceName:”union_jack") .withRenderingMode(.alwaysTemplate), for: .normal) button.accessibilityLabel = "English Answer" button.accessibilityHint = "Shows the answer in English" return button }()
68. A REAL APP ACCESSIBILITYLABEL AND ACCESSIBILITYHINT ▸ Need to be localized ▸ Hint is additional and optional, user may not hear ▸ Label should be short and clear ▸ Label/Hints should NOT contain trait info ▸ Hint begins with a VERB, should NOT contain action such as “tapping” unless it is a custom action
69. A REAL APP! HOW DO I GET THERE? ▸ VO supports default gestures for common behaviors ▸ 3-finger scroll ▸ 2-finger Z to escape ▸ “Magic tap” 2 finger double tap - most “common” or expected action
70. A REAL APP! SOLUTION: ACCESSIBILITY PERFORM ESCAPE ▸ 2 finger-Z to “go back” or “escape” ▸ Automatically supported by UINavigationController ▸ Must be implemented manually for modals
71. A REAL APP THE CODE final class AnswerViewController: UIViewController { // All the usually VC code here… @objc private func didSelectGotIt() { dismiss(animated: true, completion: nil) } override func accessibilityPerformEscape() -> Bool { didSelectGotIt() return true } }
72. A REAL APP GESTURES AND ACTIONS ▸ Avoid custom gestures; try to use standard escape, magic tap and scroll, plus the adjustable (trait) ▸ Custom actions via accessibilityCustomActions ▸ Custom navigation via the accessibilityCustomRotors
73. BE AN ACCESSIBILITY ADVOCATE CONCLUSION
74. ACCESSIBILITY ADVOCACY EVERYONE CAN BE AN ADVOCATE ▸ We all want the same things: ▸ An app that anyone can use ▸ An app that is easy to use ▸ Happy users! ▸ Not everyone is a power user ▸ If you see something, say something!
75. ACCESSIBILITY ADVOCACY APPEALING TO THE POWERS THAT BE ▸ Accessibility helps with Automation ▸ Accessibility means more users with AND WITHOUT disabilities ▸ Accessibility is good PR ▸ Accessibility offers TONS of space for innovation ▸ Stay ahead of the law ▸ Accessibility is the right thing to do
76. ACCESSIBILITY ADVOCACY NUMBERS - BLESSING AND CURSE ▸ “Just how many blind people use our app?” ▸ Privacy - do we track users of assistive tech? ▸ TALK TO YOUR USERS
77. ACCESSIBILITY IS FOR EVERYONE…
78. …AND EVERYONE CAN ADVOCATE FOR ACCESSIBILITY
79. THANK YOU! QUESTIONS? me@sommerpanage.com www.sommerpanage.com @sommer
80. EXTRA SLIDES! BONUS
81. OTHER DESIGN CONSIDERATIONS
82. OTHER CHALLENGES CAPTIONING AND SOUND ▸ All audio/video content should provide optional captioning ▸ Never signal anything with sound alone ▸ Avoid background music/sound and make any background sound easy to disable
83. OTHER CHALLENGES TOUCH AND COGNITION ▸ Avoid complex / hard to discover gestures ▸ Again, keep touch target sizes at/above 44x44 points ▸ Test your interface using switch control; a simple, hierarchical interface will play well with switch control ▸ Avoid screen clutter - favor navigation to clutter
84. SOMMER PANAGE me@sommerpanage.com www.sommerpanage.com @sommer