Build Apps For The Ones You Love

Britt loves her Nana so much. She’s funny, she’s cool and she always has strawberries for her.
When she told Britt she's starting to have difficulties to see, Britt went through some of her favorites apps which are actually hard to use.

Not every developer knows that with just some simple modifications, their app can be accessible for so many other users. You have the power to improve people’s lives, independence and inclusion, with just a few lines of code. And these people can actually be the ones you most care about.

In this session, Britt will share some tips on how to do that.

(Presented at Droidcon London 2018)

Transcript

1. Apps for everyone It s in your hands ! ‘ Britt Barak
2. Apps for everyone It s in your hands ! the ones you ‘ Britt Barak
3. Britt Barak Dev Experience @ Nexmo Google Developer Expert @brittBarak Britt Barak
4. @BrittBarak
5. @BrittBarak
6. @BrittBarak
7. @BrittBarak
8. @BrittBarak
9. @BrittBarak
10. @BrittBarak
11. Detector detector .execute(image) Result: @BrittBarak “Ben & Jerry’s pistachio ice cream pint”
12. beta @BrittBarak
13. & First Steps With ML-Kit @BrittBarak Who is afraid of Machine Learning?
14. Result @BrittBarak
15. Result @BrittBarak
16. Basic ideas @BrittBarak
17. android:textSize="20sp" Basic ideas scalable pixels (SP) @BrittBarak
18. @BrittBarak
19. @BrittBarak
20. @BrittBarak
21. @BrittBarak
22. @BrittBarak
23. @BrittBarak
24. @BrittBarak
25. @BrittBarak
26. @BrittBarak
27. @BrittBarak
28. @BrittBarak
29. @BrittBarak
30. Remember runtime! @BrittBarak
31. Basic ideas Color Contrast Diff in luminance 1:1 to 21:1 @BrittBarak
32. @BrittBarak
33. @BrittBarak
34. World Wide Web Consortium (W3C) •min 3:1 for large text •min 4.5:1 for small text •(Large text : 18p or 14p bold and up) www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html @BrittBarak
35. https://contrast-ratio.com/ @BrittBarak
36. https://contrast-ratio.com/ @BrittBarak
37. https://contrast-ratio.com/ @BrittBarak
38. Basic ideas Touch Target Min 48dp @BrittBarak
39. @BrittBarak
40. <ImageButton android:layout_height="wrap_content" android:minHeight=“48dp” android:minWidth="48dp" …/> @BrittBarak
41. And still… @BrittBarak
42. @BrittBarak
43. @BrittBarak
44. @BrittBarak
45. @BrittBarak
46. @BrittBarak
47. @BrittBarak
48. Tools TalkBack @BrittBarak
49. @BrittBarak
50. @BrittBarak
51. TalkBack •Linear exploration •Explore by touch @BrittBarak
52. @BrittBarak
53. Tools Select to Speak @BrittBarak
54. @BrittBarak
55. TalkBack State + Content Description + Type + Actions @BrittBarak
56. Description •(TextView: text) •android:contentDescription=“… " •View.contentDescription = “… " @BrittBarak
57. Example @BrittBarak
58. Step1 •“ image 4 drop down list. Double Tap to change” @BrittBarak
59. Step2 •“ image 4 …” •“ Unlabelled button. Double tap to activate” @BrittBarak
60. <ImageButton … android:contentDescription="open camera"/> @BrittBarak
61. The purpose, not the looks @BrittBarak
62. Step2 •“ image 4 …” •“ Unlabelled button. Double tap to activate” @BrittBarak
63. Step2 •“ image 4 …” •“ Unlabelled open camera button. Double tap to activate” @BrittBarak
64. Step3 •“ image 4 …” •“ open camera …” @BrittBarak
65. Step3 •“ image selected: image 4 …” •“ open camera …” @BrittBarak
66. Step3 •“ image selected: image 4 …” •“ open camera …” @BrittBarak
67. override fun onItemSelected(parent: AdapterView<*>, v: View, position: Int, id: Long) { //… spinner.contentDescription = "Image selected : image " + labels[position] } @BrittBarak
68. Step3 •“ image selected: image 4 …” •“ open camera …” @BrittBarak
69. Step4 •“ select an image” •“ selected image : image 4 …” •“ open camera …” @BrittBarak
70. <LinearLayout ... android:contentDescription="choose an image "> <Spinner . . . /> <ImageButton . . . /> @BrittBarak
71. Step4 •“ select an image” •“ selected image : image 4 …” •“ open camera …” @BrittBarak
72. Step4 •“ select an image” •“ selected image : image 4 …” •“ open camera …” @BrittBarak
73. Step4 •“ select an image” •“ selected image : image 4 …” •“ open camera …” @BrittBarak
74. Step5 •“ select an image” •“ selected image : image 4 …” •“ open camera …” @BrittBarak
75. Skip a View android:importantForAccessibility= @BrittBarak
76. Skip a View android:importantForAccessibility= “ auto | yes | no | noHideDescendants “ @BrittBarak
77. Re-Order (API 22+) android:accessibilityTraversalAfter= “…” android:accessibilityTraversalBefore= “…” @BrittBarak
78. Step5 •“ select an image” •“ selected image : image 4 …” •“ open camera …” @BrittBarak
79. Announce View. announceForAccessibility(“…”) @BrittBarak
80. Live Region (api 19) android:accessibilityLiveRegion= “ none | polite | assertive “ @BrittBarak
81. Step5 •“select an image” •“selected image : image 4 …” •“open camera …” @BrittBarak
82. Step5 •“select an image” •“selected image : image 4 …” •“open camera …” @BrittBarak
83. Step5 •“select an image” •“selected image : image 4 …” •“open camera …” @BrittBarak
84. Step5 •“select an image” •“selected image : image 4 …” •“open camera …” @BrittBarak
85. IRL @BrittBarak
86. @BrittBarak
87. Tools Accessibility Scanner To get started @BrittBarak
88. @BrittBarak
89. @BrittBarak
90. @BrittBarak
91. @BrittBarak
92. @BrittBarak
93. @BrittBarak
94. Accessibility Scanner •Low contrast •Content labelling •Touch target size •Implementation [ View hierarchies issues] @BrittBarak
95. @BrittBarak
96. @BrittBarak
97. “… double tap to activate , double tap and hold to long press” @BrittBarak
98. “… double tap to activate , double tap and hold to long press” @BrittBarak
99. “… double tap to activate , double tap and hold to long press” @BrittBarak
100. “… double tap to open chat , double tap and hold to have more options” @BrittBarak
101. ViewCompat.setAccessibilityDelegate( rowView, object: AccessibilityDelegateCompat() { }) @BrittBarak
102. ViewCompat.setAccessibilityDelegate( rowView, object: AccessibilityDelegateCompat() { override fun onInitializeAccessibilityNodeInfo( host: View, info: AccessibilityNodeInfoCompat) { } }) @BrittBarak
103. ViewCompat.setAccessibilityDelegate( rowView, object: AccessibilityDelegateCompat() { override fun onInitializeAccessibilityNodeInfo( host: View, info: AccessibilityNodeInfoCompat) { super.onInitializeAccessibilityNodeInfo(host, info) } }) @BrittBarak
104. @BrittBarak
105. val clickAction @BrittBarak
106. val clickAction = AccessibilityActionCompat( @BrittBarak
107. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, ) @BrittBarak
108. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, "open chat") @BrittBarak
109. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, "open chat") info.addAction(clickAction) @BrittBarak
110. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, "open chat") info.addAction(clickAction) val longClickAction = @BrittBarak
111. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, "open chat") info.addAction(clickAction) val longClickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_LONG_CLICK, "more options") @BrittBarak
112. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, "open chat") info.addAction(clickAction) val longClickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_LONG_CLICK, "more options") info.addAction(longClickAction) @BrittBarak
113. @BrittBarak
114. @BrittBarak
115. •“chats display selected, 6 new. Double tap to activate” @BrittBarak
116. •“chats display selected, 6 new. Double tap to activate” @BrittBarak
117. •“chats display selected, 6 new.” •“attachments display. Double tap to activate” @BrittBarak
118. •“chats display selected, 6 new.” •“attachments display. Double tap to activate select” @BrittBarak
119. •“chats display selected, 6 new.” •“attachments display. Double tap to select” •“voice mails display, 7 new. Double tap to activate” @BrittBarak
120. •“chats display selected, 6 new.” •“attachments display. Double tap to select” •“voice mails display, 7 new. Double tap to select” @BrittBarak
121. “chats display selected, 6 new. Double tap and hold to change” @BrittBarak
122. “all messages display. Double tap and hold to change” @BrittBarak
123. Is a11y enabled? val am = getSystemService(Context.ACCESSIBILITY_SERVICE) as AccessibilityManager val isAccessibilityEnabled = am.isEnabled val isExploreByTouchEnabled = am.isTouchExplorationEnabled @BrittBarak
124. Testing •Automatic: Espresso, roblectric •Manual user testing developer.android.com/training/accessibility/testing
125. Tools TalkBack @BrittBarak Select to Speak Braille Back Switch Access Voice Access
126. Check out MLKit @BrittBarak Actions on Google Speech to Text
127. Apps for everyone It s in your hands ! the ones you ‘ Britt Barak
128. Thank you! Keep in touch!