Cocoaheads Stockholm: 10 Accessibility Tips for iOS

Transcript

1. I MADE MY APP MORE ACCESSIBLE, AND YOU WON’T BELIEVE WHAT HAPPENED NEXT! SOMMER PANAGE @SOMMER CocoaHeads ! Stockholm
2. WHO AM I? ! iOS Developer, previously at Chorus, Twitter, Apple CocoaHeads ! Stockholm
3. WHO AM I? ! iOS Developer, previously at Chorus, Twitter, Apple ! Aerial (circus) performer and coach CocoaHeads ! Stockholm
4. CocoaHeads ! Stockholm
5. IT ME. CocoaHeads ! Stockholm
6. WHO AM I? ! iOS Developer, previously at Chorus, Twitter, Apple ! Aerial (circus) performer and coach ! Health and fitness lover CocoaHeads ! Stockholm
7. WHO AM I? ! iOS Developer, previously at Chorus, Twitter, Apple ! Aerial (circus) performer and coach ! Health and fitness lover ♿ Accessibility engineer and advocate! CocoaHeads ! Stockholm
8. WHAT IS ACCESSIBILITY? CocoaHeads ! Stockholm
9. Accessibility means “Using technology to overcome challenges.” — Apple CocoaHeads ! Stockholm
10. WHAT KIND OF CHALLENGES? CocoaHeads ! Stockholm
11. VISUAL CocoaHeads ! Stockholm
12. MOTOR CocoaHeads ! Stockholm
13. AUDITORY CocoaHeads ! Stockholm
14. LEARNING + COGNITIVE CocoaHeads ! Stockholm
15. ACCESSIBILITY IS FOR EVERYONE CocoaHeads ! Stockholm
16. CocoaHeads ! Stockholm
17. LET'S SEE/HEAR FROM A USER HERSELF! CocoaHeads ! Stockholm
18. MY GOAL TODAY... CocoaHeads ! Stockholm
19. YOU TO WALK AWAY WITH REAL AND ACTIONABLE ADVICE THAT YOU CAN IMPLEMENT TOMORROW TO MAKE YOUR APP MORE ACCESSIBLE. CocoaHeads ! Stockholm
20. IN THIS TALK, WE WILL COVER 10 LIGHT-WEIGHT TIPS THAT WILL LET YOU MAKE YOUR APP MORE ACCESSIBLE RIGHT NOW. CocoaHeads ! Stockholm
21. 1 HAVE HIGH COLOR CONTRAST RATIOS CocoaHeads ! Stockholm
22. WHAT? CocoaHeads ! Stockholm
23. CocoaHeads ! Stockholm
24. Minimum, we want a contrast ratio of 4.5:1 for normal text and 3:1 for large text (Large text is 14 pt bold or 18 pt non-bold) CocoaHeads ! Stockholm
25. CocoaHeads ! Stockholm
26. CocoaHeads ! Stockholm
27. WHY? CocoaHeads ! Stockholm
28. > Color blindness > (Age-related) low-vision conditions > Imperfect viewing environment CocoaHeads ! Stockholm
29. High contrast plays better with color- assistive features such as inversion... CocoaHeads ! Stockholm
30. ...and grayscale CocoaHeads ! Stockholm
31. 2 USE DYNAMIC TYPE & AUTOLAYOUT CocoaHeads ! Stockholm
32. WHAT? CocoaHeads ! Stockholm
33. CocoaHeads ! Stockholm
34. CocoaHeads ! Stockholm
35. CocoaHeads ! Stockholm
36. WHAT'S GOING ON HERE? > Dynamic Type: Use text styles with preferredFontForTextStyle > Dynamic Type: Use adjustsFontsForContent SizeCategory on UILabel, UITextView, etc. CocoaHeads ! Stockholm
37. WHAT'S GOING ON HERE? > Use AutoLayout so text can wrap and expand its container > BONUS: see preferredContentSizeCategory on UIApplication to change layout when needed CocoaHeads ! Stockholm
38. WHY? CocoaHeads ! Stockholm
39. You provide the content... Your users decide how they want to see it. CocoaHeads ! Stockholm
40. > Low-vision users > Elderly users > Any users with text size preferences! CocoaHeads ! Stockholm
41. 3 DON'T MAKE PEOPLE TAP TINY THINGS CocoaHeads ! Stockholm
42. WHAT? CocoaHeads ! Stockholm
43. CocoaHeads ! Stockholm
44. TAP TARGETS SHOULD BE... > At least 44x44 pts (in other words, about 9 mm sq) > At least 32 pts apart CocoaHeads ! Stockholm
45. WHY? CocoaHeads ! Stockholm
46. > Low-vision users > Users with motor impairments CocoaHeads ! Stockholm
47. AND, SERIOUSLY, HAVE YOU EVER TRIED TO TAP THE USER NAME OF SOMEONE WHO "LIKED" YOU PICTURE ON INSTAGRAM?!?! CocoaHeads ! Stockholm
48. 4 USE STANDARD UIKIT COMPONENTS WHENEVER POSSIBLE CocoaHeads ! Stockholm
49. WHAT? CocoaHeads ! Stockholm
50. CocoaHeads ! Stockholm
51. CocoaHeads ! Stockholm
52. PLEASE DON'T DO THAT... (or do it very carefully...) CocoaHeads ! Stockholm
53. WHY? CocoaHeads ! Stockholm
54. UIKIT PROVIDES LOTS OF BUILT IN ACCESSIBILITY FOR FREE! > Controls have the correct traits for VoiceOver > Navigation gestures "just work!" > Users are accustomed to these standard behaviors! CocoaHeads ! Stockholm
55. In the end, if you do build your own UI component, be sure it's as accessible as the Apple version! CocoaHeads ! Stockholm
56. 5 COMMUNICATE IMPORTANT INFORMATION USING MULTIPLE MODES CocoaHeads ! Stockholm
57. WHAT? CocoaHeads ! Stockholm
58. CocoaHeads ! Stockholm
59. CocoaHeads ! Stockholm
60. CocoaHeads ! Stockholm
61. CocoaHeads ! Stockholm
62. WHY? CocoaHeads ! Stockholm
63. > We don't know the best way in which to communicate to our users. > Might be visual or auditory? > Might be color or placement? > When we need to communicate important info, it's best to use multiple modes CocoaHeads ! Stockholm
64. IN OTHER WORDS... > Pair an auditory cue with a visual one! > Within your visual cues, use both color and placement/ content/style change > Also consider haptics > Announce information via VoiceOver's UIAccessibilityPostNotification CocoaHeads ! Stockholm
65. 6 IMAGES ARE IMAGES. TEXT IS TEXT. CocoaHeads ! Stockholm
66. WHAT? CocoaHeads ! Stockholm
67. CocoaHeads ! Stockholm
68. IMAGES ARE EITHER... > Provided by your users (i.e. Instagram) > Conveying information (i.e. tab bar images) > Decorative only (i.e. non-actionable logo) CocoaHeads ! Stockholm
69. IMAGES SHOULD NOT... CONTAIN TEXT CocoaHeads ! Stockholm
70. WHY? CocoaHeads ! Stockholm
71. > No VoiceOver support for free > The text size won't scale > Localization CocoaHeads ! Stockholm
72. 7 TEST WITH VOICEOVER CocoaHeads ! Stockholm
73. WHAT? CocoaHeads ! Stockholm
74. VOICEOVER! CocoaHeads ! Stockholm
75. CocoaHeads ! Stockholm
76. CocoaHeads ! Stockholm
77. USING VOICEOVER > Swipe or slide finger to move > Double-tap to select > 3-finger swipe to scroll Try Settings ➡ General ➡ Accessibility ➡ VoiceOver ➡ VoiceOver Practice You must turn on VoiceOver first CocoaHeads ! Stockholm
78. TOP 4 TESTS 1. Can you navigate everywhere in your app? 2. Can you tap every tappable thing? 3. Can you hear every bit of text? 4. Can you hear every image that conveys information? CocoaHeads ! Stockholm
79. WHAT DO I DO WHEN I FIND AN ISSUE? CocoaHeads ! Stockholm
80. IS THE CURSOR NOT FINDING SOMETHING? This can usually be fixed by toggling isAccessibilityElement CocoaHeads ! Stockholm
81. IS SOMETHING NOT SPEAKING THE CORRECT NAME? This can usually be fixed by correctly setting accessibilityLabel CocoaHeads ! Stockholm
82. WHY? CocoaHeads ! Stockholm
83. > Blind and visually impaired users > Switch system users > Automation also! CocoaHeads ! Stockholm
84. 8 SIMPLIFY!! CocoaHeads ! Stockholm
85. WHAT? CocoaHeads ! Stockholm
86. CocoaHeads ! Stockholm
87. CocoaHeads ! Stockholm
88. IN MORE CONCRETE TERMS... > Favor navigation over a complex UI > Keep color schemes simple CocoaHeads ! Stockholm
89. ALSO, DON'T REINVENT THE WHEEL CocoaHeads ! Stockholm
90. WHY? CocoaHeads ! Stockholm
91. Simplicity favors those of all abilities CocoaHeads ! Stockholm
92. Simplicity favors those of all ages CocoaHeads ! Stockholm
93. Too many colors can overwhelm CocoaHeads ! Stockholm
94. Too many colors can cause information to be lost CocoaHeads ! Stockholm
95. 9 DON'T OVERDO IT WITH GESTURES! CocoaHeads ! Stockholm
96. WHAT? CocoaHeads ! Stockholm
97. CocoaHeads ! Stockholm
98. GESTURES CAN MAKE APPS FEEL... > unique! > fun! > content-focused! CocoaHeads ! Stockholm
99. BUT CocoaHeads ! Stockholm
100. GESTURE ALSO... > must be discovered or taught > require memorization > often require dexterity > frequently don't "tell" you if do it wrong > aren't consistent across apps CocoaHeads ! Stockholm
101. THINK OF GESTURES AS POWER USER FEATURES CocoaHeads ! Stockholm
102. THINK OF GESTURES AS POWER FEATURES > They should make things easier. > They should help users save time. > There should be a simpler way to do the same thing CocoaHeads ! Stockholm
103. Also! Gestures should be forgiving! CocoaHeads ! Stockholm
104. WHY? CocoaHeads ! Stockholm
105. VOICEOVER > Conflicts with VoiceOver Gestures > Some gestures have custom VoiceOver versions CocoaHeads ! Stockholm
106. MOTOR CHALLENGES > Difficulty completing gestures > Accidentally gesturing CocoaHeads ! Stockholm
107. COGNITIVE CHALLENGES > Learning curve > Memorization CocoaHeads ! Stockholm
108. 10 TALK TO AND LISTEN TO YOUR USERS CocoaHeads ! Stockholm
109. WHAT? CocoaHeads ! Stockholm
110. CocoaHeads ! Stockholm
111. Often, we don't have someone in house who is blind or low-vision or hard of hearing or has a motor impairment or... CocoaHeads ! Stockholm
112. CocoaHeads ! Stockholm
113. CocoaHeads ! Stockholm
114. CocoaHeads ! Stockholm
115. MAKE IT EASY FOR YOUR USERS TO REACH YOU! CocoaHeads ! Stockholm
116. MAKE IT KNOWN THAT YOU CARE ABOUT ACCESSIBILITY #A11Y CocoaHeads ! Stockholm
117. WHY? CocoaHeads ! Stockholm
118. WHY? > Our users want to use our product. > Our users, especially those of different abilities, offer unique perspectives. > If our product isn't for all of our users, then who is it for exactly? CocoaHeads ! Stockholm
119. IN REVIEW... CocoaHeads ! Stockholm
120. 1. Have high color contrast ratios. 2. Use Dynamic Type & AutoLayout. CocoaHeads ! Stockholm
121. 3. Don't make people tap tiny things. 4. Use standard UIKit components whenever possible. CocoaHeads ! Stockholm
122. 5. Communicate dynamic information using multiple modes. 6. Images are images. Text is text. CocoaHeads ! Stockholm
123. 7. Test with VoiceOver. 8. Simplify! CocoaHeads ! Stockholm
124. 9. Don't overdo it with gestures. 10. Talk to and listen to your users. CocoaHeads ! Stockholm
125. IN CONCLUSION... CocoaHeads ! Stockholm
126. MAKING YOUR APP MORE ACCESSIBLE DOES NOT REQUIRE YOU TO BE AN ACCESSIBILITY EXPERT! CocoaHeads ! Stockholm
127. MAKING YOUR APP MORE ACCESSIBLE BENEFITS EVERYONE! CocoaHeads ! Stockholm
128. MAKING YOUR APP ACCESSIBLE IS THE RIGHT THING TO DO! CocoaHeads ! Stockholm
129. THANK YOU! FIND ME ON TWITTER @SOMMER CocoaHeads ! Stockholm
130. RESOURCES > https://www.smashingmagazine.com/2014/10/color- contrast-tips-and-tools-for-accessibility/ > https://useyourloaf.com/blog/supporting-dynamic-type/ > https://useyourloaf.com/blog/larger-dynamic-type-for- accessibility/ > https://www.applevis.com/guides/ios-voiceover/ complete-list-ios-gestures-available-voiceover-users CocoaHeads ! Stockholm
131. RESOURCES > https://webaim.org/resources/contrastchecker/ > https://www.w3.org/WAI/intro/wcag CocoaHeads ! Stockholm
132. STATS AND DATA > https://www.powermapper.com/blog/website-accessibility- disability-statistics/ > http://www.who.int/disabilities/world_report/2011/ report/en/ > https://siteimprove.com/en-us/blog/why-web- accessibility-should-be-a-priority-now-3-stats-to-prove- it/ > https://www.w3.org/WAI/bcase/resources CocoaHeads ! Stockholm
133. OTHER TALKS ON IOS ACCESSIBILITY > https://www.youtube.com/watch?v=G01Ac5njNSs > https://www.youtube.com/watch?v=-fgSOStivSE > https://www.youtube.com/watch?v=4lzP1SsCcyw > https://www.youtube.com/watch?v=lCvUwkjgkhU CocoaHeads ! Stockholm