• June 30, 2025

Proper Use of <th> Elements in Data Tables

Rule ID: th-has-data-cells
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

Each <th> (table header) element in a data table must explicitly associate with corresponding data cells. This ensures that screen readers and other assistive technologies can accurately convey the structure and meaning of the data.

To fix this issue:

• Use the scope attribute appropriately:

  • For column headers, set scope="col".

  • For row headers, set scope="row".

• Do not use the headers attribute on <th> elements. It is complex and error-prone unless required for more complex tables with multiple levels of headers.

• Only use <th> when there is a clear semantic header role for the element — that is, it describes the data below (columns) or next to it (rows).

Example of a bad implementation:

Here, all headers are incorrectly marked as row headers when they actually head columns.

Corrected example:

This change properly informs assistive technologies that these headers label columns, not rows.

Additional Best Practices:

• Use <th> only where headers are appropriate and necessary.

• Keep table structures simple wherever possible. For complex tables, consider using id and headers attributes to define relationships — but only if the table requires them.

Why it Matters

When a data table is not marked up semantically or the headers are not properly associated with data cells, screen readers can’t accurately describe the content. This results in a poor or unusable experience for blind users or others relying on assistive tech.

For example:

• Screen readers may read column headers as row headers, miscommunicating the meaning of data.

• Users may struggle to understand which data points belong together, particularly in larger tables.

Proper header-to-data associations allow screen reader users to efficiently navigate and interpret tabular data in a meaningful and accessible way.

Rule Description

This rule ensures that all <th> elements in data tables serve their intended function — to describe the data in their corresponding columns or rows. Without correct markup, assistive technologies cannot build a coherent picture of the data relationships within the table.

This is a critical component of web accessibility because it directly affects the comprehensibility of structured information.

The Algorithm (in simple terms)

The rule checks that:

• All <th> elements in a table either have a scope attribute set to "row" or "col", and

• Each header is used to label a corresponding data cell.

If any <th> elements are not actually labeling data (i.e., not associated correctly), they fail the rule.