Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Accessible Android Apps (Detroit Labs)

3a6060bc7ace07fa75791cd5dac2d46a?s=47 Stuart Kent
January 25, 2018

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.

3a6060bc7ace07fa75791cd5dac2d46a?s=128

Stuart Kent

January 25, 2018
Tweet

Transcript

  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

  7. None
  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!)
  49. None
  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)
  99. None