Write useful alt text

Alt text replaces an image for someone who cannot see it. Write what the image contributes in its current context.

<img
  src="route-map.png"
  alt="Cycle route from Central Station to the harbor"
>

Do not start with “Image of.” A screen reader already announces that it is an image.

Avoid describing details that do not matter. If the page explains a bicycle repair and the photo shows the position of a lever, describe the lever’s position. The color of the wall behind it is probably irrelevant.

If the same information is already present in nearby text, keep the alt text short rather than repeating a paragraph.

A purely decorative image should have an empty alt value:

<img src="decorative-line.svg" alt="">

The empty value tells assistive technology to skip it. Omitting alt can cause a screen reader to announce the filename, which is rarely helpful.

If an image contains important text, put that text in the page when possible. Real HTML text is easier to resize, translate, select, and search.

Quick check

Result

You got of right.

Try again