The document discusses accessibility features in Android apps. It begins with an introduction to accessibility and common impairments. It then compares TalkBack on Android to VoiceOver on iOS. The bulk of the document demonstrates various accessibility features and best practices in Android, including using TalkBack gestures, making images accessible, adding states to buttons and images, making text views work for screen readers, using live regions, and more. It provides code examples and screenshots. Resources for further information are listed at the end.

1. Accessibility in Action
@KellyShuster
Technical Solutions to the Accessibility Challenge

2. Schedule
What is Accessibility?
Android vs iOS
Exploring Android Accessibility Features
Coding Accessible Apps

7. What is Accessibility?

8. Mobility Impairment
Audio Impairment
Vision Impairment

9. Mobility Impairment
Dexterity
Issues
Com
plete
Paralysis

10. Mobility Impairment
Dexterity
Issues
Com
plete
Paralysis
48 dp Rhythm
Custom touch
& hold delay
Head switch
Sip & puff
EMG sensors

11. Audio Impairment
Hearing
Loss Com
plete
Deafness

12. Audio Impairment
Hearing
Loss Com
plete
Deafness
Audio notifications must
have visual component
System wide closed captioning

13. Visual Impairment
Color
Blindness
Com
plete
Blindness
Low
Vision

14. Visual Impairment
Color
Blindness
Com
plete
Blindness
Color
Settings
TalkBack
Low
Vision
Contrast
Settings

15. Android vs iOS

16. TalkBack (Donut) VoiceOver (iOS 3)

17. Poor Documentation
Smaller Community
Good Documentation
Larger Community

18. No Screen Blanking
No Quick On/Off
Screen blanking
Three Tap On/Off

19. OPEN! CLOSED!

20. How to Use TalkBack

21. TalkBack Basics
Touch to Explore

22. TalkBack Basics
Touch to Explore
Read through elements (swipe left or right)

23. TalkBack Basics
Touch to Explore
Read through elements (swipe left or right)
Double tap to select

24. TalkBack Basics
Touch to Explore
Read through elements (swipe left or right)
Double tap to select
Tap once to silence

25. TalkBack Basics
Touch to Explore
Read through elements (swipe left or right)
Double tap to select
Tap once to silence
Listen for “Earcon” clues

26. Special Gestures
Global
Context
Menu
BackHomeLocal
Context
Menu

27. Special Gestures
Global
Context
Menu
BackHomeLocal
Context
Menu

28. Development

29. Development Tips & Tricks
TalkBack on-off turns off USB debugging!

30. Development Tips & Tricks
TalkBack on-off turns off USB debugging!
TalkBack not supported in emulator

31. Development Tips & Tricks
TalkBack on-off turns off USB debugging!
TalkBack not supported in emulator
No screenshots allowed with TalkBack on

32. Development Tips & Tricks
TalkBack on-off turns off USB debugging!
TalkBack not supported in emulator
No screenshots allowed with TalkBack on
Work with QA

33. Demo

34. ImageView & ImageButton

35. Image with Meaning

36. Image with Meaning
<ImageView
android:id="@+id/image_bulbasaur_quiz"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_below="@id/text_question"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:contentDescription="@string/bulbasaur"
android:src="@drawable/bulbasaur" />

37. <ImageView
android:id="@+id/image_bulbasaur_quiz"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_below="@id/text_question"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:contentDescription="@string/bulbasaur"
android:src="@drawable/bulbasaur" />
Image with Meaning

38. Decorative Image

39. Decorative Image
<ImageView
android:id="@+id/image_border_1"
android:layout_width="120dp"
android:layout_height="30dp"
android:contentDescription="@null"
android:src="@drawable/ballons" />

40. <ImageView
android:id="@+id/image_border_1"
android:layout_width="120dp"
android:layout_height="30dp"
android:contentDescription="@null"
android:src="@drawable/ballons" />
Decorative Image

41. <ImageView
android:id="@+id/image_border_1"
android:layout_width="120dp"
android:layout_height="30dp"
android:contentDescription="@null"
android:src="@drawable/ballons" />
Decorative Image

42. States

43. States: Pokeball
mAllPokemon = (LinearLayout) findViewById(R.id.layout_all_pokemon);
mPokemonToggleButton = (ImageButton) findViewById(R.id.image_button_pokeball);
mPokemonToggleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(mAllPokemon.getVisibility() == View.VISIBLE){
mAllPokemon.setVisibility(View.GONE);
mPokemonToggleButton.setImageResource(R.drawable.pokeball_closed);
mPokemonToggleButton.setContentDescription(getString(R.string.show_pokemon));
}
else {
mAllPokemon.setVisibility(View.VISIBLE);
...
mPokemonToggleButton.setImageResource(R.drawable.pokeball_open);
mPokemonToggleButton.setContentDescription(getString(R.string.hide_pokemon));
}
}
});

44. mAllPokemon = (LinearLayout) findViewById(R.id.layout_all_pokemon);
mPokemonToggleButton = (ImageButton) findViewById(R.id.image_button_pokeball);
mPokemonToggleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(mAllPokemon.getVisibility() == View.VISIBLE){
mAllPokemon.setVisibility(View.GONE);
mPokemonToggleButton.setImageResource(R.drawable.pokeball_closed);
mPokemonToggleButton.setContentDescription(getString(R.string.show_pokemon));
}
else {
mAllPokemon.setVisibility(View.VISIBLE);
...
mPokemonToggleButton.setImageResource(R.drawable.pokeball_open);
mPokemonToggleButton.setContentDescription(getString(R.string.hide_pokemon));
}
}
});
States: Pokeball

45. mAllPokemon = (LinearLayout) findViewById(R.id.layout_all_pokemon);
mPokemonToggleButton = (ImageButton) findViewById(R.id.image_button_pokeball);
mPokemonToggleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(mAllPokemon.getVisibility() == View.VISIBLE){
mAllPokemon.setVisibility(View.GONE);
mPokemonToggleButton.setImageResource(R.drawable.pokeball_closed);
mPokemonToggleButton.setContentDescription(getString(R.string.show_pokemon));
}
else {
mAllPokemon.setVisibility(View.VISIBLE);
...
mPokemonToggleButton.setImageResource(R.drawable.pokeball_open);
mPokemonToggleButton.setContentDescription(getString(R.string.hide_pokemon));
}
}
});
States: Pokeball

46. mAllPokemon = (LinearLayout) findViewById(R.id.layout_all_pokemon);
mPokemonToggleButton = (ImageButton) findViewById(R.id.image_button_pokeball);
mPokemonToggleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(mAllPokemon.getVisibility() == View.VISIBLE){
mAllPokemon.setVisibility(View.GONE);
mPokemonToggleButton.setImageResource(R.drawable.pokeball_closed);
mPokemonToggleButton.setContentDescription(getString(R.string.show_pokemon));
}
else {
mAllPokemon.setVisibility(View.VISIBLE);
...
mPokemonToggleButton.setImageResource(R.drawable.pokeball_open);
mPokemonToggleButton.setContentDescription(getString(R.string.hide_pokemon));
}
}
});
States: Pokeball

47. mAllPokemon = (LinearLayout) findViewById(R.id.layout_all_pokemon);
mPokemonToggleButton = (ImageButton) findViewById(R.id.image_button_pokeball);
mPokemonToggleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(mAllPokemon.getVisibility() == View.VISIBLE){
mAllPokemon.setVisibility(View.GONE);
mPokemonToggleButton.setImageResource(R.drawable.pokeball_closed);
mPokemonToggleButton.setContentDescription(getString(R.string.show_pokemon));
}
else {
mAllPokemon.setVisibility(View.VISIBLE);
...
mPokemonToggleButton.setImageResource(R.drawable.pokeball_open);
mPokemonToggleButton.setContentDescription(getString(R.string.hide_pokemon));
}
}
});
States: Pokeball

48. mAllPokemon = (LinearLayout) findViewById(R.id.layout_all_pokemon);
mPokemonToggleButton = (ImageButton) findViewById(R.id.image_button_pokeball);
mPokemonToggleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(mAllPokemon.getVisibility() == View.VISIBLE){
mAllPokemon.setVisibility(View.GONE);
mPokemonToggleButton.setImageResource(R.drawable.pokeball_closed);
mPokemonToggleButton.setContentDescription(getString(R.string.show_pokemon));
}
else {
mAllPokemon.setVisibility(View.VISIBLE);
...
mPokemonToggleButton.setImageResource(R.drawable.pokeball_open);
mPokemonToggleButton.setContentDescription(getString(R.string.hide_pokemon));
}
}
});
States: Pokeball

49. mAllPokemon = (LinearLayout) findViewById(R.id.layout_all_pokemon);
mPokemonToggleButton = (ImageButton) findViewById(R.id.image_button_pokeball);
mPokemonToggleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(mAllPokemon.getVisibility() == View.VISIBLE){
mAllPokemon.setVisibility(View.GONE);
mPokemonToggleButton.setImageResource(R.drawable.pokeball_closed);
mPokemonToggleButton.setContentDescription(getString(R.string.show_pokemon));
}
else {
mAllPokemon.setVisibility(View.VISIBLE);
...
mPokemonToggleButton.setImageResource(R.drawable.pokeball_open);
mPokemonToggleButton.setContentDescription(getString(R.string.hide_pokemon));
}
}
});
States: Pokeball

50. States: Pokemon Visibility
@Override
public void onClick(View v) {
if(mAllPokemon.getVisibility() == View.VISIBLE){
...
}
else {
mAllPokemon.setVisibility(View.VISIBLE);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
mAllPokemon.announceForAccessibility(getString(R.string.now_showing_pokemon));
}
else{
mAllPokemon.setContentDescription(getString(R.string.now_showing_pokemon));
mAllPokemon.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED);
}
mPokemonToggleButton.setImageResource(R.drawable.pokeball_open);
mPokemonToggleButton.setContentDescription(getString(R.string.hide_pokemon));
}
}

51. States: Pokemon Visibility
@Override
public void onClick(View v) {
if(mAllPokemon.getVisibility() == View.VISIBLE){
...
}
else {
mAllPokemon.setVisibility(View.VISIBLE);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
mAllPokemon.announceForAccessibility(getString(R.string.now_showing_pokemon));
}
else{
mAllPokemon.setContentDescription(getString(R.string.now_showing_pokemon));
mAllPokemon.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED);
}
mPokemonToggleButton.setImageResource(R.drawable.pokeball_open);
mPokemonToggleButton.setContentDescription(getString(R.string.hide_pokemon));
}
}

52. @Override
public void onClick(View v) {
if(mAllPokemon.getVisibility() == View.VISIBLE){
...
}
else {
mAllPokemon.setVisibility(View.VISIBLE);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
mAllPokemon.announceForAccessibility(getString(R.string.now_showing_pokemon));
}
else{
mAllPokemon.setContentDescription(getString(R.string.now_showing_pokemon));
mAllPokemon.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED);
}
mPokemonToggleButton.setImageResource(R.drawable.pokeball_open);
mPokemonToggleButton.setContentDescription(getString(R.string.hide_pokemon));
}
}
States: Pokemon Visibility

53. EditText

54. <EditText
android:id="@+id/edit_demo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_different"
android:hint="@string/type_here"/>
EditText

55. <EditText
android:id="@+id/edit_demo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_different"
android:hint="@string/type_here"/>
EditText

56. TextView is Different for TalkBack

57. TextView is Different for TalkBack
<TextView
android:id="@+id/text_view_different"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_clickable"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:contentDescription="@string/monday"
android:text="@string/mon"
android:textSize="20sp" />

58. <TextView
android:id="@+id/text_view_different"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_clickable"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:contentDescription="@string/monday"
android:text="@string/mon"
android:textSize="20sp" />
TextView is Different for TalkBack

59. <TextView
android:id="@+id/text_view_different"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_view_clickable"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:contentDescription="@string/monday"
android:text="@string/mon"
android:textSize="20sp" />
TextView is Different for TalkBack

60. Toasts & Appearing Items

61. Hidden TextView
@Override
public void onClick(View v) {
if(mHiddenTextView.getVisibility() == View.VISIBLE){
mHiddenTextView.setVisibility(View.GONE);
}
else {
mHiddenTextView.setVisibility(View.VISIBLE);
mHiddenTextView.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED);
}
}

62. Hidden TextView
@Override
public void onClick(View v) {
if(mHiddenTextView.getVisibility() == View.VISIBLE){
mHiddenTextView.setVisibility(View.GONE);
}
else {
mHiddenTextView.setVisibility(View.VISIBLE);
mHiddenTextView.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED);
}
}
Hidden TextView

63. Hidden TextView
mHiddenTextView = (TextView) findViewById(R.id.text_view_hidden);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
mHiddenTextView.setAccessibilityLiveRegion(View.ACCESSIBILITY_LIVE_REGION_POLITE);
}
Live Regions

64. Read Layout as Element

65. Read Layout as Element
// Note you must include v4 to use this.
// Make sure text is read on the *layout* for VI users, not on
// individual textViews
ViewCompat.setImportantForAccessibility(
mTextReadMe, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);
ViewCompat.setImportantForAccessibility(
mTextAsA, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);
ViewCompat.setImportantForAccessibility(
mTextSingle, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);
ViewCompat.setImportantForAccessibility(
mTextItem, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);

66. // Note you must include v4 to use this.
// Make sure text is read on the *layout* for VI users, not on
// individual textViews
ViewCompat.setImportantForAccessibility(
mTextReadMe, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);
ViewCompat.setImportantForAccessibility(
mTextAsA, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);
ViewCompat.setImportantForAccessibility(
mTextSingle, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);
ViewCompat.setImportantForAccessibility(
mTextItem, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);
Read Layout as Element

67. mLayoutAllText.setContentDescription(
mTextReadMe.getText().toString() + " " +
mTextAsA.getText().toString() + " " +
mTextSingle.getText().toString() + " " +
mTextItem.getText().toString() );
Read Layout as Element

70. CardView

71. CardView
CardView charmanderCard = (CardView) findViewById(R.id.card_view_charmander);
charmanderCard.setContentDescription(getString(R.string.charmander_access_details));
charmanderCard.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MaterialActivity.this, "Yay Charmander!", Toast.LENGTH_LONG).show();
}
});

72. CardView
CardView charmanderCard = (CardView) findViewById(R.id.card_view_charmander);
charmanderCard.setContentDescription(getString(R.string.charmander_access_details));
charmanderCard.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MaterialActivity.this, "Yay Charmander!", Toast.LENGTH_LONG).show();
}
});

73. Floating Action Button

74. FAB Traversal Order
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_material);
// Set Traversal Order for Accessibility so FAB isn't hard to access
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.floating_action_button);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
fab.setAccessibilityTraversalBefore(R.id.scroll_cards);
}
. . .
}

75. @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_material);
// Set Traversal Order for Accessibility so FAB isn't hard to access
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.floating_action_button);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
fab.setAccessibilityTraversalBefore(R.id.scroll_cards);
}
. . .
}
FAB Traversal Order

76. @KellyShuster
KioKrofovitch/android-accessibility

77. Resources
Android Accessibility Documentation https://developer.android.com/guide/topics/ui/accessibility/index.html
Kelly’s Accessibility Demo App with Comments https://github.com/KioKrofovitch/android-accessibility
The 48dp Design Rhythm http://developer.android.com/design/style/metrics-grids.html#48dp-rhythm
New Accessibility Features in Lollipop http://www.androidcentral.com/accessibility-features-android-50-lollipop
VI Opinion: iOS vs Android https://takesugar.wordpress.com/2014/07/22/accessibility-head-to-head-android-vs-apple/
Fab Library https://github.com/futuresimple/android-floating-action-button
Credits:
Blind Institute of Technology http://blindinstituteoftechnology.org/
Case Study: Implementation of ADA on CU Boulder Campus, Ryan McDonald, June 2009