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
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).
<caption> element is placed directly as a child of the
Summaries for more complex tables
In the examples below, different techniques are used to provide summaries to users.
Nesting summary inside the
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.
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.
<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.