ImageView element accessibility label

The ImageView element accessibility label rule ensures that the elements in your app that convey information graphically, such as ImageView or ImageButton, have a descriptive and meaningful accessibility label. These labels are essential for screen readers to interpret the graphic’s content and purpose, making the app accessible to users with visual impairments. Testing for ImageView element accessibility labels is necessary as it ensures that all users, regardless of their abilities, can understand and interact with the app’s visual content effectively.

Success criteria

The specific criteria for success are:

• ImageView or ImageButton elements that convey meaningful information should include a clear description that articulates the visual content and purpose.
• The description should be accessible by assistive technologies.

AI-powered testing

BrowserStack provides an AI-powered Issue Detection Agent that analyzes non-decorative image elements (such as, ImageView or ImageButton) and evaluates their assigned accessibility labels for accuracy and contextual relevance. If the label is missing or inaccurate, the agent suggests a meaningful and contextually appropriate label based on the image’s content and purpose within the app.

The Issue Detection Agent performs the following checks:

• Detects and evaluates accessibility labels
  1. Identifies whether non-decorative images have an assigned accessibility label.
  2. Compares the label with the image’s visual content and context to confirm it accurately describes the element’s purpose.
• Suggests meaningful labels
  1. Generates a descriptive label when the existing one is missing or inaccurate.
  2. Suggests the label in the same language as the surrounding screen content.

For more information about the Issue Detection Agent, see Issue Detection Agent.

How to fix

Manual fix

To fix ImageView element accessibility label violations manually:

AI-powered fix

You can use the AI-powered suggestions to add contextually relevant labels to the image elements. AI-suggested labels are clearly highlighted in the report for your review.

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

References

• 1.1.1 Non-text Content (Level A): WCAG 2.1 · WCAG 2.2