Tips to create accessible Android Applications

1. Developing Accessible
Android Applications
Renato Iwashima
Sr. UI Engineer - Android Accessibility at LinkedIn

2. 87.6%
Worldwide Android Market Share Q2 2016
(Share in Unit Shipments)
http://www.idc.com/prodserv/smartphone-os-market-share.jsp

3. It’s not easy to find Android apps
that are accessible.

4. Topics
1. Accessibility features and services of Android
2. General recommendations
3. Common problems
4. Accessibility API
5. Custom Views
6. Tools

5. How do people with
disabilities interact with
Android?

6. Hearing
1. Mono audio
2. Closed Captions
3. Haptic Feedback

8. Motor/Mobility
1. Switch Access
2. External Keyboard
3. Directional Pad
4. Voice Access

11. Vision
1. Color & Contrast
2. Invert Colors
3. Text Size
4. Display Size
5. Screen magnification
6. Screen reader

13. How can I improve the
accessibility of my Android
app?

14. Hearing
Audio/Video should provide optional captioning
Never convey meaningful information with sound alone
Make background sound / video easy to disable

15. Motor and Cognitive
Avoid complex gestures
Provide alternatives to custom gestures
Keep touch targets above 48x48 dp
Favor simple and hierarchical interfaces
Avoid screen clutter - favor navigation
Test your app with a Switch device, External Keyboard or D-Pad

16. Colors and Fonts
Always use scalable pixels for font sizes (‘sp’)
Never convey meaningful information with color alone
Texts should have a minimum color contrast ratio of 4.5 to 1
https://webaim.org/resources/contrastchecker/
Attention to what happens to your layout when fonts are increased

17. Avoid images with text
Label all meaningful images with content descriptions
Provide equal experiences
Vision

18. What are the most common
accessibility problems on
Android apps?

19. Poor Color Contrast

20. Poor Color Contrast

21. https://webaim.org/resources/contrastchecker/

22. Small Touch Targets

23. 24
24

24. 48
48

25. Unlabeled Content

26. Unlabeled
?
Unlabeled Unlabeled

27. Show Keyboard Upload a photo Add a sticker

28. contentDescription
Use android:contentDescription or setContentDescription() to provide
descriptions for components that lack visual text.
ImageView
ImageButton

29. Yes
?

30. Enter “Yes” if you agree.

31. Yes
Enter “Yes” if you agree:

32. labelFor
<TextView
android:labelFor="@+id/edit_text_email"
android:text="Email"
... />
<EditText
android:id="@+id/edit_text_email"
android:hint="someone@company.com"
... />
Use android:labelFor to provide labels for input controls.

33. hint
android:hint
Creates a placeholder text within the input
Hint is not persistent when a value is added
It usually has color contrast problems
Still a valid method to add labels for TextInputLayout

35. TextInputLayout
<android.support.design.widget.TextInputLayout
android:labelFor="@+id/email_edit_text"
android:hint="Email"
android:accessibilityLiveRegion="polite"
android:errorEnabled="true"
...>
<android.support.design.widget.TextInputEditText
android:id="@id/email_edit_text"
android:inputType="textEmailAddress"
.../>
</android.support.design.widget.TextInputLayout>

36. TextInputLayout
Pay attention to the color contrast of the hint and error messages
Make sure error messages are announced

37. Improper Descriptions

38. Gradient Background
Image
?

40. Use android:importantForAccessibility and set it to no to make it irrelevant
for accessibility.
<ImageView
android:importantForAccessibility="no"
android:layout_width="wrap_content”
android:layout_height="wrap_content"
android:src="@drawable/background_image"/>
API 16+
Decorative views

42. ConnectIgnore
?
ConnectIgnore
ConnectIgnore
ConnectIgnore
ConnectIgnore
ConnectIgnore

43. Connect with John SmithIgnore John Smith
Connect with Rebecca WilliamsIgnore Rebecca Wiliams

44. Skip button, Button
?

45. Skip, Button

46. No support for focus navigation

48. Focus navigation
Use android:focusable or setFocusable(boolean) to control if a view should
receive focus.
Use requestFocus() to request the focus for the view.
API 1+

49. Focus navigation
Focus should follow natural reading order (Left to right, top to bottom).
Android will usually handle this for you. On rare occasions, you can modify it by
using:
android:nextFocusDown
android:nextFocusLeft
android:nextFocusRight
android:nextFocusUp

50. Focus Navigation
≠
Accessibility Focus

51. Focus Navigation
Focus on views that require user input.
(e.g. Buttons, Links, Check Boxes, Edit Texts, …)
Accessibility Focus
Focus for screen readers. Focus on all meaningful views
of the screen, including views that require no user input.
(e.g. non clickable text views)

52. Accessibility Traversal
Focus management modifies focus order but it does not modify the
accessibility focus order. If needed, use:
android:accessibilityTraversalAfter (Other view first)
android:accessibilityTraversalBefore (This view first)
API 22+

54. Missing Name, Role, Value or State

55. Invitations Connections
?
Friends

56. Invitations,
Button
Connections,
Button
Friends,
Tab,
2 of 3,
Selected

