Skip to content

# A quick guide to text alternatives for images

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.

## 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!

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.