How Dev Teams Can Make Images Accessible in Android

It’s a relatively simple process to make images in iOS apps accessible: provide a content description for the image and that’s it. In Android, however, the content description attribute links a text description to a control, ImageView, or other focusable objects that otherwise has no content. There is a lot of ambiguity when it comes to deciding whether to make an image accessible to a TalkBack user or not.

To alleviate some of the confusion around making images accessible, we will be answering the following questions:

• Why do images in Android need a content description?
• When should I provide a content description for an image?
• When should I NOT provide a content description for an image?
• How do I write content descriptions for XML type of image views?
• How do I write content descriptions for image composables?

Why do images in Android need content descriptions?

Android Accessibility Service considers images without a content description as not important for accessibility, therefore such images cannot be focused on while using TalkBack. Without a content description, TalkBack users lose valuable information that images may provide.

Before diving into details any further let’s first understand how images in Android can be classified for accessibility purposes:

• Images that provide information
• Decorative images which are generally next to another UI element

When should I provide a content description for an image in Android?

A content description is a must for images that provide information (e.g. active, informative, etc). For example, in the screenshot below, the image at the top is showing some important information that should be relayed to the TalkBack user. In such cases, it’s very important to provide a content description for the image.

When should I NOT provide a content description for an image in Android?

For decorative images which are generally next to another UI element, there is no need for a content description.

For example, consider a list of items arranged one below another and each item in the list has text trailed by a chevron image. In such cases, the text before the image acts as a label. There is no additional information that is being supplied by the chevron image.

Moreover, it’s better to ensure that each item in the list view encapsulates both the text and the image, so that each item in the list acts as one focusable element as shown in the screenshot below. This creates a visual association for partially-sighted users and keeps non-sighted users from dealing with redundant information.

Note: One might argue that the linter in Android Studio points out that the image next to the item should have a content description, but in the case of a list where the text and the image are going to be grouped together when TalkBack focuses on the item, there is no need to provide a content description to the decorative image.

How do I write content descriptions for XML type of image views?

In XML type of views, providing content descriptions is pretty straightforward:

<androidx.appcompat.widget.AppCompatImageView
   android:id="@+id/img_1"
   android:layout_width="140dp"
   android:layout_height="wrap_content"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toStartOf="@+id/txt_1"
   android:contentDescription="@string/image_content_description"
   android:src="@drawable/circle_outline"
   app:layout_constraintTop_toTopOf="parent"
   app:layout_constraintBottom_toBottomOf="parent"
   />

This can also be done in Kotlin:

val img = findViewById<AppCompatImageView>(R.id.img_1)

img.contentDescription = "Purple Circle"

How do I write content descriptions for Image Composables?

Jetpack Compose offers pretty easy APIs to set a content description for an image. For image type composables, you can directly provide the content description within the image composable API as shown in the code snippet below.

Image(
      painterResource(id = R.drawable.ic_axe_con),
      contentDescription = "Axe Con, Building Accessible Experiences",
      modifier = Modifier.constrainAs(image) {
        top.linkTo(parent.top)
        start.linkTo(parent.start)
        end.linkTo(parent.end)
     }
  )

Duplicate Information

Be very careful while adding content descriptions to ensure they are concise and unique. If the content description of an image is a replication of a text next to it then it becomes confusing for the TalkBack user.

For example, in the screenshot below we can set the content description of the image as “Purple Circle” instead of just “circle.” The content description “Purple Circle” describes what the circle drawn on the screen looks like and therefore supplies more accurate information to the TalkBack user.

Conclusion

In Android, it can be easy to make images accessible for Talkback users by using the content description attribute or the API. However, it is very important to understand when to use it.

Here are some final reminders:

• When images are being used for decorative purposes or there is a text acting as the label for the image, it is a best practice to encapsulate them.
• Content descriptions should be added to images conveying any valuable information to the user.
• Avoid conveying duplicate information to the TalkBack user to avoid confusion. As a good practice words like “Image” or “photo” should be avoided while writing content descriptions for images moreover just describing what information the image is conveying to a sighted user is enough.
• Dynamic image content description should be provided through Android imperative APIs and compose APIs.

Remember, the Android Studio lint checker may give a warning for any ImageView that’s missing a content description, so it’s up to you to determine if it’s necessary to create one.

Finally, don’t forget using TalkBack to test your application is always the best way to check if you have used content description effectively.