# tables should not have the same summary and caption

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/table-duplicate-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Screen readers announce both the `<caption>` and `summary` when a user encounters a data table. The `<caption>` element serves as the table's visible, on-screen title — it tells all users what the table is about. The `summary` attribute (available in HTML4 and XHTML, though deprecated in HTML5) is read only by screen readers and is intended to describe the table's structure, such as how rows and columns are organized. When these two contain the same text, the screen reader simply reads the same content twice, which provides no additional value and creates a confusing, redundant experience.

This issue primarily affects **blind** and **deafblind** users who rely on screen readers to navigate and interpret tabular data. Screen readers have specialized table navigation features, but they depend on accurate, meaningful markup to function properly. When the caption and summary are duplicated, users lose the opportunity to get both a concise title and a helpful structural description of the table.

This rule is identified as a **Deque best practice** and is also referenced in the **RGAA** (French government accessibility standard). While it doesn't map directly to a specific WCAG success criterion, it supports the principles behind [WCAG 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) (Level A), which requires that information and structure conveyed visually are also available programmatically.

## How to Fix It

The fix is straightforward: make sure the `<caption>` and `summary` attribute contain **different** text that each serves its intended purpose.

- Use the **`<caption>` element** to give the table a concise, visible title that describes what data the table contains.
- Use the **`summary` attribute** to describe the table's structure — for example, how many column groups there are, what the row and column headers represent, or how the data is organized.

If you find you can't think of distinct content for both, consider whether you actually need the `summary` attribute at all. For simple tables, a `<caption>` alone is often sufficient. Note that `summary` is deprecated in HTML5, so for modern documents you may want to provide structural descriptions using other techniques, such as a paragraph linked with `aria-describedby`.

## Examples

### Incorrect: Identical Caption and Summary

The `summary` and `<caption>` contain the same text, causing screen readers to repeat the information.

```html
<table summary="Quarterly sales figures">
  <caption>Quarterly sales figures</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>$62,000</td>
  </tr>
</table>
```

### Correct: Caption and Summary Provide Different Information

The `<caption>` names the table, while the `summary` describes its structure.

```html
<table summary="Column 1 lists each quarter, column 2 shows total revenue for that quarter.">
  <caption>Quarterly sales figures</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>$62,000</td>
  </tr>
</table>
```

### Correct: Using Only a Caption (HTML5 Approach)

For simple tables in HTML5, you can skip the deprecated `summary` attribute entirely and rely on a `<caption>` alone.

```html
<table>
  <caption>Quarterly sales figures</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>$62,000</td>
  </tr>
</table>
```

### Correct: HTML5 Alternative Using `aria-describedby`

If you need to provide a structural description in HTML5, use `aria-describedby` to link to a nearby paragraph instead of using `summary`.

```html
<p id="table-desc">Column 1 lists each quarter, column 2 shows total revenue for that quarter.</p>
<table aria-describedby="table-desc">
  <caption>Quarterly sales figures</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>$62,000</td>
  </tr>
</table>
```