Is your app for everyone? A primer on accessibility for Android

When it comes to accessibility support, it can be difficult for teams to know what to focus on and how to get started. Sometimes it can be hard to justify the effort when teams think it only benefits a "few" users, which is a debatable assumption. Whether you're new to the subject or you're keen on knowing more about it, this talk is for you.

In this talk, you will learn how supporting accessibility helps in a lot of different cases, from temporal illnesses or reversible situations to severe disabilities. Moreover, you will learn how people use different Android accessibility services such as Talkback or SwitchAccess to interact with your application in a different way. We will also explore the current range of developer tools that can be used to spot potential accessibility issues in our apps.

And finally, you will learn how developers, designers and product managers can work together to make sure that we create experiences for everyone.

Transcript

1. Is your app for everyone? A primer on accessibility for Android David Lázaro @_dlazaro
2. Accessibility?
3. How many of you need glasses?
4. How many of you are left-handed? Sorry, what?
5. Source: bit.ly/lefthanded-desks Source: www.nickimerrall.co.uk
6. Source: bit.ly/lh-scissors Source: bit.ly/golf-clubs-lh
7. Is anyone here colour-blind?
10. Protanopia (red) [1% males; 0.01% females]
11. Deuteranopia (green) [7% males; 0.4% females]
12. Tritanopia (blue) < 0.1%
13. Monochromacy <0.001%
14. Report on accessibility (WHO) “More than a billion people are estimated to live with some form of disability, or about 15% of the world’s population.” bit.ly/accessibility-report
15. Source: bit.ly/ms-design-toolkit
16. Source: bit.ly/ms-design-toolkit
17. Source: bit.ly/ms-design-toolkit
18. Source: bit.ly/ms-design-toolkit
19. Source: bit.ly/ms-design-toolkit
20. Source: bit.ly/ms-design-toolkit
21. Source: bit.ly/ms-design-toolkit
22. Source: bit.ly/ms-design-toolkit
23. Source: bit.ly/ms-design-toolkit
24. Source: bit.ly/ms-design-toolkit
25. Visual • Low vision
26. Visual • Low vision • Low contrast Source: bit.ly/sunlight-phone
27. Visual • Low vision • Low contrast • Color blindness Source: bit.ly/colorblind-colors
28. Visual • Low vision • Low contrast • Color blindness • Partially detached retina Source: bit.ly/detached-retina
29. Visual • Low vision • Low contrast • Color blindness • Partially detached retina • Complete blindness
30. Cognitive impairments • Epilepsy • Anxiety • Motion sickness
31. Cognitive impairments • Epilepsy • Anxiety • Motion sickness
32. Cognitive impairments • Epilepsy • Anxiety • Motion sickness There’s only 1 room left! Book now!
33. Did you know? Ishihara colour-blind test This is just a pause to drink water
34. Tech is here to help
35. Lookout (Google) An app to help blind and visually impaired people learn about their surroundings bit.ly/google-lookout
36. Lookout (Google) An app to help blind and visually impaired people learn about their surroundings bit.ly/google-lookout
37. Outbarriers Visible shops for everyone outbarriers.com
38. Chord assist (Joe Birch) Chord Assist: Building an accessible smart guitar for the blind, deaf and mute bit.ly/chord-assist
39. Accessibility services
41. Accessibility services • Talkback • SwitchAccess • Font size • Display size • Color/Display tools • Zoom magnification • Power button end calls • Auto-rotate screen • Mono audio
42. Talkback
43. Talkback
44. Talkback - “Search button, double tap to activate” - “Showing keyboard” - “M-E-E-T-I-N-G-S” - “Clear query button” - “Cameron Herold, Meetings suck, double tap to activate”
45. Talkback
46. Talkback - “9% audio progress seek control” - “15% audio progress seek control” - “Rewind button” - “Previous chapter button” - “Pause button”
47. Talkback
48. Talkback Action: Swipe up and right - “Page navigation, in list 2 items” - “Next page” - “Multipage view, Meetings suck”
49. Talkback - “1 face, center, with 30% of screen, good for selfie”
50. Talkback - “1 face, center, with 30% of screen, good for selfie”
51. SwitchAccess Source: www.atandme.com
52. SwitchAccess
53. SwitchAccess - Action: Tap next button
54. SwitchAccess - Action: Tap next button - Action: Tap next button
55. SwitchAccess - Action: Tap next button - Action: Tap next button - Action: Tap next button
56. SwitchAccess - Action: Tap next button - Action: Tap next button - Action: Tap next button - Action: Tap OK button
57. Font/Display size
58. Font/Display size Smallest font Biggest font Smallest display size Biggest display size
59. As Android developers, what can we do?
60. Don’t rely on colours to indicate state Do Don’t
61. Contrast ratio • Value from 1.00–21.00 • Make sure 4.50 for small text and 3.00 for big text • contrast-ratio.com

