Accessibility on Android

Talk for Paris Android User Group on October 2015

Transcript

1. Accessibility on Android Developing for the visually impaired
2. Every app that provides a service Transportation APPS THAT SHOULD BE ACCESSIBLE Messaging, Email, Social Banking, Financial E-commerce
3. STATS FOR FRANCE 8% color-blind in men 65k blind 1.2M suffer low vision
4. STATS FOR FRANCE 8% color-blind in men 1.2M suffer low vision 65k blind
5. STATS FOR FRANCE 8% color-blind in men 65k blind 1.2M suffer low vision
6. STATS FOR FRANCE 8% color-blind in men 65k blind 1.2M suffer low vision
7. Contrast COLOR BLINDNESS Matching
8. Lollipop accessibility Accessibility options Developer options
9. Developing for color blindness 1/4 Think about your color palette
10. Developing for color blindness 2/4 Offer patterns on top of colors
11. Developing for color blindness Developing for color blindness 3/4 Be careful about charts, maps...
12. Developing for color blindness 4/4 Test, test, test… !
13. LOW VISION Accessibility options Display options
14. Low vision • Use ‘sp’ for your text size • Make your layout adapt if the text is bigger (also needed for i18n) • Test your app
15. BLIND
16. TALKBACK
17. • Activates TalkBack when moving a finger around the screen • Double tap to validate selection • Two fingers for scrolling EXPLORE
18. Detect if accessibility services are enabled // For example: keep media controls visible if they are enabled AccessibilityManager am = (AccessibilityManager) context.getSystemService(ACCESSIBILITY_SERVICE); boolean isAccessibilityEnabled = am.isEnabled(); // TalkBack boolean isExploreByTouchEnabled = am.isTouchExplorationEnabled(); // Explore by touch
19. Content description: Buttons, ImageViews, CheckBoxes, ... <Button android:id="@+id/pause_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@string/pause" android:src="@drawable/pause"/>
20. Content description: Buttons, ImageViews, CheckBoxes, ... <Button android:id="@+id/pause_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@string/pause" android:src="@drawable/pause"/>
21. labelFor: links an EditText to its label <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:labelFor="@+id/edit_item_name" android:text="Item Name"/> <EditText android:id="@+id/edit_item_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Item Name"/> </LinearLayout>
22. labelFor: links an EditText to its label <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:labelFor="@+id/edit_item_name" android:text="Item Name"/> <EditText android:id="@+id/edit_item_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Item Name"/> </LinearLayout>
23. accessibilityLiveRegion: will be read when content is modified <TextView android:id="@+id/search_result" android:layout_width="match_parent" android:layout_height="match_parent" android:accessibilityLiveRegion="polite"/>
24. accessibilityLiveRegion: will be read when content is modified <TextView android:id="@+id/search_result" android:layout_width="match_parent" android:layout_height="match_parent" android:accessibilityLiveRegion="polite"/>
25. Testing frameworks // Espresso @Before public void setUp() { AccessibilityChecks.enable(); } // Robolectric @org.robolectric.annotation.AccessibilityChecks @Test public void clickingLogin_shouldStartLoginActivity() {}
26. • Provide content descriptions for: Buttons, ImageViews, ImageButtons, CheckBoxes, … • Do not put “button” or “image” in your content descriptions • Use labelFor on your EditTexts • Use Lint and Accessibility Checks • Test your app ! Developing for the blind
27. Thank you ! @AdrienCouque
28. Illustrations: Anne-Audrey Gounot Color blind palette: http://mkweb.bcgsc.ca/biovis2012/ Dots: https://dribbble.com/shots/1599809-Color-Blind-Mode Trello: http://littlebigdetails.com/post/35775193711/trello-color-blind-friendly-mode-makes Color blind graphs: wearecolorblind.com Blind app user: Tommy Edison: https://www.youtube.com/watch?v=0i1k3srHKAA RESOURCES