Images that are central to the understanding of a publication must always include a text alternative in
their alt attribute. In the case of complex images, a detailed description should also be
added.
If the image is purely decorative, the alt attribute should be left empty. For improved,
accessibility, an ARIA role attribute with the property presentation should also be attached.
Note
If an image is important to the publication, but not required to be read at the point of insertion (i.e., it is not part of the logical reading order), use a figure tag to enclose it.
Note
The details element has been removed from HTML5, but remains under development for HTML
5.1. It will allow a collapsible description when finalized, but is not recommended for describing
content at this time.
<img
src="covers/9781449328030_lrg.jpg"
alt="First Edition" /><figure>
<img
id="fig01"
src="graphics/water-cycle.jpg"
aria-describedby="water-cycle-desc"
alt="The hydrologic cycle, showing the
circular nature of the process as water
evaporates from a body of water and
eventually returns to it"/>
<figcaption>
The hydrologic cycle
<a href="#water-cycle-desc">
<img src="images/desc.gif"
alt="Click for description"/>
</a>
</figcaption>
</figure>
…
<aside id="water-cycle-desc">
<p>
Figure 1 - The diagram shows the processes
of evaporation, condensation,
evapotranspiration, water storage
in ice and snow, and precipitation.
A large body of water …
</p>
<p><a role="doc-backlink" href="#fig01">
<img src="#fig01" alt="Return to figure"/>
</a></p>
</aside>
<img
src="graphics/gothic-border.png"
role="presentation"
alt=""/>img element