Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Developing Accessible
Android Applications
Renato Iwashima
Sr. UI Engineer - Android Accessibility at LinkedIn
87.6%
Worldwide Android Market Share Q2 2016
(Share in Unit Shipments)
http://www.idc.com/prodserv/smartphone-os-market-sh...
It’s not easy to find Android apps
that are accessible.
Topics
1. Accessibility features and services of Android
2. General recommendations
3. Common problems
4. Accessibility AP...
How do people with
disabilities interact with
Android?
Hearing
1. Mono audio
2. Closed Captions
3. Haptic Feedback
Motor/Mobility
1. Switch Access
2. External Keyboard
3. Directional Pad
4. Voice Access
Vision
1. Color & Contrast
2. Invert Colors
3. Text Size
4. Display Size
5. Screen magnification
6. Screen reader
How can I improve the
accessibility of my Android
app?
Hearing
Audio/Video should provide optional captioning
Never convey meaningful information with sound alone
Make backgroun...
Motor and Cognitive
Avoid complex gestures
Provide alternatives to custom gestures
Keep touch targets above 48x48 dp
Favor...
Colors and Fonts
Always use scalable pixels for font sizes (‘sp’)
Never convey meaningful information with color alone
Tex...
Avoid images with text
Label all meaningful images with content descriptions
Provide equal experiences
Vision
What are the most common
accessibility problems on
Android apps?
Poor Color Contrast
Poor Color Contrast
https://webaim.org/resources/contrastchecker/
Small Touch Targets
24
24
48
48
Unlabeled Content
Unlabeled
?
Unlabeled Unlabeled
Show Keyboard Upload a photo Add a sticker
contentDescription
Use android:contentDescription or setContentDescription() to provide
descriptions for components that l...
Yes
?
Enter “Yes” if you agree.
Yes
Enter “Yes” if you agree:
labelFor
<TextView
android:labelFor="@+id/edit_text_email"
android:text="Email"
... />
<EditText
android:id="@+id/edit_tex...
hint
android:hint
Creates a placeholder text within the input
Hint is not persistent when a value is added
It usually has ...
TextInputLayout
<android.support.design.widget.TextInputLayout
android:labelFor="@+id/email_edit_text"
android:hint="Email...
TextInputLayout
Pay attention to the color contrast of the hint and error messages
Make sure error messages are announced
Improper Descriptions
Gradient Background
Image
?
Use android:importantForAccessibility and set it to no to make it irrelevant
for accessibility.
<ImageView
android:importa...
ConnectIgnore
?
ConnectIgnore
ConnectIgnore
ConnectIgnore
ConnectIgnore
ConnectIgnore
Connect with John SmithIgnore John Smith
Connect with Rebecca WilliamsIgnore Rebecca Wiliams
Skip button, Button
?
Skip, Button
No support for focus navigation
Focus navigation
Use android:focusable or setFocusable(boolean) to control if a view should
receive focus.
Use requestFocu...
Focus navigation
Focus should follow natural reading order (Left to right, top to bottom).
Android will usually handle thi...
Focus Navigation
≠
Accessibility Focus
Focus Navigation
Focus on views that require user input.
(e.g. Buttons, Links, Check Boxes, Edit Texts, …)
Accessibility F...
Accessibility Traversal
Focus management modifies focus order but it does not modify the
accessibility focus order. If nee...
Missing Name, Role, Value or State
Invitations Connections
?
Friends
Invitations,
Button
Connections,
Button
Friends,
Tab,
2 of 3,
Selected
You can set an accessibility delegate to any view to provide more information
about the view for the accessibility service...
When you properly
follow these
recommendations,
you app is pretty
much accessible.
How about Custom views?
Aways best to use the default widgets
since they come accessible by default.
For this reason, avoid creating custom
views ...
Understanding how accessibility
services interact with the app
Accessibility
Service
Application
Accessibility
Node Info
Accessibility
Node Info
Accessibility
Node Info
Accessibility Ev...
Accessibility Events
Accessibility Event
Event sent by the topmost view in the view tree to an accessibility service
when something notable hap...
Responsible for sending the event to accessibility services.
view.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_CLIC...
Adds information about the accessibility event such as the state of the view.
public void onInitializeAccessibilityEvent(A...
Sets the spoken text prompt of the AccessibilityEvent for your view:
public void onPopulateAccessibilityEvent(Accessibilit...
announceForAccessibility
Convenience method for sending an AccessibilityEvent with
TYPE_ANNOUNCEMENT
For example, announci...
Accessibility Live Region
Convenience attribute that automatically notifies the user about changes to the
view’s content d...
Accessibility Live Region
None: Disable change notifications (Default for most views).
Polite: User should be notified for...
Accessibility Node Info
Accessibility
Service
Application
Accessibility
Node Info
Accessibility
Node Info
Accessibility
Node Info
Accessibility Ev...
Accessibility Node Info
After obtaining an event, accessibility services can get a more detailed
information about the vie...
Accessibility Action
Defines actions that can be performed on a view:
Standard actions
Custom actions
Override standard ac...
Accessibility Action
// register action
public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfo inf...
Can I create virtual views?
View
Virtual Views
Explore By Touch Helper
Implement 5 methods which answers the following questions:
1. Which virtual view is selected when ...
Explore By Touch Helper
1. protected int getVirtualViewAt(float x, float y);
2. protected void getVisibleVirtualViews(List...
Android Lint
http://developer.android.com/tools/help/lint.html
Accessibility Scanner
https://g.co/AccessibilityScanner
Ste...
A word of caution
Not all accessibility issues can be detected automatically.
You should still manually test to validate t...
Keep in touch
linkedin.com/in/renatoiwashima
@renatoiwa
renatoiwa@gmail.com
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Developing accessible android applications
Upcoming SlideShare
Loading in …5
×

Developing accessible android applications

1,785 views

Published on

Tips to create accessible Android Applications

Published in: Technology

Developing accessible android applications

  1. 1. Developing Accessible Android Applications Renato Iwashima Sr. UI Engineer - Android Accessibility at LinkedIn
  2. 2. 87.6% Worldwide Android Market Share Q2 2016 (Share in Unit Shipments) http://www.idc.com/prodserv/smartphone-os-market-share.jsp
  3. 3. It’s not easy to find Android apps that are accessible.
  4. 4. Topics 1. Accessibility features and services of Android 2. General recommendations 3. Common problems 4. Accessibility API 5. Custom Views 6. Tools
  5. 5. How do people with disabilities interact with Android?
  6. 6. Hearing 1. Mono audio 2. Closed Captions 3. Haptic Feedback
  7. 7. Motor/Mobility 1. Switch Access 2. External Keyboard 3. Directional Pad 4. Voice Access
  8. 8. Vision 1. Color & Contrast 2. Invert Colors 3. Text Size 4. Display Size 5. Screen magnification 6. Screen reader
  9. 9. How can I improve the accessibility of my Android app?
  10. 10. Hearing Audio/Video should provide optional captioning Never convey meaningful information with sound alone Make background sound / video easy to disable
  11. 11. 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
  12. 12. 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
  13. 13. Avoid images with text Label all meaningful images with content descriptions Provide equal experiences Vision
  14. 14. What are the most common accessibility problems on Android apps?
  15. 15. Poor Color Contrast
  16. 16. Poor Color Contrast
  17. 17. https://webaim.org/resources/contrastchecker/
  18. 18. Small Touch Targets
  19. 19. 24 24
  20. 20. 48 48
  21. 21. Unlabeled Content
  22. 22. Unlabeled ? Unlabeled Unlabeled
  23. 23. Show Keyboard Upload a photo Add a sticker
  24. 24. contentDescription Use android:contentDescription or setContentDescription() to provide descriptions for components that lack visual text. ImageView ImageButton
  25. 25. Yes ?
  26. 26. Enter “Yes” if you agree.
  27. 27. Yes Enter “Yes” if you agree:
  28. 28. 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.
  29. 29. 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
  30. 30. 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>
  31. 31. TextInputLayout Pay attention to the color contrast of the hint and error messages Make sure error messages are announced
  32. 32. Improper Descriptions
  33. 33. Gradient Background Image ?
  34. 34. 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
  35. 35. ConnectIgnore ? ConnectIgnore ConnectIgnore ConnectIgnore ConnectIgnore ConnectIgnore
  36. 36. Connect with John SmithIgnore John Smith Connect with Rebecca WilliamsIgnore Rebecca Wiliams
  37. 37. Skip button, Button ?
  38. 38. Skip, Button
  39. 39. No support for focus navigation
  40. 40. 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+
  41. 41. 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
  42. 42. Focus Navigation ≠ Accessibility Focus
  43. 43. 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)
  44. 44. 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+
  45. 45. Missing Name, Role, Value or State
  46. 46. Invitations Connections ? Friends
  47. 47. Invitations, Button Connections, Button Friends, Tab, 2 of 3, Selected
  48. 48. 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
  49. 49. When you properly follow these recommendations, you app is pretty much accessible.
  50. 50. How about Custom views?
  51. 51. 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...
  52. 52. Understanding how accessibility services interact with the app
  53. 53. Accessibility Service Application Accessibility Node Info Accessibility Node Info Accessibility Node Info Accessibility Event Get Info Accessibility Node Info System Accessibility Event
  54. 54. Accessibility Events
  55. 55. 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
  56. 56. Responsible for sending the event to accessibility services. view.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_CLICKED); sendAccessibilityEvent
  57. 57. 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
  58. 58. 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
  59. 59. 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"); }
  60. 60. 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" />
  61. 61. 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.
  62. 62. Accessibility Node Info
  63. 63. Accessibility Service Application Accessibility Node Info Accessibility Node Info Accessibility Node Info Accessibility Event Get Info Accessibility Node Info System Accessibility Event
  64. 64. 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
  65. 65. 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.
  66. 66. 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; }
  67. 67. Can I create virtual views?
  68. 68. View
  69. 69. Virtual Views
  70. 70. 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)
  71. 71. 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);
  72. 72. 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
  73. 73. A word of caution Not all accessibility issues can be detected automatically. You should still manually test to validate the user experience.
  74. 74. Keep in touch linkedin.com/in/renatoiwashima @renatoiwa renatoiwa@gmail.com

×