Are table headers clear and coded as <th> elements?

Goal

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.

See Why does it matter if our HTML is semantic?

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

Manual testing

  1. Inspect the page.
  2. Ensure the table headers are encoded in <th> elements.

Screen reader testing

  1. Listen to the table on the page.
  2. Ensure the screen reader is correctly attributing the table header to the proper cells.