Building Accessible Android Apps (Detroit Labs)

Detroit Labs has committed to building more accessible applications in 2018. This internal talk goes beyond the "how" and recommends tools, processes, and practices that make it easier to build accessibility into your Android apps.

1. Building Accessible Android Apps
2. This Talk • Why Accessibility • Why Me • What • Tools • Process • Practice
3. Why Accessibility
4. Why Accessibility • 57 million with a disability1 • 8 million with vision difficulty • 323 million with "situational disabilities": • occupied hand • noisy room • sunny day 1 https://www.census.gov/newsroom/releases/pdf/cb12ff-16_disabilities.pdf
5. Why Accessibility
6. Why Me
8. IANAL
9. What
10. What
11. What
12. What
13. Dev guidelines • Material Design -> Usability -> Accessibility • android.com Accessibility API Guide + many more if you need to comply with Actual Laws
14. Dev goals 1. High contrast
15. High contrast
16. Dev goals 1. High contrast 2. Avoid color-only/sound-only cues
17. Multi-dimensional cues
18. Dev goals 1. High contrast 2. Avoid color-only/sound-only cues 3. Graceful scaling
19. Graceful scaling
20. Graceful scaling
21. Graceful scaling
22. Graceful scaling
23. Graceful scaling
24. Graceful scaling
25. Dev goals 1. High contrast 2. Avoid color-only/sound-only cues 3. Graceful scaling 4. Large touch targets
26. Large touch targets
27. Large touch targets
28. Dev goals 1. High contrast 2. Avoid color-only/sound-only cues 3. Graceful scaling 4. Large touch targets 5. Access!
29. Access
30. Dev goals 1. High contrast 2. Avoid color-only/sound-only cues 3. Graceful scaling 4. Large touch targets 5. Access! 6. Appropriate view grouping/ordering/labeling
31. Grouping/Ordering/Labeling
32. Tools: If You Don't It, You Can't It
33. Material Cue What? Third party Android app that overlays apps with material grids Checks: • Touch targets, sorta
34. Material Cue
35. Material Cue Links: • Play Store page
36. Accessibility Scanner What? Google-published Android app Checks: • Contrast • Touch targets • Labeling
37. Accessibility Scanner
38. Accessibility Scanner
39. Accessibility Scanner
40. Accessibility Scanner
41. Accessibility Scanner
42. Accessibility Scanner Links: • Play Store page • Getting Started guide
43. Android Lint What? Google-published code scanning tool; integrates with Gradle Checks: • Access • Labeling
44. Android Lint
45. Android Lint Links: • User Guide • List of all lint checks
46. Espresso What? • Android's (clear box) UI testing framework • AccessibilityChecks .enable() .setRunChecksFromRootView(true); Checks: • ?
47. Espresso Links: • Espresso setup instructions • Enabling Espresso's accessibility checks • List of all Espresso accessibility checks (currently broken)
48. TalkBack What? Android's built-in screen reader (an AccessibilityService). Checks: • Access (unique!) • Element grouping/ordering/labeling (unique!)
50. Aside: AccessibilityService • Base class for all accessibility services • Implementations: • Register for single app/entire system • Receive all AccessibilityEvents issued by views • Do something with these events
51. TalkBack
52. TalkBack • Toggle by holding volume up+down for 3 seconds2 2 See https://support.google.com/accessibility/android/answer/6006966 if this doesn't work.
53. TalkBack • Toggle by holding volume up+down for 3 seconds2 • Touches are "hijacked" 2 See https://support.google.com/accessibility/android/answer/6006966 if this doesn't work.
54. TalkBack • Toggle by holding volume up+down for 3 seconds2 • Touches are "hijacked" • One finger → two fingers for gestures (e.g. scroll) 2 See https://support.google.com/accessibility/android/answer/6006966 if this doesn't work.
55. TalkBack • Toggle by holding volume up+down for 3 seconds2 • Touches are "hijacked" • One finger → two fingers for gestures (e.g. scroll) • View descriptions are read on selection 2 See https://support.google.com/accessibility/android/answer/6006966 if this doesn't work.
56. Process
57. Process "When we started building responsive sites we quickly realized how inefficient it would be to build a desktop-only site and "add responsiveness" later." "Accessibility is the same: When you plan for accessibility and build it in from the beginning, the resulting product is better and the effort is much lower."3 3 https://www.viget.com/articles/how-to-implement-accessibility-in-agency-projects-part-2/
58. Process 1. Learn measurement tools & techniques
59. Measurement Tools & Techniques • See earlier slides • android.com Accessibility Testing Guide
60. Process 1. Learn measurement tools & techniques 2. Promote consistency
61. Consistency: style guides • Produced by designers, for developers • Translate to reusable themes/styles/dimensions
62. Consistency: style guides
63. Consistency: style guides
64. Consistency: style guides
65. Consistency: style guides
66. Consistency: style guides
67. Process 1. Learn measurement tools & techniques 2. Promote consistency 3. Audit new designs
68. Process 1. Learn measurement tools & techniques 2. Promote consistency 3. Audit new designs 4. Enable simple automatic checks
69. Simple automatic checks: Gnag • Maintained by Bryan Kelly • Wraps major code quality tools, including Android Lint • ./gradlew gnagCheck locally • ./gradlew gnagReport on CI
70. Simple automatic checks: Gnag
71. Simple automatic checks: Gnag buildscript { repositories { jcenter() } dependencies { classpath 'com.btkelly:gnag:2.0.0' } } apply plugin: 'gnag' gnag.github { repoName 'detroit-labs/gains-android' } android.lintOptions { error 'ContentDescription', 'LabelFor' }
72. Simple automatic checks: Gnag
73. Simple automatic checks: Gnag
74. Process 1. Learn measurement tools & techniques 2. Promote consistency 3. Audit new designs 4. Enable simple automatic checks 5. Prepare diverse test environments
75. Diverse test environments
76. Process 1. Learn measurement tools & techniques 2. Promote consistency 3. Audit new designs 4. Enable simple automatic checks 5. Prepare diverse test environments 6. Perform complex manual checks (TalkBack) routinely
77. PR template? ✅ Focus order/grouping is correct on changed screens ✅ Important elements are focusable ✅ Unimportant elements are not focusable ✅ Changed touch targets are at least 48dp x 48dp ✅ Changed images have appropriate descriptions ✅ Changed buttons have appropriate dynamic descriptions ✅ Changed screens adjust appropriately for tiny/huge fonts
78. Practice
79. Practice: States • Toggle View state (e.g. View.setSelected) to match UI state
80. Practice: States
81. Practice: Scaling • sp over dp for text, always
82. Practice: Scaling • sp over dp for text, always • Test on a tiny AVD with huge font (scrolling)
83. Practice: Scaling • sp over dp for text, always • Test on a tiny AVD with huge font (scrolling) • Choose match_parent over wrap_content for widths when possible
84. Practice: Static Labels • Defaults to text if available (TextView, Button, etc.) • Don't include view type in label • Require android:contentDescription or android:importantForAccessibility for all images/ image buttons/FABs • Make sure list item descriptions contain identifying information
85. Practice: Dynamic Labels • Set contentDescription to @null for and use corresponding Java APIs on change (View.setContentDescription)
86. Practice: Toggles • Unavoidable confusion (current state vs next action)
87. Practice: Toggles
88. Practice: Ordering • android:nextFocusForward and android:nextFocusBack are used by TalkBack • android:nextFocusLeft, android:nextFocusRight, android:nextFocusDown, and android:nextFocusUp are not (may be by other services?) • Also: android:accessibilityTraversalBefore (API 22+)
89. Practice: Grouping • Group logically-related views together for simpler traversal
90. Practice: Grouping • Group logically-related views together for simpler traversal • Set android:focusable="true" on the parent view
91. Practice: Grouping • Group logically-related views together for simpler traversal • Set android:focusable="true" on the parent view • (Usually also want android:focusableInTouchMode="false")
92. Practice: Grouping • Group logically-related views together for simpler traversal • Set android:focusable="true" on the parent view • (Usually also want android:focusableInTouchMode="false") • Setting a contentDescription on the parent view implies both of the above
93. Practice: Titles • Activity labels are read on start • Application label is read on the overview screen
94. Practice: Acronyms • Use spaces to force separate reading, e.g. "EV" -> "E V"
95. Practice: Extra Detail • If standard triggers are insufficient, announce manually with View.announceForAccessibility
96. Practice: Custom Views • Official guide • Multiple methods to override to populate appropriate info: • dispatchPopulateAccessibilityEvent • onPopulateAccessibilityEvent • onInitializeAccessibilityEvent • onInitializeAccessibilityNodeInfo
97. Practice: Localization • Custom accessibility labels can be localized too... • ...so store them in a strings file
98. Excellent Resources • Kelly Shuster: Android Is For Everyone (slides, video) • David Truxall: Accessibility in Android (slides, post) • Victoria Gonda: Android Accessibility Tutorial (article) • Instacart: A Month of Android Accessibility (article)