Building apps for everyone: Getting started with Android accessibility - rockndroid

In this talk, you'll learn a few quick and easy tips to make your app usable for everyone, including people with accessibility needs. Moreover, you'll discover thay accessibility is not only avoir helping people with disabilities use your app, but a way to make the experience better for everyone. We'll also see how some brand new technologies such as Material You or Jetpack Compose can help making the experience better

Transcript

1. Cris Barreiro // @CrisBarreiro_ Android Engineer @ Spotify Making apps for everyone: Getting started with Android accessibility
2. 4%
3. 4% What does this number mean?
4. 4% Of all Android devices use Android 5.1 and below
5. 4% Of the world’s population is colorblind
6. But we don’t treat both numbers the same way
7. 15% Of the world’s population experiences some form of disability
8. Numbers increase dramatically if we take temporary and situational disabilities into account [1]
9. Contents
10. Contents 1. Accessibility services 2. How to make our apps accessible 3. Test for accessibility 4. Material You 5. Jetpack Compose
11. Accessibility services
13. TalkBack • Blind and visually impaired people • Removes the assumption that the user can see but leans into their ability to hear and touch the screen
14. SwitchAccess • Two or more switches, one to navigate, one to interact • Removes the assumption that the user can touch the screen
15. VoiceAccess • Interaction based on voice commands • Removes the assumption that the user can touch the screen
16. Do we have to write multiple versions of our app?
17. • Interactions: ◦ Device presenting information ◦ User performing actions Android’s Interaction Model [2]
18. • Information presented in different ways • Alternate methods to interact with the app Android’s Interaction Model [3]
19. • The Android Framework interacts with each accessibility service • Standard views are built to support accessibility out of the box Android’s Interaction Model [4]
20. Built-in accessibility… “Also vibrate for calls. Off. Switch. Double tap to activate” [5]
21. …with some exceptions “Unlabeled button. Double tap to activate” [6]
22. How to make our apps accessible?
23. Use standard Android components • Built-in accessibility support • Avoid clickable TextView or ImageView, use text styled Button and ImageButton instead
24. Use large, simple controls • Controls are easier to see and tap • Each interactive UI element have a focusable area, or touch target size, of at least 48dp ✕ 48dp
25. Use large, simple controls
26. Describe each UI element • Describe its purpose • Don't include the type of UI element • Not needed for TextView
27. Describe each UI element
28. Increase text visibility • Color contrast is the difference between two neighboring colors • Material Design Accessibility guidelines [7]
29. Other visual cues • Other design elements can help express the same amount of information. ✔ Do ✗ Don’t [8]
30. Test for accessibility
31. Android accessibility scanner • Developed by Google • Suggests accessibility improvements • Doesn’t require technical skills
32. Android Studio • Integrates the Android Accessibility Test Framework • To launch the panel, click on the error report button in the Layout Editor
33. [9]
34. Pre-launch reports • Generated when you upload an APK to the Play Store • Issues are categorized, clustered, and ranked by severity
35. [10]
36. Accessibility Test Framework + Espresso
37. Accessibility Test Framework + Espresso
38. Accessibility Test Framework + Robolectric • Add @AccessibilityChecks annotation • Removed in Robolectric 4.5
39. Material You
40. Material You • Unique Material palettes for everyone • Automatically handles critical adjustments to provide accessible color contrast
43. Material Theme Builder [11]
44. Jetpack Compose
45. Jetpack Compose • Built with accessibility in mind • Clickable components already set minimum size • Touch target size is increased if needed
46. Jetpack Compose • Images and icons require a description • Clickable modifier merges all descendants • Use mergeDescendants in the semantics modifier to merge elements
47. Describe each UI element
48. Describe each UI element
49. References
50. References • https://devblogs.microsoft.com/xamarin/the-journey-to-accessible-apps/ [1] • https://www.youtube.com/watch?v=LxKat_m7mHk [2, 3, 4, 5, 6] • https://material.io/design/usability/accessibility.html#color-and-contrast [7, 8] • https://developer.android.com/guide/topics/ui/accessibility/testing [9, 10] • https://material-foundation.github.io/material-theme-builder/ [11]
51. Questions? Feel free to reach out on Twitter @CrisBarreiro_