Building Accessible Android Apps (Detroit Labs)

Slide 1

Slide 1 text

Building Accessible Android Apps

Slide 2

Slide 2 text

This Talk • Why Accessibility • Why Me • What • Tools • Process • Practice

Slide 3

Slide 3 text

Why Accessibility

Slide 4

Slide 4 text

Why Accessibility • 57 million with a disability1 • 8 million with vision difﬁculty • 323 million with "situational disabilities": • occupied hand • noisy room • sunny day 1 https://www.census.gov/newsroom/releases/pdf/cb12ff-16_disabilities.pdf

Slide 5

Slide 5 text

Why Accessibility

Slide 6

Slide 6 text

Why Me

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

IANAL

Slide 9

Slide 9 text

What

Slide 10

Slide 10 text

What

Slide 11

Slide 11 text

What

Slide 12

Slide 12 text

What

Slide 13

Slide 13 text

Dev guidelines • Material Design -> Usability -> Accessibility • android.com Accessibility API Guide + many more if you need to comply with Actual Laws

Slide 14

Slide 14 text

Dev goals 1. High contrast

Slide 15

Slide 15 text

High contrast

Slide 16

Slide 16 text

Dev goals 1. High contrast 2. Avoid color-only/sound-only cues

Slide 17

Slide 17 text

Multi-dimensional cues

Slide 18

Slide 18 text

Dev goals 1. High contrast 2. Avoid color-only/sound-only cues 3. Graceful scaling

Slide 19

Slide 19 text

Graceful scaling

Slide 20

Slide 20 text

Graceful scaling

Slide 21

Slide 21 text

Graceful scaling

Slide 22

Slide 22 text

Graceful scaling

Slide 23

Slide 23 text

Graceful scaling

Slide 24

Slide 24 text

Graceful scaling

Slide 25

Slide 25 text

Dev goals 1. High contrast 2. Avoid color-only/sound-only cues 3. Graceful scaling 4. Large touch targets

Slide 26

Slide 26 text

Large touch targets

Slide 27

Slide 27 text

Large touch targets

Slide 28

Slide 28 text

Dev goals 1. High contrast 2. Avoid color-only/sound-only cues 3. Graceful scaling 4. Large touch targets 5. Access!

Slide 29

Slide 29 text

Access

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Grouping/Ordering/Labeling

Slide 32

Slide 32 text

Tools: If You Don't It, You Can't It

Slide 33

Slide 33 text

Material Cue What? Third party Android app that overlays apps with material grids Checks: • Touch targets, sorta

Slide 34

Slide 34 text

Material Cue

Slide 35

Slide 35 text

Material Cue Links: • Play Store page

Slide 36

Slide 36 text

Accessibility Scanner What? Google-published Android app Checks: • Contrast • Touch targets • Labeling

Slide 37

Slide 37 text

Accessibility Scanner

Slide 38

Slide 38 text

Accessibility Scanner

Slide 39

Slide 39 text

Accessibility Scanner

Slide 40

Slide 40 text

Accessibility Scanner

Slide 41

Slide 41 text

Accessibility Scanner

Slide 42

Slide 42 text

Accessibility Scanner Links: • Play Store page • Getting Started guide

Slide 43

Slide 43 text

Android Lint What? Google-published code scanning tool; integrates with Gradle Checks: • Access • Labeling

Slide 44

Slide 44 text

Android Lint

Slide 45

Slide 45 text

Android Lint Links: • User Guide • List of all lint checks

Slide 46

Slide 46 text

Espresso What? • Android's (clear box) UI testing framework • AccessibilityChecks .enable() .setRunChecksFromRootView(true); Checks: • ?

Slide 47

Slide 47 text

Espresso Links: • Espresso setup instructions • Enabling Espresso's accessibility checks • List of all Espresso accessibility checks (currently broken)

Slide 48

Slide 48 text

TalkBack What? Android's built-in screen reader (an AccessibilityService). Checks: • Access (unique!) • Element grouping/ordering/labeling (unique!)

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

TalkBack

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

TalkBack • Toggle by holding volume up+down for 3 seconds2 • Touches are "hijacked" • One ﬁnger → two ﬁngers for gestures (e.g. scroll) 2 See https://support.google.com/accessibility/android/answer/6006966 if this doesn't work.

