Accessibility rule: Table header cell is missing a header role, explained

A table header acts as a title for the type of information a user will find in each row or column of a table. For a screen reader user it is important to know what header cell each data cell on the table relates to. For the information to be conveyed to screen reader users correctly, a table header cell should always have the role of columnheader or rowheader as these roles will define the relationship of the information to other cells in the table.

Who is impacted by this barrier?

The issue relates to the use of screen readers in particular. When a screen reader user navigates a table, each data cell should be announced along with the relevant column or row header.

How does the check work?

The rule checks that all table headers, i.e. table headers elements, <th>, are correctly marked up as headers for one or more columns or rows of a table. Normally, <th> elements automatically have a role of rowheader or columnheader. Therefore, when this rule fails, the table has structural issues preventing the table header element from receiving the right role.

Common failures include for instance ill-placed <td> elements that should be removed. Sometimes for complex tables, <th> elements may need a scope to be defined. This helps the HTML heuristics understand the table header role.

You can read more about this rule in the technical documentation here.