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.
header attributes exist, ensure that they reference elements
with text available to screen readers.
thelement must not use the
thelements should only be used when there is a single row and single column of headers
thelements must use the
<th> with set to
scope="row" instead of
<th> elements are scoped to
row when they should be scoped to
col in the
|Last Name||First Name||City|
<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.
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.