Summary

Ensure that figures include a caption that identifies their purpose.

Techniques

Examples

Example 1 — Image with caption and description
<figure>
   <img src="images/blob.jpeg" alt="the blob"
           aria-describedby="img01-desc"/>
   <figcaption>
      Figure 3.7 — The blob is digesting Steve 
      McQueen in this unreleased ending to the 
      classic movie.
      <aside class="hidden" id="img01-desc">
         <p>
            In the photo, Steve McQueen can be seen
            floating within the gelatinous body of 
            the blob as it moves down main street …
         </p>
      </aside>
   </figcaption>
</figure>
Example 2 — Image with description link
<figure>
   <p><a href="blob-desc.xhtml">Description</a></p>
   <img src="images/blob.jpeg" alt="the blob"/>
   <figcaption>
      Figure 3.7 — The blob is digesting Steve 
      McQueen in this unreleased ending to the 
      classic movie.
   </figcaption>
</figure>
Example 3 — Table with description using figcaption

Note that the table caption element should not be used when a table is included in a figure. Including both a figcaption and caption will cause both to be rendered.

<figure>
   <figcaption>
      Characteristics with positive and 
      negative sides.
      <aside class="hidden" id="tbl01-summary">
         <p>Summary</p>
         <p>
            Characteristics are given 
            in the second column…
         </p>
      </aside>
   </figcaption>
   <table aria-describedby="tbl01-summary">
      …
   </table>
</figure>
Example 4 — Figure with a heading

If a figure has a heading that is separate from its caption, it is recommended to wrap the figure in an aside element and associate the heading with that element. Placing a heading inside the figure tag interferes with navigation by users of assistive technologies, as figures are not sectioning content.

<aside aria-labelledby="fig-hd">
   <h3 id="fig-hd">Figure 1.2 — Hello Universe!</h3>
   <figure>
      <pre>
         …
      </pre>
      <figcaption>
         The original "hello world" example is expanded to show how …
      </figcaption>
   </figure>
</aside>

Explanation

Figures can take many forms, from images to charts to tables to code snippets and on. Their central characteristic, however, is that they are secondary to the primary narrative (i.e., a figure does not have to be immediately read in order to follow the text). If images, charts and similar content is part of the priamry narrative, do not enclose it in figure tags.

Figure content is encapsulated in the HTML figure element, which also allows a descriptive caption to be associated with the content using the figcaption element.

As captions are often placed after the content of the figure, readers in the past have often had no context for the figure until reaching the descriptive text that followed the image or table. The figcaption element now allows assistive technologies to announce the caption as soon as the reader enters the figure.

Note that the figcaption element must be the very first or last in the figure.

Note

Providing a caption is not a substitute for making the content within the figure accessible. Refer to the image descriptions and table basics knowledge base pages for more information on accessible practices for the most common types of figure content.

Related Links