All <th> elements and elements with role="columnheader" or role="rowheader" must have data cells they describe
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.
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.
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 no data
In the following table, you will notice the
<th> with the value ’10 km’ is acting as a header for a column, but that column’s cells have no data
|Name||1 mile||5 km||10 km|
The Algorithm (in simple terms)
Checks data tables markup, ensuring each header cell is referenced as a header of a column or row.