Inappropriate Table Header Cells Check

Description

The “Inappropriate Table Header Cells Check” evaluates whether there is any <th> (header cell) in a table not functionally connected to at least one <td> (data cell).

Example outcome

I found 1 header cell that is not associated with any data cells.

Impact

• Visual Impairments: Screen readers may announce headers with no related data, creating confusion and false expectations.
• Motor Impairments: Misuse of <th> affects focus indicators and keyboard context.
• Cognitive Disabilities: Misleading headers suggest relationships that don’t exist.

Fixes

To address inappropriate table header cells:

1. Locate the inappropriate <th> element.
2. Ensure that it is meaningful, being the header of either a row or a column.
3. Associate it to its supposed data cell (i.e., <td> element), or remove it if it does not apply to any data cell.
4. Make proper use of the headers and scope attributes (i.e., use scope="col" or scope="row" for simple tables and id and headers for complex tables).

Resources

• WCAG 2.2: Understanding Success Criteria 1.3.1
• ACT Rules: Table header cell has assigned cells
• WebAIM: Semantic Structure: Regions, Headings, and Lists
• WebAIM: Creating Accessible Tables