Summary

Add summaries for tables with complex layouts to explain how they are structured.

Techniques

Examples

Example 1 — Summary in the table caption

In these examples, the summary is provided within the table's caption element. One example uses a p tag, so the summary is always visible, while the other uses a details element to collapse the summary.

<table>
   <caption>
      <p class="title">Consolidated Statements of Operations<p>
      <p class="desc">
         The table contains the complete list of
         operational expenses for the last three years.
         These expenses are categorized within the table to …
      </p>
   </caption>
   …
</table>
<table aria-details="tbl-desc">
   <caption>
      <p class="title">Consolidated Statements of Operations</p>
      <details id="tbl-desc">
         <summary>Description</summary>
         <p class="desc">
            The table contains the complete list
            of operational expenses for the last
            three years. These expenses are
            categorized within the table to …
         </p>
      <details>
   </caption>
   …
</table>
Example 2 — Summary in a figure

In the first example, the table summary is provided in the figure's figcaption element.

In the second example, a details element is used for the table summary. As the details element is not well supported inside a figure in EPUB, it is placed after the figure and linked to it using the aria-details attribute.

<figure aria-details="tbl-desc">
   <figcaption>
      <p class="title">Consolidated Statements of Operations</p>
      <p class="desc">
         The table contains the complete list of
         operational expenses for the last three years.
         These expenses are categorized within the table to …
      </p>
   </figcaption>

   <table aria-details="tbl-desc">
      …
   </table>
</figure>
<figure aria-details="tbl-desc">
   <figcaption>Consolidated Statements of Operations</figcaption>

   <table aria-details="tbl-desc">
      …
   </table>
</figure>

<details id="tbl-desc">
   <summary>Description</summary>
   <p class="desc">
      The table contains the complete list
      of operational expenses for the last
      three years. These expenses are
      categorized within the table to …
   </p>
<details>
Example 3 — Hidden summary associated with ARIA attributes

In this example, the summary cannot be visibly displayed, so the hidden text is linked to the table using the aria-describedby attributes. Although assistive technologies will normally not read hidden text, the use of the ARIA attribute allows users to hear the summary.

<table aria-describedby="tbl-desc">
   …
</table>

<p id="tbl-desc" hidden="">
   The table contains the complete list of
   operational expenses for the last three years.
   These expenses are categorized within the table to …
</p>

Explanation

For tables with complex information or structures, including a description for the user on how to read the table can greatly assist comprehension. These summaries are beneficial for many different user needs, not only for users who cannot see the content.

The summary for a table should ideally be placed before users encounter the table. If this is not possible, ARIA attributes such as aria-details and aria-describedby can be used to programmatically link the summary to the table. These attributes allow assistive technologies to provide the summary to the user when they reach the table, despite being positioned elsewhere.

There are many methods for adding summaries. While this page lists some, the HTML specification also includes a section detailing others. All these methods are valid, so the choice of which to use can be dictated by the publisher's workflow needs.

Related Links