Skip to content

Image alt text

Please read Writing effective alt image descriptions section of the Images article.

The next part of this doc is just a TL;DR of the article from above.

TL;DR

Alternative text is required for multiple reasons. The most important ones:

  1. Screen readers, used by visually impaired users, read out the alt text.
  2. Show the text when the image is not loaded
  3. Better for SEO

An example of alt text for the following image would be something like this:

html
<img src="rooster.jpg" alt="Red-crested rooster crowing">

Red-crested rooster crowing

How to write alt:

  1. Understand does the image provide any unique content for the current context
    1. No: it's a decorative image, set an empty alt attribute: alt="". An empty alt attribute is sufficient to indicate that the image is decorative and should be ignored by screen readers. Example: <img src="..." alt="">.
    2. Yes: provide descriptive alt text that conveys the important information from the image, assuming it's a part of text content of the page. Be concise but comprehensive in describing what the image shows.

Further resources

Here are a couple of good materials on the topic: