Non-text Content

Non-text content includes any content that is not plain text, such as images, videos, audio clips, and graphical elements. In the context of accessibility, non-text content must have equivalent text alternatives that convey the same information or function. This ensures all users, including those with visual, auditory, or cognitive impairments, can access and understand the content. Proper labeling of non-text content is important for app accessibility, making content more inclusive and usable for everyone.

ImageView element accessibility label

An accessibility label is an attribute assigned to ImageView or ImageButton elements that convey information graphically. This label gives a textual description of the graphic, making it accessible to users relying on screen readers.

Using app accessibility testing, you can identify ImageView elements that lack proper accessibility labels.

Success criteria

The rule checks for the following potential violations:

For Android:

• Non-decorative image (ImageView or ImageButton) elements that convey meaningful information lack contentDescription.

For iOS:

• Non-decorative image (ImageView or ImageButton) elements that convey meaningful information lack accessibilityLabel.

How to fix?

To prevent ImageView element accessibility label violations, ensure every ImageView or ImageButton that conveys meaningful information includes a clear description using the contentDescription (Android) or accessibilityLabel (iOS) property. This description should articulate the visual content and purpose.

Example

The following example scan report highlights an informative ImageView element is present at the bottom right corner of the screen without an appropriate accessibility label. It is indicated by contentDescription: "". The ImageView, represented by an icon, is used to convey meaningful information (in this case, it might be a shortcut to access the gallery or perform a specific action). However, as it lacks a descriptive label, screen readers will not be able to narrate the context of this image, making it inaccessible to users with visually difficulties.

Fix

• For Android:
  Add a contentDescription property to the ImageView element that clearly describes its purpose. For example, if the ImageView is a button to open the gallery, the contentDescription should be something like Open Gallery.
  
• For iOS:
  Add an accessibilityLabel property to the ImageView element that clearly describes its purpose. For example, if the ImageView is a button to open the gallery, the accessibilityLabel should be something like Open Gallery.

Reference

Learn more about Non-text Content WCAG: 2.1 - 1.1.1 (Level A) guideline.