th-has-data-cells

Description

The th-has-data-cells rule ensures that every <th> (table header) element has corresponding <td> (data cell) elements in the same row or column. When a header cell has no associated data cells, it is orphaned: it declares a category or label for content that does not exist in the table. This creates confusion for screen reader users, who will hear a header announced but never encounter the data it is supposed to describe.

This rule meets WCAG requirements by:

1. Info and Relationships (WCAG 1.3.1 Info and Relationships): Information, structure, and relationships conveyed through presentation must be programmatically determinable. Every <th> establishes a structural relationship with the cells it governs; if no data cells exist under a header, that declared relationship is broken and the table structure is misleading.

To comply with this rule, ensure that every <th> element has at least one corresponding <td> in its row (for row headers) or column (for column headers), and add scope="col" or scope="row" to make the association explicit.

Examples

This example shows a header row with three column headers (Name, Age, and Location), but the data row only has two cells. The “Location” header has no corresponding data cell, creating an orphaned header.

Here, each header cell has a matching data cell in every data row. The number of <td> cells in each row matches the number of <th> cells in the header row.

How to fix?

To fix violations of the th-has-data-cells rule, follow these steps:

• Review the table structure and identify any <th> elements that do not have a corresponding <td> in their row or column. Ensure the number of data cells in each row matches the number of column headers, and that each row header has at least one data cell in the same row.

• If a column was declared but no data exists for it yet, either add placeholder <td> cells or remove the <th> for that column until data is available.

• Add scope="col" to column header <th> elements and scope="row" to row header <th> elements. This explicitly defines the relationship between headers and their data cells, making the association clear to assistive technologies.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships