Rampsight

All rules

Tables

Data cells need headers

Why it matters

In a table bigger than three by three, a cell read on its own is a number with no meaning. Headers are what let a screen reader announce "Revenue, Berlin, 1.2M" when the person lands on the cell.

How to fix it

  1. Give the table a header row or column using <th>.
  2. Add scope="col" or scope="row" so the direction is unambiguous.
  3. For irregular tables, connect cells explicitly with headers and id.

In markup

Fails
<table>
  <tr><td>Berlin</td><td>1.2M</td></tr>
</table>
Passes
<table>
  <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  <tr><td>Berlin</td><td>1.2M</td></tr>
</table>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on td-has-header (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.