EPUB 3 Accessibility Guidelines

Figures

The HTML5 figure element allows an assistive technology to skip secondary content, thereby enabling readers to continue reading the primary narrative uninterrupted. Because figures are interspersed within the body, like asides, without being able to clearly identify them the reader would be constantly interrupted at the points where they occur.

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, 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 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.

Note

The details element has been removed from HTML5, but remains under development for HTML 5.1. As use of the element cannot be guaranteed to pass future updates to epubcheck, it is not recommended for describing content at this time.

Example

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 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="tbl01-summary">
         <p>Summary</p>
         <p>
            Characteristics are given 
            in the second column…
         </p>
      </aside>
   </figcaption>
   <table aria-describedby="tbl01-summary">
      …
   </table>
</figure>

Compliance References and Standards

Additional Resources