Table Header Cells Check

Description

The “Table Header Cells Check” evaluates whether all <th> (header cell) elements in a table are functionally connected to at least one <td> (data cell).

Example outcome

I noticed that all header cells have associated data cells.

Impact

• Visual Impairments: Unused or disconnected headers confuse navigation and output.
• Motor Impairments: Misuse of <th> affects focus indicators and keyboard context.
• Cognitive Disabilities: Mismatched headers can obscure the meaning of grouped data.

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