td-headers-attr

A data table has to convey clear relationships between header cells and the data they label. When a <td> uses the headers attribute, the value must reference the id of a header cell (<th>) that lives in the very same table. Otherwise, screen-reader users hear the wrong header, or none at all, and cannot work out how the data is organised. Using the attribute correctly (or, whenever possible, adding a scope attribute to each <th>) keeps table navigation predictable for everyone.

Pass Patterns

Data cells reference header cells within the same table

Each headers value matches an id that appears in a <th> inside the same table row or column, so assistive technology can announce the right pairing.

<table>
    <tr>
        <th id="name" scope="col">Name</th>
        <th id="score" scope="col">Score</th>
    </tr>
    <tr>
        <td headers="name">Alex</td>
        <td headers="score">95</td>
    </tr>
</table>

Fail Patterns

Data cell points to a header that is not in the same table

The first <td> points to external-header, an id that sits in a different table. A screen reader will not find the target header and will announce the cell with no context or fall back to the text of the <th> in the scope.

<!-- First (hidden) table that defines a header used elsewhere -->
<table hidden>
    <tr><th id="external-header">Sold out</th></tr>
</table>


<!-- Visible table with broken reference -->
<table>
    <tr>
        <th id="product" scope="col">Product</th>
        <th id="price" scope="col">Price</th>
    </tr>
    <tr>
        <td headers="external-header">Widget A</td> <!-- ❌ Wrong table -->
        <td headers="price">10.00</td>
    </tr>
</table>

WCAG techniques

Sufficient techniques

• H43: Using id and headers attributes to associate data cells with header cells in data tables

Failure techniques

• F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes

Try It Yourself

Using a screen reader

1. Load the page and open a screen reader, then move focus into the data table.
2. Navigate cell by cell with the table-navigation commands of your screen reader.
3. Listen for the announced header before each data value.

Expected result: The header that is announced matches the visible column or row header.

Actual result: The header is missing or mismatched, so the data makes little sense, or it falls back to the table header of the column or row if it exists.

FAQ

Standards and Regulations

Personas impacted by this issue

• Screen Reader
• Braille

Learn More

• W3C’s Tables Tutorial

Related Issues

• table-duplicate-name
• empty-table-header
• th-has-data-cells
• scope-attr-valid