62. Can you read this? Can you read this? Ratio 21 Contrast ratio Can you read this? Can you read this? Ratio 12 Can you read this? Can you read this? Ratio 4 Can you read this? Can you read this? Ratio 2 PASS PASS PASS PASS PASS FAIL FAIL FAIL Small text Big text
63. Ensure touch size is enough 48dp x 48dp at least
64. Ensure touch size is enough 48dp x 48dp at least Annoying ad x
65. Ensure touch size is enough 48dp x 48dp at least Annoying ad x
66. Use sp (scalable pixels) <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello, world!" android:textSize="30sp"/>
67. Use sp (scalable pixels) <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello, world!" android:textSize="30sp"/>
68. Ensure proper TalkBack navigation - “Unlabeled button” - “Unlabeled button” - “Unlabeled button” - “Unlabeled button” - “Unlabeled button”
69. Ensure proper TalkBack navigation - “Unlabeled button” - “Unlabeled button” - “Unlabeled button” - “Unlabeled button” - “Unlabeled button”
70. Ensure proper TalkBack navigation <ImageView android:id="@+id/btnPrevChapter" android:layout_width="48dp" android:layout_height="48dp" android:contentDescription="@string/accessibility_previous_chapter" app:srcCompat="@drawable/previous_player_control_button"/>
71. Ensure proper TalkBack navigation <ImageView android:id="@+id/btnPrevChapter" android:layout_width="48dp" android:layout_height="48dp" android:contentDescription="@string/accessibility_previous_chapter" app:srcCompat="@drawable/previous_player_control_button"/>
72. Ensure proper TalkBack navigation if (playing) view.contentDescription = "Pause Audio" else view.contentDescription = "Play Audio"
73. Ensure proper TalkBack navigation <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:importantForAccessibility = "yes | no | noHideDescendants" app:srcCompat="@drawable/company_logo"/>
74. Ensure proper TalkBack navigation <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:importantForAccessibility = "yes | no | noHideDescendants" app:srcCompat="@drawable/company_logo"/>
75. Ensure proper TalkBack navigation <LinearLayout android:id="@+id/book_data_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:focusable="true"> <TextView android:text="@string/book_title" /> <TextView android:text=“@string/book_author” /> ... </LinearLayout>
76. Ensure proper TalkBack navigation <LinearLayout android:id="@+id/book_data_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:focusable="true"> <TextView android:text="@string/book_title" /> <TextView android:text=“@string/book_author” /> ... </LinearLayout> <LinearLayout android:id="@+id/book_data_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:focusable="true"> <TextView android:text="@string/book_title" /> <TextView android:text=“@string/book_author” /> ... </LinearLayout>
77. Ensure proper TalkBack navigation <LinearLayout android:id="@+id/book_data_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:focusable="true"> <TextView android:text="@string/book_title" /> <TextView android:text=“@string/book_author” /> ... </LinearLayout>
78. Ensure proper TalkBack navigation <EditText android:id="@+id/email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/email_address_hint" />
79. Ensure proper TalkBack navigation <EditText android:id="@+id/email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/email_address_hint" />
80. Ensure proper TalkBack navigation <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/email_subject_label" android:labelFor="@id/email_subject" /> <EditText android:id="@+id/email_subject" android:layout_width="wrap_content" android:layout_height="wrap_content" />
81. Ensure proper TalkBack navigation <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/email_subject_label" android:labelFor="@id/email_subject" /> <EditText android:id="@+id/email_subject" android:layout_width="wrap_content" android:layout_height="wrap_content" />
82. Improve UX if there’s a spoken accessibility service enabled
83. Improve UX if there’s a spoken accessibility service enabled i.e. replace a seekbar with rewind/fast forward buttons
84. Improve UX if there’s a spoken accessibility service enabled accessibilityManager: AccessibilityManager = context.getSystemService(Context.ACCESSIBILITY_SERVICE)
85. Improve UX if there’s a spoken accessibility service enabled accessibilityManager: AccessibilityManager = context.getSystemService(Context.ACCESSIBILITY_SERVICE) accessibilityManager .getEnabledAccessibilityServiceList( AccessibilityServiceInfo.FEEDBACK_SPOKEN) .isEmpty()
86. Use custom views the right way bit.ly/airbnb-a11y
87. Did you know? A11Y = AccessibilitY 11 chars This is just another pause to drink water
88. Developer tools
89. Lint $> ./gradlew lint
90. Lint
91. Lint
92. Simulate color space
93. Simulate color space
94. Simulate color space
95. Simulate color space
96. Accessibility Scanner
97. Espresso AccessibilityChecks.enable()
98. Pre-launch report
99. Not a developer tool but… • Learn how to use the same accessibility services! • User interviews

100. Making your team aware
101. Let’s talk the same language <resources> <color name="light_grey">#BAC8CE</color> <color name="mid_grey">#838f93</color> <color name="dark_grey">#3A4649</color> <color name="blinkist_green">#2CE080</color> ... <color name="midnight">#03314B</color> ... </resources>
102. Continuous feedback
103. Accessibility advocate role Mission: - Making everyone aware of the importance of the topic • Organize workshops • Share updates
104. FAQ
105. That's nice, but how do I convince my managers to invest time on it? ! " #
106. I’m the only developer of my company or an indie developer, I can’t allocate that much time to fine tune my app $ % & ⚠
107. My company doesn’t allow us to even write tests… (
108. But shouldn't public entities embrace this? Shouldn't it be a requirement?
109. YES
110. Recap
111. Take aways from this talk • Small things → Big impact • Make it part of your development process • Advocate for it • It’s a team-wide effort
112. Empathy
113. Who to follow @ataulm @googleaccess @hitherejoe @TTGonda @HugoGiraudel
114. Know more • Material design docs: • https:/ /material.io/design/usability/accessibility.html • Deque university: • https:/ /dequeuniversity.com • Android devs docs: • https:/ /developer.android.com/guide/topics/ui/accessibility/index.html • Android devs YT channel: • https:/ /www.youtube.com/channel/UCVHFbqXqoYvEWM1Ddxl0QDg • WHO report: • https:/ /www.who.int/disabilities/world_report/2011/en/ • Ataul Munim @ Droidcon Berlin: • https:/ /www.youtube.com/watch?v=dm05qny_kfE • Android a11y, getting started by Victoria Gonda: • https:/ /www.raywenderlich.com/240-android-accessibility-tutorial-getting-started
115. Thanks. @_dlazaro david@blinkist.com