Accessbility and Android APIs

Transcript

1. Accessibility and Android APIs Aung Kyaw Paing (Vincent) Senior Consultant @ thoughtworks | GDE Thailand aungkyawpaing.dev
2. Over 1 billion people are estimated to experience disability. This corresponds to about 15% of the world's population - World Health Organization (WHO)
3. Common Disabilities Deafness & Hard-of-hearing Motor Impairments Cognitive disabilities Blindness & Visual impairment
4. Deafness & Hard-of-hearing Motor Impairments Cognitive disabilities Blindness & Visual impairment Everyone could experiences one of these in their lives.
5. - Won “Innovation in Accessibility” award for the first time in Game awards - Even people without common disabilities start using these features! The Last of Us
6. Built in services already exists! Accessibility services in Android
7. - Screen reader - Describe content out aloud - Interact with gestures Talkback
8. - Integration with braille display - Used together with Talkback - Interact using keys on display BrailleBack
9. Switch Access - Switches instead of taps - Scan items and highlight - User can interact with switches
10. Voice Access - Control hand-free - Show labels and grids - Interact device with voice commands
11. Accessibility services Write one time, works everywhere
12. Let’s look into Android accessibility APIs What can I do?
13. Size your buttons - Recommended size 48dp - Use padding to expand touchable area
14. Think twice about colors - Do not use color as only means of communication
15. - Do not use color as only means of communication Think twice about colors
16. Favorite/Like/Love Search Open Navigation Drawer Label images - Provide a screen readable label of your image and actions - Translated for different languages
17. <ImageView android:id="@+id/event_banner" android:contentDescription="20% discount sale event" />
18. <ImageView android:id="@+id/event_banner" android:contentDescription="20% discount sale event" /> <menu> <item android:id="@+id/action_settings" android:title="@string/action_settings" android:contentDescription="Settings" /> </menu>
19. <ImageView android:id="@+id/event_banner" android:contentDescription="20% discount sale event" /> <menu> <item android:id="@+id/action_settings" android:title="@string/action_settings" android:contentDescription="Settings" /> </menu> view.contentDescription = "Describe me!"
20. Icon( imageVector = Icons.Filled.KeyboardArrowLeft, contentDescription = "Next" ) Image( bitmap = ImageBitmap.imageResource(id = R.id.arrow_next), contentDescription = "" )
21. Icon( imageVector = Icons.Filled.KeyboardArrowLeft, contentDescription = "Next" ) Image( bitmap = ImageBitmap.imageResource(id = R.id.arrow_next), contentDescription = "" ) Text( text = "Hello There", modifier = Modifier.semantics { contentDescription = "General Kenobi" } )
22. Provide users a way to add the content description for user-generated contents
23. - Skip unnecessary elements for screen reader to navigate faster Skip elements ????????
24. <ImageView android:id="@+id/event_banner" android:contentDescription="@null" />
25. <ImageView android:id="@+id/event_banner" android:contentDescription="@null" /> <!-- Only for SDK 16 and above --> <ImageView android:id="@+id/event_banner" android:importantForAccessibility="no" />
26. Icon( imageVector = Icons.Filled.Time, contentDescription = null )
27. Add accessibility actions Let accessibility services knows an action can be performed
28. ViewCompat.addAccessibilityAction( itemView, getText(R.id.delete) ) { _, _ -> deleteMail() true } “Double tap to delete”
29. fun InboxRow() { Row( modifier = Modifier .semantics { onClick(label = "Delete") { deleteMail() return@onClick true } } ) { // Render Contents } }
30. fun InboxRow() { Row( modifier = Modifier .semantics { onClick(label = "Delete") { deleteMail() return@onClick true } } ) { // Render Contents } }
31. fun InboxRow() { Row( modifier = Modifier .semantics { onClick(label = "Delete") { deleteMail() return@onClick true } } ) { // Render Contents } }
32. Replace accessibility actions Sometimes a click is not just a click “Double Tap to Press”
33. ViewCompat.replaceAccessibilityAction( itemView, AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_CLICK, "Open $text", null ) “Double tap to open $text”
34. ViewCompat.replaceAccessibilityAction( itemView, AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_CLICK, "Open $text", null ) “Double tap to open $text”
35. @Composable fun ClickableRow( text: String, onClick: () -> Unit ) { Row( modifier = Modifier .clickable() { onClick() } ) { //Render Text and Arrow Right Icon } } “Double tap to click”
36. @Composable fun ClickableRow( text: String, onClick: () -> Unit ) { Row( modifier = Modifier .clickable(onClickLabel = "Open $text") { onClick() } ) { //Render Text and Arrow Right Icon } } “Double tap to open $text”
37. Merge components - Merge views to make screen reader navigate with fewer taps - Recommend to use for Lists + “Checkbox Checked” “With Soup” “Checkbox With Soup - Checked”
39. <ConstraintLayout android:id="@+id/project_container" ... android:screenReaderFocusable="true"> <TextView android:id="@+id/project_title" ... android:focusable="false" android:text="droidconsg" /> <TextView android:id="@+id/build_time" android:focusable="false" android:text="3 Hours Ago" /> </ConstraintLayout>
40. <ConstraintLayout android:id="@+id/project_container" ... android:screenReaderFocusable="true"> <TextView android:id="@+id/project_title" ... android:focusable="false" android:text="droidconsg" /> <TextView android:id="@+id/build_time" android:focusable="false" android:text="3 Hours Ago" /> </ConstraintLayout>
41. <ConstraintLayout android:id="@+id/project_container" ... android:screenReaderFocusable="true" android:contentDescription="droiconsg built 3 hours ago"> <TextView android:id="@+id/project_title" ... android:focusable="false" android:text="droidconsg" /> <TextView android:id="@+id/build_time" android:focusable="false" android:text="3 Hours Ago" /> </ConstraintLayout>
42. fun ProjectCard() { Column { Text("droidconsg") Text("3 Hours Ago") } }
43. fun ProjectCard() { Column(modifier = Modifier.Semantic( mergeDescendants = true ) { //Other accessibility stuffs }) { Text("droidconsg") Text("3 Hours Ago") } }
44. In addition….
45. fun ProjectCard() { Column(modifier = Modifier.Semantic( mergeDescendants = true ) { onClick(label = "Do Something") { //On Click actions } }) { BookmarkButton() } }
46. fun ProjectCard() { Column(modifier = Modifier.Semantic( mergeDescendants = true ) { onClick(label = "Do Something") { //On Click actions } }) { BookmarkButton(modifier = Modifier.clearAndSetSemantics { }) } }
47. Describe the state - Telling screen reader to alert user for state change on interaction Paused Playing Image ref: https://medium.com/google-dev eloper-experts/state-description s-on-android-b2029283871f
48. playPauseButton.setOnClickListener { if (isPlaying) { ViewCompat.setStateDescription(playPauseButton, getString(R.string.paused)) } else { ViewCompat.setStateDescription(playPauseButton, getString(R.string.playing)) } }
49. playPauseButton.setOnClickListener { if (isPlaying) { ViewCompat.setStateDescription(playPauseButton, getString(R.string.paused)) } else { ViewCompat.setStateDescription(playPauseButton, getString(R.string.playing)) } }
50. @Composable fun MusicPlayerControls { PlayPauseButton(modifier = Modifier.semantics { stateDescription = if (isPlaying) "Paused" else "Playing" }) }
51. @Composable fun MusicPlayerControls { PlayPauseButton(modifier = Modifier.semantics { stateDescription = if (isPlaying) "Paused" else "Playing" }) }
52. Timeout - Do not use constant timeouts - Instead, use recommended timeout from Accessibility manager
53. val accessibilityManager = ContextCompat.getSystemService(this, AccessibilityManager::class.java) accessibilityManager?.getRecommendedTimeoutMillis( DEFAULT_TIMEOUT, AccessibilityManager.FLAG_CONTENT_CONTROLS or AccessibilityManager.FLAG_CONTENT_ICONS )
54. val accessibilityManager = ContextCompat.getSystemService(this, AccessibilityManager::class.java) accessibilityManager?.getRecommendedTimeoutMillis( DEFAULT_TIMEOUT, AccessibilityManager.FLAG_CONTENT_CONTROLS or AccessibilityManager.FLAG_CONTENT_ICONS )
55. val accessibilityManager = ContextCompat.getSystemService(this, AccessibilityManager::class.java) accessibilityManager?.getRecommendedTimeoutMillis( DEFAULT_TIMEOUT, AccessibilityManager.FLAG_CONTENT_CONTROLS or AccessibilityManager.FLAG_CONTENT_ICONS )
56. val accessibilityManager = ContextCompat.getSystemService(this, AccessibilityManager::class.java) accessibilityManager?.getRecommendedTimeoutMillis( DEFAULT_TIMEOUT, AccessibilityManager.FLAG_CONTENT_CONTROLS or AccessibilityManager.FLAG_CONTENT_ICONS )
57. val accessibilityManager = ContextCompat.getSystemService(this, AccessibilityManager::class.java) accessibilityManager?.getRecommendedTimeoutMillis( DEFAULT_TIMEOUT, AccessibilityManager.FLAG_CONTENT_TEXT )
58. val accessibilityManager = LocalAccessibilityManager.current accessibilityManager?.calculateRecommendedTimeoutMillis( originalTimeoutMillis = DEFAULT_TIMEOUT, containsIcons = true, containsText = false, containsControls = false )
59. val accessibilityManager = LocalAccessibilityManager.current accessibilityManager?.calculateRecommendedTimeoutMillis( originalTimeoutMillis = DEFAULT_TIMEOUT, containsIcons = true, containsText = false, containsControls = false )
60. val accessibilityManager = LocalAccessibilityManager.current accessibilityManager?.calculateRecommendedTimeoutMillis( originalTimeoutMillis = DEFAULT_TIMEOUT, containsIcons = true, containsText = false, containsControls = false )
61. val accessibilityManager = LocalAccessibilityManager.current accessibilityManager?.calculateRecommendedTimeoutMillis( originalTimeoutMillis = DEFAULT_TIMEOUT, containsIcons = true, containsText = false, containsControls = false )
62. Anti-patterns - Do not reinvent the wheel - Use material or androidx components as much as possible - Do not abuse accessibility announcements val event = AccessibilityEvent(AccessibilityEvent.TYPE_ANNOUNCEMENT) event.text.add("You got a new notification!") accessibilityManager.sendAccessibilityEvent(event)
63. Anti-patterns - Do not reinvent the wheel - Use material or androidx components as much as possible - Do not abuse accessibility announcements val event = AccessibilityEvent(AccessibilityEvent.TYPE_ANNOUNCEMENT) event.text.add("You got a new notification!") accessibilityManager.sendAccessibilityEvent(event)
64. Check List - Adjust button sizes, text sizes and color contrast - Label images - Skip unnecessary elements - Provide accessibility actions - Replace with meaningful actions - Adjust timeout - Merge elements
65. How would you know if it works without tests? Testing
66. Automated Testing - Espresso provides a one-line code to test accessibility - Runs a list of test every time you interact with the view in a test class EspressoTest { init { AccessibilityChecks.enable() } }
67. Automated Testing There were 2 accessibility errors: AppCompatImageButton{id=2131165210, ...}: View is missing speakable text needed for a screen reader, AppCompatImageButton{id=2131165210,...}: View falls below the minimum recommended size ... ...
68. Compose UI Test composeTestRule .onNodeWithContentDescription("Content Description") .assertIsDisplayed() val matcher = hasStateDescription("state value") composeTestRule.onNode(matcher).assertIsDisplayed()
69. Accessibility Scanner - Use accessibility scanner to check for best practices https://bit.ly/3Sp7SKz
70. “Accessibility isn’t something that you check the list and say it’s done. It’s an user experience so you have to test it manually by yourself to know it’s a good experience”
71. dm me @vincentpaing Thanks you!