Caption Element

title: "The Caption Element — Naming Data Tables for Screen Readers" description: "Learn how to use the HTML caption element to provide a descriptive name for data tables that screen readers announce before table navigation." weight: 5 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, tables]

The caption element provides a descriptive title for a data table, announced by screen readers when users enter the table navigation mode.

## What You'll Learn

How to use the caption element, aria-describedby as an alternative, and best practices for table naming.

## Why It Matters

Without a caption, screen reader users encounter a table without knowing its purpose. They must explore the content to understand what the table represents.

## Real-World Use

A screen reader user encounters a pricing table. The caption says "Premium plan pricing as of June 2026." The user immediately knows the context and can decide whether to explore the table.

## Caption Usage

```html
<table>
  <caption>Q2 2026 sales by region and product category</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Software</th>
      <th scope="col">Hardware</th>
      <th scope="col">Services</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North America</th>
      <td>$1.2M</td>
      <td>$0.8M</td>
      <td>$0.5M</td>
    </tr>
  </tbody>
</table>

Caption Placement

<!-- Caption as first child of table (recommended) -->
<table>
  <caption>Employee directory</caption>
  ...
</table>

<!-- Using aria-describedby as alternative -->
<p id="table-desc">Employee directory sorted by department</p>
<table aria-describedby="table-desc">
  ...
</table>

Common Mistakes

1. No caption on data tables

Every data table needs a caption or aria-describedby description.

2. Caption not the first child

The caption should be the first element inside the table element.

3. Caption text too long

Keep captions concise. Use aria-describedby for longer descriptions.

4. Using summary attribute

The summary attribute on table is deprecated. Use caption instead.

5. Caption on layout tables

Layout tables should not have captions. Use role="presentation" on layout tables.

Practice Questions

1. What HTML element provides a title for a data table? The caption element provides a descriptive title for the table.

2. Where should caption appear in the table element? As the first child element inside the table.

3. What is the alternative to caption for longer descriptions? aria-describedby on the table element, referencing a paragraph or description element.

Challenge: Create a table with a caption. Add a longer description using aria-describedby. Test with a screen reader to verify both are announced.

FAQ

Mini Project

Add captions to three different data tables: a pricing table, a schedule table, and a comparison table. Write concise but descriptive captions for each.

What's Next

Learn about Complex Tables with multi-level headers and how to make them accessible.