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 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-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

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