All images must have a text alternative, unless they are purely presentational. The text alternative must convey the content or function of the image.
Two big questions tend to come up:
- Does this image need alternative text?
- What should the text alternative be?
A little loop to decide
Do this for each image on the page.
What to do
- Replace the image with its current text alternative. If there isn’t any text alternative, just remove the image. (You can do this in your head!)
- You can use the Images Accessibility Bookmarklet to visually highlight all the images on the page.
Things to check
- Is this piece of the page still meaningful, understandable, and usable?
- If it isn’t, update the text alternative so that it is.
- That might mean setting empty alternative text (for example
alt=""). - The text alternative should convey the content or function of the image.
- That might mean setting empty alternative text (for example
Lots of examples
Example 1: an icon button
Let’s compare descriptive and functional text alternatives.
Bad example
Let’s replace the image with it’s text alternative.
The text alternative is being used for the function of the button. “Pencil” is a literal description of the image. This isn’t meaningful, understandable, or usable. Let’s try again.
Good example
Let’s replace the image with it’s text alternative.
The text alternative describes the function of the button. It’s meaningful, understandable, and usable. Yay!
Example 2: an icon-and-text button
Let’s compare when a text alternative is and isn’t needed.
Bad example
Let’s replace the image with it’s text alternative.
The doubled-up button text isn’t very meaningful, understandable, or usable. Let’s try again.
Good example
Let’s replace the image with it’s text alternative.
The button is meaningful, understandable, and usable. Yay!
Example 3: a photo
Let’s compare empty and descriptive text alternatives.
Note: I’ve added a red dashed border to images to help with the demonstration.
Bad example
Let’s replace the image with it’s text alternative.
The text alternative is empty: we’ve set alt="". Removing the image means there’s no content at all. This isn’t meaningful, understandable, or usable. Let’s try again.
Good example
Let’s replace the image with it’s text alternative.
The text alternative conveys the same information as the image. It’s meaningful, understandable, and usable. Yay!
Example 4: a linked image
Let’s compare descriptive and functional text alternatives.
Bad example
Let’s replace the image with it’s text alternative.
The text alternative is being used for the function of link. The current text describes the image, not the function of the link. It isn’t very meaningful, understandable, or usable. Let’s try again.
Good example
Let’s replace the image with it’s text alternative.
The text alternative describes the function of the image: the destination of the link. The link text is meaningful, understandable, and usable. Yay!
Example 5: an image-and-text link
Let’s compare when a text alternative is and isn’t needed. This is similar to Example 2 (an icon-and-text button).
Bad example
Capybara Experience at Wellington Zoo
Let’s replace the image with it’s text alternative.
Capybara Experience at Wellington Zoo
The doubled-up link text isn’t very meaningful, understandable, or usable. Let’s try again.
Good example
Capybara Experience at Wellington Zoo
Let’s replace the image with it’s text alternative.
Capybara Experience at Wellington Zoo
The link text describes the destination of the link. It’s meaningful, understandable, and usable. Yay!
Resources
Here are some more in-depth resources on text alternatives.