Table caption and summary need to differ

• Rule: axe/table-duplicate-name
• Checks: Tables should not have the same summary and caption
• WCAG: none; a best practice, not a WCAG success criterion
• Fix class: content: A fix needs authored text.

Who it affects

• People who use a screen reader or a braille display, most of them blind.

How to fix it

The summary attribute repeats the <caption> text

Remove summary, which is obsolete in HTML, and keep the <caption> as the table’s name. Screen readers that support summary read the same words twice.

<table>
  <caption>Train times</caption>
  <tr>
    <th scope="col">Departs</th>
    <th scope="col">Arrives</th>
  </tr>
  <tr>
    <td>8:05</td>
    <td>9:40</td>
  </tr>
</table>

The table needs more explanation than its caption gives

Put the explanation in a paragraph near the table and point to it with aria-describedby on the <table>. Write it from what the table holds, such as how it is organized or what its abbreviations mean.

<p id="fares-note">Fares are in US dollars. Peak fares apply on weekdays before 9:30.</p>
<table aria-describedby="fares-note">
  <caption>Fares by zone</caption>
  <tr>
    <th scope="col">Zone</th>
    <th scope="col">Peak</th>
    <th scope="col">Off-peak</th>
  </tr>
  <tr>
    <th scope="row">1</th>
    <td>2.90</td>
    <td>2.40</td>
  </tr>
</table>

Fixes that fail

Rewording summary so it differs from the caption

The rule passes, but summary is obsolete, and only screen reader users ever hear it. Put any extra description where everyone can read it.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.