Alternative Text

1. Alternative Text for Images

When images are present in Web content, we must provide meaningful alternative text description so that users of screen readers can have the image described to them. Also, we must provide ways for screen readers to ignore images that are used for decoration.

Best Practices

  • Describe the image in context based on what details the image adds to the text. If the image is of a dog and a firefighter, depending on the context, the ideal alt text could be "Smith poses with the station's new rescue dog" or "kids love that the new rescue dog has a heart-shaped spot on its chest."
  • Keep the descriptions short and concise; roughly 140 characters or less.
  • Do not use the word “graphic or image” in the description ("image of a running dog"), as the screen reader already takes care of it. Just say "a running dog."
  • Use an empty alt for decorative images like spacers or uninformative backgrounds (alt='""), to tell screen readers to completely ignore the image. Note that this empty alt must be present, or the screen reader will read the filename one character at a time!

Don't do This

Scenario One: Alt="ama-dablam-2064522_1280.jpg"

ama-dablam-2064522_1280

Why is This Wrong?

The image has alternative text that reads "ama-dablam-2064522_1280" which is the file name from the stock house from which it was downloaded. 


Scenario Two: alt="divider line"

Divider line.

Why is This Wrong?

Visual users get to skim over spacer elements; giving them descriptive alternative text means screen reader users have to stop and think about each one.

Do This

Scenario One: alt="Himalayan mountain peak"

Himalayan mountain peak

Why is This Right?

This alternative text describes the image adequately. Depending on the context, it may also be appropriate to mention the snow, or to wax poetic about the clear sky and clouds, or to emphasize that attempting to ski here is inadvisable to the many cliffs and crags.


Scenario Two: alt="" on a Decorative Image

Why is This Right?

This empty alt instructs the screen reader to jump over this image and read the next paragraph. This is what most users would prefer.