Skip to content
Vispero CORADocs

Table headers need data cells

  • Rule: axe/th-has-data-cells
  • Checks: Table headers in a data table must refer to data cells
  • WCAG: 1.3.1
  • Fix class: mechanical: A fix needs no authored text or visual decision.

Who it affects

Section titled “Who it affects”
  • People who use a screen reader or a braille display, most of them blind.

How to fix it

Section titled “How to fix it”

The table has headers but no data rows, such as an empty list of results

Section titled “The table has headers but no data rows, such as an empty list of results”

Show a message instead of an empty table, or add a row whose single cell spans the columns and says there is no data. axe reports this rule as needing review rather than as a failure.

<table>
  <caption>Your orders</caption>
  <tr>
    <th scope="col">Order</th>
    <th scope="col">Date</th>
  </tr>
  <tr>
    <td colspan="2">You have no orders yet.</td>
  </tr>
</table>

A header cell has no data after it, such as a header row at the bottom of the table

Section titled “A header cell has no data after it, such as a header row at the bottom of the table”

Move column headers above their data and row headers to the start of their rows. If the cell does not name a row or column, make it a <td>.

Fixes that fail

Section titled “Fixes that fail”

Adding a row of empty data cells

Section titled “Adding a row of empty data cells”

axe then finds data cells and passes, but screen reader users reach a table that holds nothing and is not explained.

More on the rule

Section titled “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.