Overview
Alt text lets screen readers access the content in your graphics, charts, and infographics, and provides a backup if the image does not load.
Describe an image
Use the alt="" attribute on the image to provide a short description of the graphic. You should cover the essential points, such as the highlights and lowlights in a graph or chart, and the important information in an infographic. If you cannot fit all the information in the alt="" attribute, add a longer description that expands on the information you've already provided.
There's no need to display the longer description visually on the page as the information is available in the image. To hide the description and to make sure that a screen reader user gets the alt text automatically followed by the visually hidden longer description, do the following:
- Add an aria-describedby attribute to the image.
- Add an ID with the same value as the image aria-describedby attribute to the longer description's containing element.
- Add aria-hidden="true" to the longer description's containing element.
Role, property, state, and tabindex attributes
| Role | Attribute | Element | Usage |
|---|---|---|---|
| aria-describedby | Links the image to visually hidden content on the page. | ||
| id | , , etc. | Identifies the containing element of the hidden content. | |
| aria-hidden="true" | , , etc. | Hides the hidden content from a screen reader as it reads through the page contents. |
Ignore an image
To indicate that the screen reader should ignore an image that’s decorative or explained in the text on the page, use an empty alt tag. This is indicated by a pair of double quotes with no space ("").
Best practices
- Keep alt text succinct, 150 characters or less.
- Put the most important information at the beginning.
- Use an alt tag even if it is empty. If you don’t provide an alt tag, the screen reader reads out the image file name.
- Add any words in the image that are important to understanding the content.
- End alt text with punctuation to make the screen reader pause before transitioning to non-image content.
- Don't use picture of or graphic in alt text because the screen reader already alerts the user that there is a picture.
- Don't rely on figure captions to describe an image. A figure caption expands on an image but doesn't replace it. For example, an image of an otter could have alt text an otter swimming in a river and a caption with the Latin name for an otter and a link to more resources on otters.