Caption and summary

Overview – Caption and summary

The <caption> element specifies the name or title of a table.

A table summary introduces the purpose of the table, outlines its basic cell structure, highlights any trends or patterns, and generally teaches the user how to use the table.

Identifying a table using a caption

The <caption> element is the first child of the <table> element. It serves as a name or short heading for the table content. Without a caption, screen reader users must navigate the headers across row 1 and/or down column 1, at least, just to figure out what a table is about.

If the caption duplicates the preceding heading, visually-hide the caption with the WET CSS class .wb-inv. The duplication is necessary since screen reader users can navigate from table to table with a key press, missing any preceding heading.

 Good example: Caption

In this example “Movies Releases” tells users what information is in the table.

Movies releases
Date Movie Locations
12 Feb Spiderman - The Dark Fate AMC Toronto
24 Mar Avengers AMC Mississauga
14 Apr Superman 4 Cineplex London
View HTML 
<table>
  <caption>Movies releases</caption>
  <tr>
   <th>Date</th>
   <th>Movie</th>
   <th>Locations</th>
  </tr>
  <tr>
    <td>12 Feb</td>
   <td>Spiderman - The Dark Fate</td>
   <td>AMC Toronto</td>
  </tr>
  <tr>
   <td>24 Mar</td>
   <td>Avengers</td>
   <td>AMC Mississauga</td>
  </tr>
  <tr>
   <td>14 Apr</td>
   <td>Superman 4</td>
   <td>Cineplex London</td>
  </tr>
</table>

Summaries for complex tables

For complex tables, summaries should include explanatory information to introduce the purpose of the table, describe the table composition, highlight any trends and teach the user how to use the table.

Wherever possible, convert complex tables into simple tables or lists, so that less or no explanation is required.

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

There are different ways to present complex table summaries:

  • Nest the summary inside the <caption> element
  • Set the summary in a paragraph preceding or following the table. Reference the paragraph's id attribute value from an aria-describedby attribute on the <table> element.
  • Use the <figure> and <figcaption> elements to mark up a table summary. Set the aria-labelledby and aria-describedby attributes on the <table> element:
    • Use the aria-labelledby attribute to reference the id attribute value of the table's <caption> element.
    • Use the aria-describedby attribute to reference the id attribute value of the <figcaption> holding the summary.

 Good example: Nesting summary inside the caption element

In the example below, the complex table shows the number of students enrolled in two countries across four semester seasons. The <caption> element acts as a heading for the table and provides a summary that describes the structure of the table.

Information on number of students enrolled Column one holds the country and the programs, other columns show the semester season. Cells hold the number of students enrolled.
Winter Spring Summer Fall
USA
MBA 40 80 125 93
MS 60 83 152 132
Diploma 66 103 115 20
Canada
MBA 113 81 122 33
MS 87 53 143 90
Diploma 39 16 32 40
View HTML 
<table>
  <caption>
    Information on number of students enrolled
    <span style="font-weight: normal; display: block">Column one holds the country and the programs, other columns show the semester season. Cells hold the number of students enrolled.</span>
  </caption>
  <thead>
    <tr>
      <td></td>
      <th id="winter">Winter</th>
      <th id="spring">Spring</th>
      <th id="summer">Summer</th>
      <th id="fall">Fall</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="usa" class="span" colspan="5">USA</th>
    </tr>
    <tr>
     <th headers="usa" id="usmba">MBA</th>
     <td headers="usa usmba winter">40</td>
     <td headers="usa usmba spring">80</td>
     <td headers="usa usmba summer">125</td>
     <td headers="usa usmba fall">93</td>
   </tr>
   <tr>
     <th headers="usa" id="usms">MS</th>
     <td headers="usa usms winter">60</td>
     <td headers="usa usms spring">83</td>
     <td headers="usa usms summer">152</td>
     <td headers="usa usms fall">132</td>
   </tr>
   <tr>
     <th headers="usa" id="usdip">Diploma</th>
     <td headers="usa usdip winter">66</td>
     <td headers="usa usdip spring">103</td>
     <td headers="usa usdip summer">115</td>
     <td headers="usa usdip fall">20</td>
   </tr>
   <tr>
     <th id="can" class="span" colspan="5">Canada</th>
   </tr>
   <tr>
     <th id="camba" headers="can">MBA</th>
     <td headers="can camba winter">113</td>
     <td headers="can camba spring">81</td>
     <td headers="can camba summer">122</td>
     <td headers="can camba fall">33</td>
   </tr>
   <tr>
     <th id="cams" headers="can">MS</th>
     <td headers="can cams winter">87</td>
     <td headers="can cams spring">53</td>
     <td headers="can cams summer">143</td>
     <td headers="can cams fall">90</td>
   </tr>
   <tr>
     <th id="cadip" headers="can">Diploma</th>
     <td headers="can cadip winter">39</td>
     <td headers="can cadip spring">16</td>
     <td headers="can cadip summer">32</td>
     <td headers="can cadip fall">40</td>
    </tr>
  </tbody>
 </table>

  Good example: Using aria-describedby to provide table summary

