Cells in a <table> element that use the [headers] attribute refer to table cells within the same table

Table data cells correctly reference their header cells.

Impact

About

Screen readers have features to make navigating tables easier. Ensuring <td> cells using the [headers] attribute only refer to other cells in the same table may improve the experience for screen reader users.

Risks

Screen readers announce structured content incorrectly.

Why it's important

Helps screen readers announce structured content (tables, lists) in a logical order that users can understand.

User stories

As a screen reader user, I want tables and lists to be properly structured so that I can understand the relationships between items.

Code

Failing pattern:

<!-- Fail: headers attribute references a non-existent id -->
<td headers="missing-id">Value</td>

Passing pattern:

<!-- Pass: headers references valid th ids -->
<table>
  <tr>
    <th id="col-name">Name</th>
    <th id="col-dept">Department</th>
  </tr>
  <tr>
    <td headers="col-name">Jane Smith</td>
    <td headers="col-dept">Finance</td>
  </tr>
</table>

Error

ScanGov messaging when a site fails a standard:

Failed: Cells in a <table> element that use the [headers] attribute refer to table cells within the same table

Guidance

Web Content Accessibility Guidelines (WCAG)

Indicators

Accessibility