UX for Missing Content Descriptions

Ataul is a Google Developer Expert for Android focusing on inclusive design for mobile platforms and loves facilitating the production of universally useable apps. Also, he watches a lot of movies.

We know it's important to add content descriptions, but what happens when you don't? In this post, we look at a TalkBack feature designed to help users provide their own labels, how it can start to get a little messy and what you can do to help them.

Let's pretend I wrote an app, Super Cool, for my social network. It currently only shows a single post with some gibberish, but it has like and dislike buttons for every post.

Unfortunately, I forgot to add content descriptions to the buttons. This means that if a TalkBack user is interacting with Super Cool, and they focus on either of these buttons, they'll hear "Button, Unlabelled".

The user will be frustrated, but is probably used to it - many apps are missing content descriptions. After a while however, they learn that the first button after the text post is Like so they decide to add a custom label. This will mean that they don't have to remember it anymore!

gif showing user attempting to add custom label, but error message appears:

Alas, I am a lazy developer: I used the android:onClick attribute in XML to bind to public methods in my Activity rather than creating a View ID and associating an OnClickListener with it.

    android:src="@drawable/up" ... />

    android:src="@drawable/down" ... />

What I didn't know was that using custom labels requires elements to have IDs, preventing users from even making the interface more helpful for themselves.

Months down the line, I refactor the app and decide not to use the android:onClick attribute and to add an ID to each of my buttons:

    android:src="@drawable/up" ... />

    android:src="@drawable/down" ... />

"Awesome," says the new user (the old user has long since uninstalled my app). "I can finally add some custom labels!"

custom label dialog with an empty input field custom label dialog with “like” typed into the input field

Now, at last, the buttons will have user-added content descriptions, "like" and "dislike", and these will be read aloud when TalkBack focuses on these elements.

The user is now somewhat content. As a developer though, I continue to refactor the app. I notice that I added IDs named for "like" and "dislike" even though my domain language is "upvote" and "downvote". I decide to change it.

Suddenly, that content user is once again missing TalkBack descriptions for these two buttons.

The reason is that custom labels rely on the IDs remaining stable. If they change, then the labels are orphaned. Even worse, if the IDs are exchanged between Views, then the labels will be applied to the incorrect Views.

At long last, I decide to be a good, considerate developer and add a content description to Super Cool’s buttons explicitly:

    android:src="@drawable/up" ... />

The user’s custom labels will be ignored, and our content description will be used instead.

In conclusion, it really is important to add content descriptions for actionable elements in your UI. Not only does it provide a better experience for your users from the start, but it also saves them a potentially long and frustrating journey.

About Novoda

We plan, design, and develop the world’s most desirable Android products. Our team’s expertise helps brands like Sony, Motorola, Tesco, Channel4, BBC, and News Corp build fully customized Android devices or simply make their mobile experiences the best on the market. Since 2008, our full in-house teams work from London, Liverpool, Berlin, Barcelona, and NYC.

Let’s get in contact