Caption & Summary

Captions and summaries provide information that can help users find, navigate, and understand tables. While they are not required in every case to meet WCAG 2.0, captions and summaries are relatively simple ways to provide such information if needed.

• A caption is like a heading for a table. Most screen readers announce the content of captions, which helps users to find a table and understand what it’s about and decide if they want to read it. If the user uses “Tables Mode”, captions are the primary mechanism to identify tables. The caption is provided by the <caption> element.

• A summary conveys information about the organization of the data in a table and helps users navigate it. For example, if a table has an unconventional structure (as in the examples below), information about in which row or column content can be found can be provided to the user. A summary is usually needed for complex tables.

If both caption and summary are provided for one table, the summary should not duplicate information present in the caption.

See WCAG 2.0 technique H39: Using caption elements to associate data table captions with data tables for more advice on captions.

Identifying a table using a caption

The caption should be a succinct heading for the table content. In this example “Concerts” tells users what information is in the table (as the table could, for example, also contain art exhibition information).

The <caption> element is placed directly as a child of the <table> element.

<table>
  <caption>Concerts</caption>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
  <tr>
    <td>24 Mar</td>
    <td>The Obelisks</td>
    <td>West Wing</td>
  </tr>
  […]
</table>

Summaries for more complex tables

In the examples below, different techniques are used to provide summaries to users.

Nesting summary inside the <caption> element

This complex table shows availability of different types and sizes of accommodation in two different locations. The <caption> element acts as a heading of the table and provides the summary that describes the composition of the table as well.

If implemented this way, the summary is available to visual users as well.

<caption>Availability of holiday accommodation <br>
  <span>Column one has the location and size of accommodation, other columns show the type and number of properties available</span>
</caption>

Using aria-describedby to provide a table summary

In this approach an element with an id attribute is associated as a summary by using the aria-describedby attribute of the table. Any element with a unique id attribute can be used as a summary for a table in this way.

The element containing the summary doesn’t need to be in front of the table in the document, but it helps users to discover the summary more easily if the summary is in close proximity of the table, especially if they are not using a screen reader.

<p id="tblDesc">Column one has the location and size of accommodation, other columns show the type and number of properties available.</p>
<table aria-describedby="tblDesc">
[…]

Using the <figure> element to mark up a table summary

In this approach the table is wrapped in a <figure> element. The <figcaption> element contains the caption and summary text.

Screen reader users navigating in “Tables Mode” are usually unable to identify a table by a caption applied like this. The caption part of the <figcaption> element can be explicitly associated to the table by using the aria-labelledby attribute and the summary part by using the aria-describedby attributes. Note that this could lead to the caption and summary being read out multiple times.

<figure>
  <figcaption>
    <strong>Paris: Availability of holiday accommodation</strong><br>
    <span>Column one has the location and size of accommodation, other columns show the type and number of properties available.</span>
  </figcaption>
  <table>
[…]
  </table>
</figure>

<figure>
  <figcaption>
    <strong id="paris-caption">Paris: Availability of holiday accommodation</strong><br>
    <span id="paris-summary">Column one has the location and size of accommodation, other columns show the type and number of properties available.</span>
  </figcaption>
  <table aria-labelledby="paris-caption" aria-describedby="paris-summary">
[…]
  </table>
</figure>

Using the summary attribute

In this approach, the summary text is in the summary attribute of the table. It is not available to sighted users.

See WCAG 2.0 technique H73: Using the summary attribute of the table element to give an overview of data tables for advice on the summary attribute.

<table
  summary="Column one has the location and size of accommodation, other columns show the type and number of properties available.">