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 fairly straightforward ways to provide such information that is often needed.

  • A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help 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 unusual structure (as in the examples below), information about what content can be found in which row or column can be provided to the user. A summary is usually only 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 short 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.

Example:
Concerts
Date Event Venue
12 Feb Waltz with Strauss Main Hall
24 Mar The Obelisks West Wing
14 Apr The What Main Hall
Code snippet:
<table>
  <caption>Concerts</caption>
  <tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</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 separate 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.

Example:
Availability of holiday accommodation
Column one has the location and size of accommodation, other columns show the type and number of properties available
Studio Apt Chalet Villa
Paris
1 bedroom 11 20 25 23
2 bedroom - 43 52 32
3 bedroom - 13 15 40
Rome
1 bedroom 13 21 22 3
2 bedroom - 23 43 30
3 bedroom - 16 32 40
Code snippet:
<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>

Note: A span element was added to style the summary differently from the caption. This is not required.

Using aria-describedby to provide a table summary

In this approach, an element with an id attribute is associated with 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 quickly if the summary is near the table, especially if they are not using a screen reader.

Note: This WAI-ARIA feature may not be as widely supported by assistive technology than other approaches for summaries on this page.

Example:

Column one has the location and size of accommodation, other columns show the type and number of properties available.

Paris: Availability of holiday accommodation
Studio Apt Chalet Villa
1 bedroom 11 20 25 23
2 bedroom - 43 52 32
3 bedroom - 13 15 40
Code snippet:
<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.

Note: This HTML5 feature may not be as widely supported by assistive technology than other approaches for summaries on this page.

Example:
Paris: Availability of holiday accommodation
Column one has the location and size of accommodation, other columns show the type and number of properties available.
Studio Apt Chalet Villa
1 bedroom 11 20 25 23
2 bedroom - 43 52 32
3 bedroom - 13 15 40
Code snippet: Not using WAI-ARIA
<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>
Code snippet: Using WAI-ARIA
<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

Note: The summary attribute is deprecated in HTML5.

In this approach, the summary text is in the summary attribute of the table. Such summaries are not displayed visually. They are commonly only available to screen reader 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.

Example:
Paris: Availability of holiday accommodation
Studio Apt Chalet Villa
1 bedroom 11 20 25 23
2 bedroom - 43 52 32
3 bedroom - 13 15 40
Code snippet:
<table
  summary="Column one has the location and size of accommodation, other columns show the type and number of properties available.">

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels:

Techniques: