Talking with TalkBack (GDG Sydney DevFest 2019)

Accessible apps can mean the world to users with disabilities but how can we ensure people using Talkback experience your app in all its glory and utilize all its features? In this session, I will show how to effectively leverage some of TalkBack's capabilities to deliver a better experience and go through some common UI/UX patterns and their Talkback-friendly approaches.

Transcript

1. Talking with TalkBack Artaza Aziz
2. Integrating with accessibility
3. Integrating with accessibility Improve usability Make a product more inclusive Make a positive impact
4. Accessibility overview
5. Accessibility overview Android Accessibility Suite
6. Accessibility overview Android Accessibility Suite Voice Access
7. Accessibility overview Android Accessibility Suite Voice Access Accessibility Scanner
8. Accessibility overview Android Accessibility Suite Voice Access Accessibility Scanner Live Transcribe
9. Accessibility overview Android Accessibility Suite Voice Access Accessibility Scanner Live Transcribe Sound Amplifier
10. Accessibility overview Android Accessibility Suite Voice Access Accessibility Scanner Live Transcribe Sound Amplifier Lookout
11. Accessibility overview https://www.google.com/accessibility/products-features/ Android Accessibility Suite Voice Access Accessibility Scanner Live Transcribe Sound Amplifier Lookout
12. Talkback overview
13. Talkback overview Screen reader
14. Talkback overview Screen reader Navigate using linear navigation or explore by touch
15. Talkback overview Screen reader Navigate using linear navigation or explore by touch Common gestures
16. Talkback overview Screen reader Navigate using linear navigation or explore by touch Common gestures Accessibility shortcut
17. Talkback overview Screen reader Navigate using linear navigation or explore by touch Common gestures Accessibility shortcut Display speech output
18. Basic TalkBack principles
19. Label content
20. Label content <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_info" />
21. Label content <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_info" /> Unlabelled, Button
22. Label content <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_info" />
23. Label content <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="More information"_ android:src="@drawable/ic_info" />
24. Label content <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="More information"_ android:src="@drawable/ic_info" /> More information, Button
25. Label content <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription=""_ android:src="@drawable/ic_info" />
26. Label content <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="Tap info button"_ android:src="@drawable/ic_info" /> Tap info button, Button
27. Label content <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="Tap info button"_ android:src="@drawable/ic_info" /> Tap info button, Button Double-tap to activate.
28. Label editable content
29. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content"_/> |
30. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Age"_/> Age
31. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Age"_/> Age
32. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Age"_/> Age, Edit box Age
33. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Age"_/> 27 |
34. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Age"_/> 27 |
35. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Age"_/> Age
36. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Age"_/> Age <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Age" /> Age
37. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Age"_/> Age <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Age" /> Age
38. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint=""_/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Age" /> Age
39. Label editable content <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Numbers only"_/> Numbers only <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Age" /> Age
40. Label editable content <EditText android:id="@+id/age_edit_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Numbers only"_/> Numbers only <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:labelFor="@id/age_edit_text" android:text="Age" /> Age
41. Label editable content <EditText android:id="@+id/age_edit_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Numbers only"_/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:labelFor="@id/age_edit_text" android:text="Age" /> Age Age Numbers only
42. Label editable content <EditText android:id="@+id/age_edit_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="Numbers only"_/> Numbers only <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:labelFor="@id/age_edit_text" android:text="Age" /> Age Numbers only Edit box for Age
43. Hide decorative elements from TalkBack <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:labelFor="@id/name_edit_text" android:src="@drawable/star"/>
44. Hide decorative elements from TalkBack <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:importantForAccessibility="no" android:labelFor="@id/name_edit_text" android:src="@drawable/star"/>
45. Hide decorative elements from TalkBack <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:importantForAccessibility="no" android:labelFor="@id/name_edit_text" android:src="@drawable/star"/>
46. Hide decorative elements from TalkBack <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android: android:labelFor="@id/name_edit_text" android:src="@drawable/star"/>
47. Hide decorative elements from TalkBack <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@null" android:labelFor="@id/name_edit_text" android:src="@drawable/star"/>
48. Hide decorative elements from TalkBack <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@null" android:labelFor="@id/name_edit_text" android:src="@drawable/star"/>
49. Hide decorative elements from TalkBack <ConstraintLayout …> <TextView …/> </ConstraintLayout …> <TextView …/> <TextView …/>
50. Hide decorative elements from TalkBack <ConstraintLayout android:importantForAccessibility="noHideDescendants"…> <TextView …/> </ConstraintLayout …> <TextView …/> <TextView …/>
51. Hide decorative elements from TalkBack <ConstraintLayout android:importantForAccessibility="noHideDescendants"…> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/>
52. Structure content
53. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
54. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
55. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
56. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
57. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
58. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
59. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
60. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
61. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
62. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
63. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout android:focusable="true" …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
64. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout android:="true" …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
65. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout android:screenReaderFocusable="true" …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
66. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout android:="true" …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
67. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout android:focusable="true" …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
68. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout android:focusable="true" …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
69. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout android:focusable="true" …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
70. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout android:focusable="true" android:contentDescription=“Talking with Talkback by Artaza Aziz" …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
71. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
72. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
73. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
74. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner
75. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout …> </ConstraintLayout …> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/> <TextView …/>
76. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout …> <TextView …/> <TextView …/> <FrameLayout …> </FrameLayout …> </ConstraintLayout …> <TextView …/> <TextView …/> <FrameLayout …> </FrameLayout …> <TextView …/> <TextView …/> <FrameLayout …> </FrameLayout …>
77. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout …> <TextView …/> <TextView …/> <FrameLayout android:focusable="true"…> </FrameLayout …> </ConstraintLayout …> <TextView …/> <TextView …/> <FrameLayout android:focusable="true"…> </FrameLayout …> <TextView …/> <TextView …/> <FrameLayout android:focusable="true"…> </FrameLayout …>
78. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout …> <TextView …/> <TextView …/> </FrameLayout …> </ConstraintLayout …> <TextView …/> <TextView …/> </FrameLayout …> <TextView …/> <TextView …/> </FrameLayout …> <FrameLayout android:focusable="true"…> <FrameLayout android:focusable="true"…> <FrameLayout android:focusable="true"…>
79. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout …> <TextView …/> <TextView …/> </FrameLayout …> </ConstraintLayout …> <TextView …/> <TextView …/> </FrameLayout …> <TextView …/> <TextView …/> </FrameLayout …> <FrameLayout android:focusable="true"…> <FrameLayout android:focusable="true"…> <FrameLayout android:focusable="true"…>
80. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout …> <TextView …/> <TextView …/> </FrameLayout …> </ConstraintLayout …> <TextView …/> <TextView …/> </FrameLayout …> <TextView …/> <TextView …/> </FrameLayout …> <FrameLayout android:focusable="true"…> <FrameLayout android:focusable="true"…> <FrameLayout android:focusable="true"…>
81. Structure content Talk details Speaker Artaza Aziz Title Talking with TalkBack Content level Beginner <ConstraintLayout …> <TextView …/> <TextView …/> </FrameLayout …> </ConstraintLayout …> <TextView …/> <TextView …/> </FrameLayout …> <TextView …/> <TextView …/> </FrameLayout …> <FrameLayout android:focusable="true"…> <FrameLayout android:focusable="true"…> <FrameLayout android:focusable="true"…>
82. Intuitive navigation order
83. Intuitive navigation order
84. Intuitive navigation order
85. Intuitive navigation order
86. Intuitive navigation order
87. Intuitive navigation order
88. Intuitive navigation order <TextView />
89. Intuitive navigation order <TextView android:accessibilityTraversalAfter=“@id/previous_view" android:accessibilityTraversalBefore="@id/next_view"/>
90. Announce dynamically updating content
91. Announce dynamically updating content SUBMIT Status: In Progress
92. Announce dynamically updating content SUBMIT Status: Submitted
93. Announce dynamically updating content SUBMIT Status: In Progress <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Status: In Progress" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SUBMIT" />
94. Announce dynamically updating content SUBMIT Status: In Progress <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:accessibilityLiveRegion="polite" android:text="Status: In Progress" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SUBMIT" />
95. Announce dynamically updating content SUBMIT Status: In Progress <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:accessibilityLiveRegion="polite" android:text="Status: In Progress" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SUBMIT" />
96. Announce dynamically updating content SUBMIT <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:accessibilityLiveRegion="polite" android:text="Status: In Progress" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SUBMIT" /> Submit Button, Double tap to activate Status: In Progress
97. Announce dynamically updating content SUBMIT <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:accessibilityLiveRegion="polite" android:text="Status: In Progress" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SUBMIT" /> Status Submitted Status: Submitted
98. Talkback-friendly solutions to common patterns
99. Network requests and response
100. Network requests and response Announce network request state changes view.announceForAccessibility("Searching...")
101. Modify default spoken text
102. Modify default spoken text SUBMIT
103. Modify default spoken text SUBMIT Submit, Button. Double tap to activate
104. Modify default spoken text SUBMIT Submit, Button. Double tap to activate android:text="Submit"
105. Modify default spoken text SUBMIT , Button. Double tap to activate android:text="Submit"
106. Modify default spoken text SUBMIT Place order, Button. Double tap to activate android:contentDescription=“Place order" android:text="Submit"
107. Modify default spoken text SUBMIT Place order, Button. Double tap to activate
108. Modify default spoken text SUBMIT Place order, Button. Double tap to place order ViewCompat.replaceAccessibilityAction( button, AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_CLICK, "place order" ) { v, args -> placeOrder() true }_
109. Modify default spoken text SUBMIT Place order, Button. Double tap to place order ViewCompat.replaceAccessibilityAction( button, AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_CLICK, "place order" ) { v, args -> placeOrder() true }_
110. Modify default spoken text SUBMIT Place order, Button. Double tap to place order ViewCompat.replaceAccessibilityAction( button, AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_CLICK, "place order" ) { v, args -> placeOrder() true }_
111. Gesture actions
112. Gesture actions Prepare slides
113. Gesture actions Prepare slides
114. Gesture actions ViewCompat.addAccessibilityAction(itemView, "delete") { v, args -> itemView.delete() true }
115. Gesture actions Prepare slides
116. Gesture actions Prepare slides
117. Gesture actions Prepare slides Actions: delete Prepare slides
118. Gesture actions Prepare slides
119. Gesture actions Prepare slides
120. Gesture actions Prepare slides
121. Gesture actions Prepare slides
122. Gesture actions Prepare slides
123. Other considerations • Try to avoid abbreviations and acronyms • Numbers might require to be space separated • Try not to have another set of flow just for TalkBack users • Extend from lowest in hierarchy when extending custom views • Do not create an inconsistent experience
124. Testing
125. Testing • Lint • Accessibility Scanner • Espresso and Robolectric • User testing
126. Thanks! @artaza_aziz