Slide 55

Slide 55 text

TalkBack • Toggle by holding volume up+down for 3 seconds2 • Touches are "hijacked" • One ﬁnger → two ﬁngers 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.

Slide 56

Slide 56 text

Process

Slide 57

Slide 57 text

Process "When we started building responsive sites we quickly realized how inefﬁcient 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/

Slide 58

Slide 58 text

Process 1. Learn measurement tools & techniques

Slide 59

Slide 59 text

Measurement Tools & Techniques • See earlier slides • android.com Accessibility Testing Guide

Slide 60

Slide 60 text

Process 1. Learn measurement tools & techniques 2. Promote consistency

Slide 61

Slide 61 text

Consistency: style guides • Produced by designers, for developers • Translate to reusable themes/styles/dimensions

Slide 62

Slide 62 text

Consistency: style guides

Slide 63

Slide 63 text

Consistency: style guides

Slide 64

Slide 64 text

Consistency: style guides

Slide 65

Slide 65 text

Consistency: style guides

Slide 66

Slide 66 text

Consistency: style guides

Slide 67

Slide 67 text

Process 1. Learn measurement tools & techniques 2. Promote consistency 3. Audit new designs

Slide 68

Slide 68 text

Process 1. Learn measurement tools & techniques 2. Promote consistency 3. Audit new designs 4. Enable simple automatic checks

Slide 69

Slide 69 text

Simple automatic checks: Gnag • Maintained by Bryan Kelly • Wraps major code quality tools, including Android Lint • ./gradlew gnagCheck locally • ./gradlew gnagReport on CI

Slide 70

Slide 70 text

Simple automatic checks: Gnag

Slide 71

Slide 71 text

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' }

Slide 72

Slide 72 text

Simple automatic checks: Gnag

Slide 73

Slide 73 text

Simple automatic checks: Gnag

Slide 74

Slide 74 text

Process 1. Learn measurement tools & techniques 2. Promote consistency 3. Audit new designs 4. Enable simple automatic checks 5. Prepare diverse test environments

Slide 75

Slide 75 text

Diverse test environments

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Practice

Slide 79

Slide 79 text

Practice: States • Toggle View state (e.g. View.setSelected) to match UI state

Slide 80

Slide 80 text

Practice: States

Slide 81

Slide 81 text

Practice: Scaling • sp over dp for text, always

Slide 82

Slide 82 text

Practice: Scaling • sp over dp for text, always • Test on a tiny AVD with huge font (scrolling)

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Practice: Dynamic Labels • Set contentDescription to @null for and use corresponding Java APIs on change (View.setContentDescription)

Slide 86

Slide 86 text

Practice: Toggles • Unavoidable confusion (current state vs next action)

Slide 87

Slide 87 text

Practice: Toggles

Slide 88

Slide 88 text

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+)

Slide 89

Slide 89 text

Practice: Grouping • Group logically-related views together for simpler traversal

Slide 90

Slide 90 text

Practice: Grouping • Group logically-related views together for simpler traversal • Set android:focusable="true" on the parent view

Slide 91

Slide 91 text

Practice: Grouping • Group logically-related views together for simpler traversal • Set android:focusable="true" on the parent view • (Usually also want android:focusableInTouchMode="false")

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Practice: Titles • Activity labels are read on start • Application label is read on the overview screen

Slide 94

Slide 94 text

Practice: Acronyms • Use spaces to force separate reading, e.g. "EV" -> "E V"

Slide 95

Slide 95 text

Practice: Extra Detail • If standard triggers are insufﬁcient, announce manually with View.announceForAccessibility

Slide 96

Slide 96 text

Practice: Custom Views • Ofﬁcial guide • Multiple methods to override to populate appropriate info: • dispatchPopulateAccessibilityEvent • onPopulateAccessibilityEvent • onInitializeAccessibilityEvent • onInitializeAccessibilityNodeInfo

Slide 97

Slide 97 text

Practice: Localization • Custom accessibility labels can be localized too... • ...so store them in a strings ﬁle

Slide 98

Slide 98 text

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)

Slide 99

Slide 99 text

No content