Writing Useful Alternative Text

Alternative text is a replacement for the information an image provides in a particular context. It is not necessarily a literal inventory of everything visible in the picture.

For an informative image, describe the information the visitor needs:

<img src="chart.png"
     alt="Support requests rose from 120 in April to 185 in June">

For a decorative image that adds no information, use an empty alternative:

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

For an image that acts as the only content of a link, the alternative should describe the link’s purpose:

<a href="/learn/html/">
  <img src="html-mark.svg" alt="HTML course">
</a>

A diagram, map, or chart may contain more information than fits in a short alt value. Provide a full explanation in visible text, a data table, or a linked long description. Avoid keyword stuffing and file names. Review alternative text in context: the surrounding caption and paragraph may already communicate some of the same information.