Summary

Add captions to tables to explain their purpose.

Techniques

Examples

Example 1 — Table caption in a caption element

In this example, the caption is provided in the table element's native caption element.

<table>
   <caption>Table 4 — Weights and Measures</caption>
   …
</table>
Example 2 — Table caption in a figcaption element

In this example, the table element is wrapped inside a figure and figcaption element provides the caption.

<figure>
   <figcaption>Table 4 — Weights and Measures</figcaption>
   <table>
      …
   </table>
</figure>
Example 3 — Table caption in an aria-label attribute

In this example, a caption cannot be provided visually, so is added using the aria-label attribute.

<table aria-label="Weights and Measures">
   …
</table>

Explanation

Although the purpose of some tables is fully established from the text of a publication and do not require additional context, this is not often the case. Tables are typically self-contained and may only be referenced in passing from the text. Adding a caption ensures that users are aware of the table's purpose.

Captions are like headings — they should be short and identify the specific purpose of the table.

There are two primary ways to add captions:

The caption element is an optional first element of a table (see Example 1). When a heading for the table is provide in the caption it is visually rendered above the table in italics by default, but this styling can be changed.

A figure element can also be used to associate a table with its caption. In this case, the figcaption element provides the caption (see Example 2. Unlike the table caption element, a figcaption can be either the first or last element in a figure.

Although it is possible to use the aria-label attribute to add a caption for a table (see Example 3), this method is only advisable when there is absolutely no option to provide a visible label. The use of the aria-label attribute limits the caption to users of assistive technologies, and not all assistive technologies will announce a caption marked up this way.

Related Links