Back to Info and Examples for Accessibility Insights for Web
td-headers-attr
The headers attribute in a <table> element must refer to a cell within the same table.
Why it matters
In a table, a header cell and a data cell are programmatically related if they are coded in a way that assistive technologies can accurately determine their relationship.
When a data cell has a headers attribute that points to a cell in a different table, the programmatic relationship isn’t defined in a way that assistive technologies can recognize.
As a result, assistive technology users can’t tell which header cell goes with a given data cell.
How to fix
For each <td> element, make sure the headers attribute points to a <th> element within the same table.
Note that the headers attribute is typically necessary only in extremely complex tables.
In most cases, using the scope attribute is sufficient and simpler to implement.
For details about accessible table markup, see Tables – WAI Web Accessibility Tutorials.
Example
Fail
headers attributes in the second table reference <th> elements in the first table.
However, because assistive technologies expect a headers attribute to reference a cell within the same table, they might not identify any headers for the second table.<table>
<caption>East Branch Members</caption>
<tr>
<th id="name">Name</th>
<th id="email">E-mail</th>
<th id="phone">Phone</th>
<th id="city">City</th>
</tr>
<tr>
<td headers="name">Alexandra Gunderson</td>
<td headers="email">alexg@company.com</td>
<td headers="phone">1-234-5678</td>
<td headers="city">Charlotte</td>
</tr>
…
</table>
<table>
<caption>West Branch Members</caption>
<tr>
<td headers="name">Mary Gonzales</td>
<td headers="email">mary@company.com</td>
<td headers="phone">1-234-5678</td>
<td headers="city">Portland</td>
</tr>
…
<td headers="name">Li Shen</td>
…
</table>
Pass
<th> cells have been added to the second table.
Assistive technologies can correctly identify column headers for both tables.<table>
<caption>East Branch Members</caption>
<tr>
<th id="name">Name</th>
<th id="email">E-mail</th>
<th id="phone">Phone</th>
<th id="city">City</th>
</tr>
<tr>
<td headers="name">Alexandra Gunderson</td>
<td headers="email">alexg@company.com</td>
<td headers="phone">1-234-5678</td>
<td headers="city">Charlotte</td>
</tr>
…
</table>
<table>
<caption>West Branch Members</caption>
<tr>
<th id="name">Name</th>
<th id="email">E-mail</th>
<th id="phone">Phone</th>
<th id="city">City</th>
</tr>
<tr>
<td headers="name">Mary Gonzales</td>
<td headers="email">mary@company.com</td>
<td headers="phone">1-234-5678</td>
<td headers="city">Portland</td>
</tr>
<td headers="name">Li Shen</td>
...
</table>
About this rule
This rule passes if:
- The
headersattribute refers only to cells within the same table