Ensure that the headers inside a table are programmatically associated with the data.
Why this matters
When table headers are not properly encoded in
<th> elements, assistive technology (AT) can use the header elements to identify content. For example, a screen reader may read the header’s name followed by the data in the table cell. When this information is missing or incorrectly encoded, the table will be read as a series of coordinates and data, which is difficult to make sense of.
How to implement
Table headers are required on data tables. They must have either a value or an abbr attribute according to the
<th> spec. Don’t build tables without them.
See <th> on MDN.
How to test
- Inspect the page.
- Ensure the table headers are encoded in
Screen reader testing
- Listen to the table on the page.
- Ensure the screen reader is correctly attributing the table header to the proper cells.