meaningful-alt-text

Ensures that images have a meaningful alt text that describes the image.

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.

Example

Consider the following image:

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.
• If you don’t want an alt text for decorative images, use role="presentation" or attach aria-hidden with the image code.

Reference

• WCAG 1.1.1: Non-text-content
• image-alt rule