Tables need a real caption

• Rule: axe/table-fake-caption
• Checks: Data or header cells must not be used to give caption to a data table.
• WCAG: 1.3.1
• Fix class: mechanical: A fix needs no authored text or visual decision.

Who it affects

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

How to fix it

The first row is one cell spanning every column, holding the table’s title

Remove that row and put its text in a <caption>, the first child of <table>. The caption names the table, and screen readers announce it when people reach the table.

<table>
  <caption>Payments due in March</caption>
  <tr>
    <th scope="col">Payee</th>
    <th scope="col">Date</th>
    <th scope="col">Amount</th>
  </tr>
  <tr>
    <td>City Water</td>
    <td>March 4</td>
    <td>$48.00</td>
  </tr>
</table>

Several spanning rows hold a title and its details, such as a reference number

Move all of them into one <caption>. A caption can hold several lines, styled with <span> or <div> elements inside it.

Fixes that fail

Changing the spanning <td> to a <th>

axe still reports it, and screen readers may then read the title as a column header for every column.

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.