Informative images

Best practice for informative images

Informative images convey simple information that can be expressed in a short phrase. The text alternative should convey the meaning or essential content of the image.

Follow these best practices for informative images:

• Use the alt attribute on the img element
• Provide meaningful text alternatives that convey the intent, purpose and meaning of the image.
• Do not include the words “image of” or “graphic of” in the alt text, since screen readers already declare an image role.
• Keep alternative text concise and less than 150 characters.
• When an image contains words that are important to understanding the content, the alt text should include those words.

Good example: Images used to supplement other information

The following image shows a dog wearing a bell. It supplements the adjacent text that explains the purpose of this bell. A short text alternative is sufficient to describe the information that is displayed visually but is not explained in the text; in this case, the text alternative is “Dog with a bell attached to its collar”.

Note: If the adjacent text included an explanation of how the dog wears a bell ("attached to its collar"), the image would be considered redundant. As this isn’t mentioned in the text, the image is deemed to be informative.

Example begins

Example ends

HTML

Code begins

<figure>
   <img src="dog.jpg" alt="Dog with a bell attached to its collar."> 
   <figcaption>Off-duty guide dogs often wear a bell. Its ring helps the blind owner keep track of the dog's location</figcaption>
</figure>

Code ends

This example is from the WAI Web Accessibility Tutorials: Informative Images. Eric Eggert, Shadi Abou-Zahra, eds. Copyright © 2019 W3C® (MIT, ERCIM, Keio, Beihang). Status: Updated 27 July 2019. Informative Images (WAI)

Related WCAG resources