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.

AI-enhanced checks

With the integration of artificial intelligence (AI) capabilities, App Accessibility Testing analyzes the visual content of non-decorative image elements (ImageView or ImageButton) and evaluates the assigned accessibility labels to ensure they convey meaningful information. This process improves the accuracy and relevance of accessibility labels, making them more informative for users who rely on screen readers. AI-powered checks are clearly highlighted in the report for your review.

The AI engine performs the following checks:

• Detects and evaluates accessibility labels
  1. Scans the image and checks whether non-decorative images have an assigned accessibility label.
  2. Compares the assigned label with the visual content to ensure it accurately describes the image’s purpose and context.
• Suggests meaningful labels
  1. If the assigned label is missing or does not accurately describe the image, the AI engine generates a meaningful label based on the image’s content.
  2. The alt text is generated in the same language as the screen content.

For more information about how BrowserStack App Accessibility Testing uses AI to improve app accessibility, refer to the AI-enhanced testing page.

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 to ensure screen readers can convey the right context to users.
Alternatively, 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

• 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.
• Learn more about Non-text Content WCAG: 2.2 - 1.1.1 (Level A) guideline.