Caption & Summary

in Tables Tutorial

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.

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.

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.

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.

Back to Top