Table headers in a data table must refer to data cells
How to Fix the Problem
Ensure that each table header in a data table refers to data cells so that each header cell that is used is actually a header of something.
In other words, the th element must have associated data cells.
If header attributes exist, ensure that they reference elements
with text available to screen readers.
-
The
thelement must not use theheadersattribute -
thelements should only be used when there is a single row and single column of headers thelements must use thescopeattribute
Bad Example: <th> with set to
scope="row" instead of
scope="col"
Notice the <th> elements are scoped to
row when they should be scoped to col in the
following table:
| Last Name | First Name | City |
|---|---|---|
| Phoenix | Imari | Henry |
| Zeki | Rome | Min |
| Apirka | Kelly | Brynn |
<table>
<caption>Teddy bear collectors:</caption>
<tr>
<th scope="row">Last Name</th>
<th scope="row">First Name</th>
<th scope="row">City</th>
</tr>
<tr>
<td>Phoenix</td>
<td>Imari</td>
<td>Henry</td>
</tr>
<tr>
<td>Zeki</td>
<td>Rome</td>
<td>Min</td>
</tr>
<tr>
<td>Apirka</td>
<td>Kelly</td>
<td>Brynn</td>
</tr>
</table>
Following is the corrected code for associating column headers with table content in the previous example:
...
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope="col">City</th>
...
Why it Matters
Screen readers have a specific way of announcing tables. When tables are not properly marked up, this creates the opportunity for confusing or inaccurate screen reader output.
When tables are not marked up semantically and do not have the correct header structure, screen reader users cannot correctly perceive the relationships between the cells and their contents visually.
Rule Description
Data table markup can be tedious and confusing. Markup tables semantically and with the correct header structure. Screen readers have features to ease table navigation, but tables must be marked up accurately for these features to work correctly.
The Algorithm (in simple terms)
Checks data tables markup, ensuring each header cell is referenced as a header of a column or row.
