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.

Ask one question before you write alt text: if this image failed to load, would a visitor still get the point of this section? If yes, keep alt text short or use alt="" for decoration. If no, describe the information the image adds.

For a product screenshot on a portfolio page, name what the project does, not every button in the UI. For a chart, state the trend the chart supports.

After you write alt text, hide the image in DevTools or temporarily break the src path and read the page with only the text left. That quick test catches most weak descriptions.

Quick check

Start quiz

Result

You got of right.

Try again