Caption & Summary

in Tables Tutorial

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, 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 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
Paris
	Studio	Apt	Chalet	Villa
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>

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.

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

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.

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

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

Identifying a table using a caption

Summaries for more complex tables

Nesting summary inside the <caption> element

Using aria-describedby to provide a table summary

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

Using the summary attribute

Nesting summary inside the `<caption>` element

Using `aria-describedby` to provide a table summary

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

Using the `summary` attribute