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

Summary

This rule ensures that table header cells are properly identified so assistive technologies can interpret their relationships to data cells. When header roles are missing or not correctly applied, users may not understand how table information is structured or connected.

Overview

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.

Why This Matters (Impact)

Who is impacted by this?

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 the Check Works

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.

Additional Guidance

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.

Additional Information

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