Accessible Publishing Knowledge Base

Figures

Summary

Use the figure element to group images and tables with captions, summaries and description

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="desc">
       <p>
         In the photo, Steve McQueen can be seen
         floating within the gelatinous body of 
         the blob as it moves down the 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="summary">
       <p>Summary</p>
       <p>
         Characteristics are given 
         in the second column…
       </p>
     </aside>
   </figcaption>
   <table aria-describedby="tbl01-summary">
     …
   </table>
</figure>

Explanation

The figure element can be used to encapsulate images, tables, code snippets and other content with a related caption, description and/or associated content elements.

The element should only be used for secondary content that can be read separately from the main narrative. Do not wrap every img tag in a figure, for example, only the ones that are offset from the narrative.

Being able to programmatically determine the caption for a figure is another useful feature introduced in HTML5. As captions are often placed under the content of the figure, users 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 can now be used to mark up the caption. This element must be the very first or last in the figure to be valid to the HTML5 definition.

References