Optimize your Android app UX for screen readers
By: Doug Stevenson
Tags: Software Development, Android App Development, UI Design, Accessibility, UX

In my last post, I discussed some ways to make sure your app’s design handles text with variable length and font sizes. This is a good starting point, however, for the legally blind, no increase in the size of text will help them read that text. Your design should also be accessible via a screen reader, such as TalkBack.

Android screen reader basics

For Android, Google provides two screen readers: TalkBack and Select to Speak. In order to see these options in the Accessibility settings, you should have the Android Accessibility Suite installed.

Android accessibility settings screen

The primary reader is TalkBack. It provides both accessible navigation and text to speech. When enabled, it completely changes the way the touch screen works. A word of caution: if you enable TalkBack, you will want to go through the provided tutorial to understand how to get around. Without understanding navigation, you will likely get frustrated, as the touch screen will no longer work the way you expect. I have also found Google’s cheat sheets for TalkBack gestures and keyboard shortcuts to be very helpful.

On devices with Android 9.0 or later, there is a second screen reader called Select to Speak. This one is handy for preserving touch navigation while enabling quick access to screen reads. I recommend enabling this on the emulator or device you use for development and testing, as it will give you a good idea how your app is audibly rendered for those using TalkBack. It puts a small person icon in the bottom right corner of the screen in the navigation bar. Tap it, and it will pop up some controls that let you enable an entire screen read, or just touch a View whose content you want to hear.

Select to speak controls at the bottom of the screen

What do images “say”?

One of the more important considerations is what to do when a screen reader encounters an image. Typically you use an ImageView in Android to display the image. This works fine for people with normal vision, but for the impaired, this image is possibly going to be useless. Android Studio will even warn you about this situation. If you’re an Android engineer, you’ve probably already seen this because of the way Android Studio warns you about missing contentDescription attributes in XML:

The full text of the lint warning here is:

Missing contentDescription property on image Non-textual widgets like ImageViews and ImageButtons should use the contentDescription attribute to specify a textual description of the widget such that screen readers and other accessibility tools can adequately describe the user interface. Note that elements in application screens that are purely decorative and do not provide any content or enable a user action should not have accessibility content descriptions. In this case, just suppress the lint warning with a tools:ignore=”ContentDescription” attribute. Note that for text fields, you should not set both the hint and the contentDescription attributes since the hint will never be shown. Just set the hint. See http://developer.android.com/guide/topics/ui/accessibility/checklist.html#special-cases.

The right thing to do is assign the ImageView a value for contentDescription that describes the image, which will be read by screen readers when they encounter the view. This is similar to the way the alt attribute works for images in web browsers.

For decorative images without contextual meaning

Content descriptions are not desirable everywhere. Purely decorative images that do not have a meaning should have a value of @null to avoid speaking anything when the screen is read. However, the view is still discoverable by touch, and will render some dummy text, which is probably not what you actually want. To get an element completely out of the way of a screen reader, it should also have the importantForAccessibility attribute set:

android:importantForAccessibility="no"

Read more about the effective difference between contentDescription and importantForAccessibility .

Definitely think about what you want the aural experience to be for each image you place on screen, and mark it appropriately. This even includes TextViews!

TextView: What about truncated or ellipsized text?

Usually, for TextViews, there’s nothing you have to do to get a screen reader to correctly read the displayed text. By default, a screen reader will speak the entire text that you’ve placed into it using the text XML attribute or setText method. In many cases, this is good enough, but not always sufficient.