Accessibility on Android

2696500a913e29a26f38115f8ea56f71?s=47 Adrien Couque
September 22, 2015

Accessibility on Android

Slides for my talk for the Paris Android User Group.
A short introduction to visual accessibility on Android (for color-blind, low-vision and blind people).

2696500a913e29a26f38115f8ea56f71?s=128

Adrien Couque

September 22, 2015
Tweet

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