In this example, the summary precedes the table in a paragraph element. The table takes an aria-describedby attribute, which holds the id attribute value of the paragraph.

HTML

<p id="tblDesc">Column one holds the country and the programs, other columns show the semester season. Cells hold the number of students enrolled </p> 
<table aria-describedby="tblDesc">[…]</table>

 Good example: Using the figcaption element to hold the table summary

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

The table title in the <figcaption> element is explicitly associated with the table using the aria-labelledby attribute.

The summary paragraph in the <figcaption> element is explicitly associated with the table using the aria-describedby attribute.

Information on number of students enrolled
Column one has the country and different programs, other columns show the semester type and number of students enrolled.
Winter Spring Summer Fall
USA
MBA 40 80 125 93
MS 60 83 152 132
Diploma 66 103 115 20
View HTML 
<figure>
   <figcaption>
      <strong id="studentinfo-caption-b">USA: Information on number of students enrolled</strong>
      <div id="studentinfo-summary">Column one has the country and different programs, other columns show    the semester type and number of students enrolled.</div>
   </figcaption>
   <table aria-labelledby="studentinfo-caption-b" aria-describedby="studentinfo-summary">
      <thead>
         <tr>
            <td></td>
            <th id="winter-b" scope="col">Winter</th>
            <th id="spring-b" scope="col">Spring</th>
            <th id="summer-b" scope="col">Summer</th>
            <th id="fall=b" scope="col">Fall</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <th id="usa" class="span" colspan="5" scope="colgroup">USA</th>
         </tr>
         <tr>
            <th headers="usa" id="usmba-b">MBA</th>
            <td headers="usa-b usmba-b winter-b">40</td>
            <td headers="usa-b usmba-b spring-b">80</td>
            <td headers="usa-b usmba-b summer-b">125</td>
            <td headers="usa-b usmba-b fall-b">93</td>
         </tr>
         <tr>
            <th headers="usa" id="usms-b">MS</th>
            <td headers="usa-b usms-b winter-b">60</td>
            <td headers="usa-b usms-b spring-b">83</td>
            <td headers="usa-b usms-b summer-b">152</td>
            <td headers="usa-b usms-b fall-b">132</td>
         </tr>
         <tr>
            <th headers="usa" id="usdip-b"> Diploma </th>
            <td headers="usa-b usdip-b winter-b"> 66 </td>
            <td headers="usa-b usdip-b spring-b"> 103 </td>
            <td headers="usa-b usdip-b summer-b"> 115 </td>
            <td headers="usa-b usdip-b fall-b"> 20 </td>
         </tr>
      </tbody>
   </table>
</figure>

Related WCAG resources

Related WCAG resources

Success criteria

Techniques

Back to top