If a <td> cell has a headers attribute, it should reference only IDs of headers in the same column and row.
Note that it is usually better to use scope attributes of <th> headers instead of headers attribute.
headers attribute requires you to list every corresponding <th> header’s id, which is error-prone and
makes the code less maintainable. See W3C WAI Web Accessibility
Tutorials for more information.
If your table is too complex, it might be better to split it into multiple small tables as it improves both readability and maintainability.
This rule raises an issue when the headers attribute of a <td> cell contains IDs which don’t belong to a header in
the same row or column.
Noncompliant code example
<table border="1">
<caption>
Rental price
</caption>
<thead>
<tr>
<td></td>
<th id="small" scope="col">
Small car
</th>
<th id="big" scope="col">
Big Car
</th>
</tr>
</thead>
<tbody>
<tr>
<th id="paris" class="span" colspan="3" scope="colgroup">
Paris
</th>
</tr>
<tr>
<th headers="paris" id="day1">
1 day
</th>
<td headers="paris day1 big"> <!-- Noncompliant, referencing the column "big" instead of "small" -->
11 euros
</td>
<td headers="berlin day1 big"> <!-- Noncompliant, there is no header with id "berlin" -->
50 euros
</td>
</tr>
</tr>
</tbody>
</table>
Exceptions
No issue will be raised if the headers attribute contains the following characters: {}()[]$. This avoids false positives on variables
coming from Javascript frameworks such as Angular.