57. You can set an accessibility delegate to any view to provide more information
about the view for the accessibility service.
view.setAccessibilityDelegate(new AccessibilityDelegate() {
// a11y methods
// onInitializeAccessibilityEvent()
// onInitializeAccessibilityNodeInfo()
// ...
});
Accessibility Delegate

58. When you properly
follow these
recommendations,
you app is pretty
much accessible.

59. How about Custom views?

60. Aways best to use the default widgets
since they come accessible by default.
For this reason, avoid creating custom
views if not needed.
But if absolutely needed...

61. Understanding how accessibility
services interact with the app

62. Accessibility
Service
Application
Accessibility
Node Info
Accessibility
Node Info
Accessibility
Node Info
Accessibility Event
Get Info
Accessibility Node Info
System Accessibility Event

63. Accessibility Events

64. Accessibility Event
Event sent by the topmost view in the view tree to an accessibility service
when something notable happens in the user interface.
TYPE_VIEW_CLICKED
TYPE_VIEW_LONG_CLICKED
TYPE_VIEW_FOCUSED
TYPE_VIEW_TEXT_CHANGED
TYPE_VIEW_SCROLLED

65. Responsible for sending the event to accessibility services.
view.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_CLICKED);
sendAccessibilityEvent

66. Adds information about the accessibility event such as the state of the view.
public void onInitializeAccessibilityEvent(AccessibilityEvent event) {
super.onInitializeAccessibilityEvent(event);
event.setChecked(true);
}
onInitializeAccessibilityEvent

67. Sets the spoken text prompt of the AccessibilityEvent for your view:
public void onPopulateAccessibilityEvent(AccessibilityEvent event) {
super.onPopulateAccessibilityEvent(event);
event.getText().add(“This is what the a11y service will speak.”);
}
onPopulateAccessibilityEvent

68. announceForAccessibility
Convenience method for sending an AccessibilityEvent with
TYPE_ANNOUNCEMENT
For example, announcing a new notification.
public void showNotification() {
// ... some code to show notification on screen
announceForAccessibility("One new notification");
}

69. Accessibility Live Region
Convenience attribute that automatically notifies the user about changes to the
view’s content description or text (or children).
Example:
<TextView
android:id="@+id/error_message_box"
android:accessibilityLiveRegion="polite"
android:layout_width="wrap_content”
android:layout_height="wrap_content" />

70. Accessibility Live Region
None: Disable change notifications (Default for most views).
Polite: User should be notified for changes.
Assertive: Interrupts ongoing speech and notify the user immediately.

71. Accessibility Node Info

72. Accessibility
Service
Application
Accessibility
Node Info
Accessibility
Node Info
Accessibility
Node Info
Accessibility Event
Get Info
Accessibility Node Info
System Accessibility Event

73. Accessibility Node Info
After obtaining an event, accessibility services can get a more detailed
information about the view that generated the event.
It’s a snapshot of a View state.
Provides info about:
Content
State

74. Accessibility Action
Defines actions that can be performed on a view:
Standard actions
Custom actions
Override standard actions
Actions can be reached via the Local Context Menu.

75. Accessibility Action
// register action
public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfo info) {
super.onInitializeAccessibilityNodeInfo(host, info);
AccessibilityAction action = new AccessibilityAction(R.id.action_custom,
getString(R.string.action_custom));
info.addAction(action);
}
// implement what will happen once the action is triggered
public boolean performAccessibilityAction(View host, int action, Bundle args) {
if (action == R.id.action_custom) {
// do something
}
return true;
}

76. Can I create virtual views?

77. View

78. Virtual Views

79. Explore By Touch Helper
Implement 5 methods which answers the following questions:
1. Which virtual view is selected when I touch on this X and Y coordinate?
2. Which virtual views are currently visible?
3. Add something to the Accessibility Event when an event happens to this
given virtual view? (Spoken Text)
4. Add something to the Accessibility Node Info when an accessibility service
requests for more info to this given virtual view? (Bounds, Spoken Text, State,
Actions)
5. What should happen if this given action is performed? (Click, Custom Actions)

80. Explore By Touch Helper
1. protected int getVirtualViewAt(float x, float y);
2. protected void getVisibleVirtualViews(List<Integer> virtualViewIds);
3. protected void onPopulateEventForVirtualView(int virtualViewId, AccessibilityEvent event);
4. protected void onPopulateNodeForVirtualView(int virtualViewId, AccessibilityNodeInfoCompat
node);
5. protected boolean onPerformActionForVirtualView(int virtualViewId, int action, Bundle arguments);

82. Android Lint
http://developer.android.com/tools/help/lint.html
Accessibility Scanner
https://g.co/AccessibilityScanner
Stetho
http://facebook.github.io/stetho/
Accessibility Test Framework for Android
https://github.com/google/Accessibility-Test-Framework-for-Android
Accessibility Checks
Espresso: https://google.github.io/android-testing-support-library/docs/accesibility-checking/
Robolectric: http://robolectric.org/javadoc/3.0/org/robolectric/annotation/AccessibilityChecks.html
Tools

86. A word of caution
Not all accessibility issues can be detected automatically.
You should still manually test to validate the user
experience.

87. Keep in touch
linkedin.com/in/renatoiwashima
@renatoiwa
renatoiwa@gmail.com