Android accessibility made easy

Talks about how accessibility services work in Android, common mistakes that make apps inaccessible, how Uber approaches accessibility and ideas for scalable accessibility testing.

Transcript

1. July 2017, 360|AnDev, Denver Android accessibility made easy Vijay Sailappan
2. Intro Help Uber build their rider app Work on Map and annotations, Search, Caching, Architecture, User interfaces Recently started working on making Uber app accessible Before Uber, worked on Yahoo mobile ads and Yahoo aviate app
3. Key takeaways Why you should think about accessibility Basic understanding of how accessibility works Common mistakes in apps and how to avoid them How Uber improves accessibility on its apps Scalable accessibility testing
4. Why is accessibility important Improves the usability of your app for all users by having an inclusive design Positively impacts the lives of people with disabilities ~15% of world’s population ~285M people with visual impairments around the world ~35M people with some level of motor impairments in the US Also a growth strategy. For Uber, aligns with with its mission - “Transportation as reliable as running water, everywhere, for everyone”
5. Accessibility services Talkback Switch access Brailleback Voice access
6. Accessibility settings Color inversion setting to invert black text on white screen to white text on black screen Color correction setting to correct different types of color blindness Font size setting to control font sizes Display size setting to male items on screen bigger or smaller
7. Accessibility framework View View View AccessibilityEvent AccessibilityNodeInfo Accessibility Service E.g., Talkback
8. Good news All standard widgets support accessibility If you need custom views, extend from views low in hierarchy
9. Common mistakes
10. No content description <Button android:contentDescription="@string/appfeedback_description" android:layout_width="wrap_content" android:layout_height="wrap_content"/> Common mistakes
11. Small touch target Talkback users in linear scanning mode might miss small targets Keep a minimum of 48 * 48dp, as recommended by WCAG Common mistakes
12. Click & drag only UX e.g., pull to refresh Switch access users can’t click and drag Always have clickable views as a backup Common mistakes
13. Click & drag only UX e.g., pull to refresh Common mistakes Facebook’s feed icon refreshes the feed Example for good inclusive design
14. Not ignoring decorative views <Space android:id="@+id/confirmation_modal_button_space" android:layout_width="@dimen/ui__spacing_unit_2x" android:layout_height="wrap_content" android:contentDescription=”@null”/> Common mistakes
15. Using color only changes to announce state changes Common mistakes This app uses color in ‘+’ icon to indicate different states and has same content description for both states
16. Ignoring results of network requests Should announce state changes like loading in progress, network successes and failures Common mistakes
17. Having state information or type of view in content description <Button android:contentDescription="Button selected" android:layout_width="wrap_content" android:layout_height="wrap_content"/> For custom views, you need to provide state information yourself Common mistakes
18. Not enough context in speakable text for custom view group Speakable text Selected or not Selected position in the collection. E.g., 2 of 3 Type of view Action to take Common mistakes
19. Video content without accessible playback controls All video content should have appropriate playback controls that are accessible Videos should come with captions for people who can’t hear Common mistakes
20. Other mistakes Incorrect focus order Sound only notification alerts without UI changes Contrast ratio between text and its background should at least 4 for small text Using focusable to group views instead of setting importantForAccessibility Common mistakes
21. What Uber is doing to make their app more accessible
22. Driver enroute - ETA announcements When a driver is en route, the estimated time of arrival is announced periodically Eliminates the need for the user to move the focus to ETA view Uber’s latest accessibility improvements
23. ETA talkback announcements Uber’s latest accessibility improvements
24. Deaf driver announcement to riders Uber announces that the driver is deaf or hard of hearing if the driver supplies this information Drivers can choose to use flashes to announce new requests instead of notification sounds Uber’s latest accessibility improvements
25. Allow block navigation and provide a summary The goal is to help the user get a ride as soon as possible Without allowing the focus to each view inside the feed(showing food options, deep links to Uber Eats), a summary will be called out Upon further engagement by double clicking, the views inside the feed will iterated Uber’s latest accessibility improvements
26. Branching off for talkback users When the user clicks on pickup location field, map mode is displayed. For talkback users, the map is not displayed. Instead the list is brought up from below. Not advisable to branch off to give specialized experience for talkback users in general. Uber’s latest accessibility improvements
27. Processing Accessibility Events Uber’s latest accessibility improvements
28. More context in ‘Where To’ box private class DestinationSearchAccessibilityDelegate extends AccessibilityDelegateCompat { private final AccessibilityNodeInfoCompat.AccessibilityActionCompat actionDestination; public DestinationSearchAccessibilityDelegate() { actionDestination = new AccessibilityNodeInfoCompat.AccessibilityActionCompat( AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_CLICK.getId(), “Change destination and pickup locations”); } @Override public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCompat info) { super.onInitializeAccessibilityNodeInfo(host, info); info.addAction(actionDestination); } } “Where To” box, upon single click in talkback mode, will say “Where To, double click to change destination and pickup locations” Uber’s latest accessibility improvements
29. Provide more context Uber’s latest accessibility improvements UberX 2 of 8 Selected View Pager
30. Custom view accessibility
31. Custom views need special attention Custom view is a black box to accessibility services. Accessibility services will not have visibility into your view’s: - boundaries - content description - supported accessibility actions Custom view accessibility
32. Use ExploreByTouchHelper • getVirtualViewAt(float x, float y) • getVisibleVirtualViews(List<Integer> virtualViewIds) • onPopulateNodeForVirtualView(int virtualViewId, AccessibilityNodeInfoCompat node) • onPerformActionForVirtualView(int virtualViewId, int action, Bundle arguments) Custom view accessibility
33. Example A simple Navigation View which will switch between the two color panels A custom view that supports accessibility Without additional code, we can’t switch between panels Custom view accessibility
34. getVirtualViewAt getVirtualViewAt(float x, float y) - Returns the id of the virtual view based on the point of touch Custom view accessibility
35. getVisibleVirtualViews getVisibleVirtualViews(List<Integer> virtualViewIds) - Used to populate the given list with ids of virtual views Custom view accessibility
36. onPopulateNodeForVirtualView onPopulateNodeForVirtualView(int virtualViewId, AccessibilityNodeInfoCompat node) - Used to set content description, bounds and action for the virtual view Custom view accessibility
37. onPerformActionForVirtualView onPerformActionForVirtualView(int virtualViewId, int action, Bundle arguments) - Used to send the action from virtual view to its parent’s click handler Custom view accessibility
38. Source code Checkout my simple example on github - https://goo.gl/8mFvqe Custom view accessibility
39. Scalable accessibility testing
40. Accessibility testing options UI tests - Espresso Unit tests - Robolectric Lint rules Accessibility scanner Manual testing Scalable accessibility testing
41. AccessibilityChecks Scalable accessibility testing
42. AccessibilityChecks Can’t test multiple files Write your own JUnitRunner and globally enable AccessibilityChecks Still not suitable for staged rollouts and multiple apps in a monorepo Scalable accessibility testing
43. Accessibility testing in Espresso Scalable accessibility testing
44. Phased rollout in CI Scalable accessibility testing
45. Accessibility scanner, linting Use accessibility scanner to identify potential accessibility issues Add lint rules to prevent developers from adding inaccessible code Use Google’s accessibility testing framework in Robolectric unit tests Scalable accessibility testing
46. Thank You Uber is hiring android engineers (& accessibility engineers) Send your resumes to vijays@uber.com Stay in touch @Vijay_S