Data tables must have header cells

Rule table-headers · Structure & semantics · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

In a data table, screen readers announce the relevant row/column header as the user moves between cells — but only if header cells exist. A table of only is an unlabeled grid. Tables that look presentational (single column, cells holding headings/lists/nested tables, or no table semantics at all) get a lower-confidence warning instead of a fail, a presentational table that still contains / is flagged for its conflicting signals, and headers attributes must resolve to cells of the same table.

How to fix#

Mark header cells with and a scope (col/row). For layout-only tables, add role="presentation".

Example#

<table><caption>Team</caption><tr><td>Name</td><td>Age</td></tr><tr><td>Ada</td><td>36</td></tr></table>

<table><caption>Team</caption><tr><th scope="col">Name</th><th scope="col">Age</th></tr><tr><td>Ada</td><td>36</td></tr></table>

Example#

<table><tr><td>Name</td><td>Age</td></tr><tr><td>Ada</td><td><table><tr><th>k</th><td>v</td></tr><tr><td>x</td><td>y</td></tr></table></td></tr></table>

<table><tr><td><table><tr><th scope="col">Name</th></tr><tr><td>Ada</td></tr></table></td></tr></table>

Header cells are counted per table — a nested table cannot satisfy (or fail) its parent.

Example#

<table><tr><td><h3>Spring sale</h3></td><td><ul><li>Shoes</li><li>Hats</li></ul></td></tr><tr><td>Up to 50% off</td><td>This week only</td></tr></table>

<table role="presentation"><tr><td><h3>Spring sale</h3></td><td><ul><li>Shoes</li><li>Hats</li></ul></td></tr></table>

Cells holding headings/lists are a layout-table signal — reported as a warning; role="presentation" resolves it.

Example#

<table role="presentation"><tr><th>Name</th></tr><tr><td>Ada</td></tr></table>

<table role="presentation"><tr><td>Name</td></tr><tr><td>Ada</td></tr></table>

A presentational table must not carry data-table markup (/).

Example#

<div id="city">City</div><table><tr><td headers="city">Lisbon</td></tr><tr><td headers="city">Oslo</td></tr></table>

<table><tr><th id="city" scope="col">City</th></tr><tr><td headers="city">Lisbon</td></tr></table>

headers must reference cells of the same table; whether the id exists at all is aria-idref-integrity’s job.

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester

References#

• W3C — Tables Tutorial