All <th> elements and elements with role="columnheader" or role="rowheader" must have data cells they describe

Rule ID: th-has-data-cells

User Impact: Serious

WCAG: 1.3.1

Compliance Data & Impact

User Impact

Disabilities Affected

Blind
Deafblind

Requirement(s)

Section 508: MUST

WCAG Success Criteria

1.3.1 Info and Relationships

Section 508 Guidelines

1194.22 (g) Row and column headers for data tables

Rule Description

Data table markup can be tedious and confusing. Markup tables semantically and with the correct header structure. Screen readers have features to ease table navigation, but tables must be marked up accurately for these features to work correctly.

Why it Matters

Screen readers have a specific way of announcing tables. When tables are not properly marked up, this creates the opportunity for confusing or inaccurate screen reader output.

When tables are not marked up semantically and do not have the correct header structure, screen reader users cannot correctly perceive the relationships between the cells and their contents visually.

How to Fix the Problem

Ensure that each table header in a data table refers to data cells so that each header cell that is used is actually a header of something.

In other words, the th element must have associated data cells.

If header attributes exist, ensure that they reference elements with text available to screen readers.

The th element must not use the headers attribute
th elements should only be used when there is a single row and single column of headers
th elements must use the scope attribute

Bad Example: `<th>` with no data

In the following table, you will notice the <th> with the value ’10 km’ is acting as a header for a column, but that column’s cells have no data

Greensprings Running Club Personal Bests
Name	1 mile	5 km
Mary	8:32	28:04
Betsy	7:43	26:47
Matt	7:55	27:29
Todd	7:01	24:21

The Algorithm (in simple terms)

Checks data tables markup, ensuring each header cell is referenced as a header of a column or row.