Skip to main content
Experience faster, smarter testing with BrowserStack AI Agents. See what your workflow’s been missing. Explore now!
No Result Found
Connect & Get help from fellow developers on our Discord community. Ask the CommunityAsk the Community

meaningful-alt-text-ai

AI-assisted rule to ensure that images have a meaningful alt text that describes the image.

Severity: Moderate

Description

Images used in a website should have a meaningful text alternative that describes the image meaningfully. Random texts that do not add value or meaning to people with visual difficulties are not useful.

Assistive technologies like screen readers rely on alt text to describe images used in a website. Also, alt texts help users who have difficulty understanding the meaning of photographs, complex pictures, and other images.

The meaningful-alt-text-ai rule detects non-helpful alt texts and suggests better alt texts using AI to improve your website’s accessibility.

If this rule is detected you can click Generate AI suggestions to view better alt texts.

A button named Generate AI suggestions

Examples

Consider the following image:

Oil rig silhouette in the foreground against a cloudy, orange sunset

Suppose the alt text for this image is something random like ‘photo’, ‘image’, or ‘img’, it doesn’t add any meaningful information. People with visual difficulties will not be able to understand what the image truly represents.

Instead, consider the alt text ‘Oil rig silhouette in the foreground against a cloudy, orange sunset’. Such descriptive alt texts help users know what the image is, and offer a consistent experience to users with or without visual difficulties.

Please note that this example is only for demonstration purposes.

How to fix?

  • Replace non-descriptive alt texts in images with meaningful and descriptive alt texts. The alt text should serve the same purpose as the image.
  • Consider using the AI-generated descriptive alt texts suggested by BrowserStack Accessibility Testing.
  • If the image is decorative, i.e. does not add information that is not already present in the webpage, use role="presentation", a null alt, or attach aria-hidden with the image code.

Reference

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle