Table Captions

Each table on a page must have a descriptive name that identifies the information it contains. If multiple tables appear on the same page, each name must be unique so assistive technology users can distinguish between them.

Names should be brief but specific about the table’s content (e.g., “Fall 2026 grades,” not “table”). Do not use the deprecated HTML summary attribute for table descriptions.

Technique #1: caption

The simplest technique is to use the caption element. As this is the only pure HTML solution, this is the preferred technique whenever possible.

<table>
  <caption>Quarterly Sales Data</caption>
  <thead>
    [...]
  </thead>
  <tbody>
    [...]
  </tbody>
</table>

If necessary, you can hide this element using off-screen text.

<table>
  <caption class="sr-only">Quarterly Sales Data</caption>
  <thead>
    [...]
  </thead>
  <tbody>
    [...]
  </tbody>
</table>

Technique #2: aria-label

An aria-label can be used in place of the caption. This has the advantage of being hidden by default, but still readable by screen readers and other assistive technology.

<table aria-label="Quarterly Sales Data">
  <thead>
    [...]
  </thead>
  <tbody>
    [...]
  </tbody>
</table>

Technique #3: aria-labelledby

If the caption for the table already exists on the page, you can use aria-labelledby to point to the content. This is a great technique when you would simply be duplicating what is already visually present on the page. For example, if there is a heading over the table that describes it, then simply point at that heading.

<h3 id="tableh3">Quarterly Sales Data</h3>
<table aria-labelledby="tableh3">
  <thead>
    [...]
  </thead>
  <tbody>
    [...]
  </tbody>
</table>