• June 30, 2025

Ensuring Table Data Cells Have Headers

Rule ID: td-has-header
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (Experimental), WCAG 2.0 (Experimental), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

To resolve this issue, make sure that every non-empty <td> element in a large data table (3 rows × 3 columns or larger) is associated with at least one header cell (<th>). This association allows screen reader users to understand the relationship between data cells and their corresponding headers.

There are two main approaches depending on table complexity:

✅ For Simple Tables:

Use the <th> element with the scope attribute to define headers.

✅ For Complex Tables:

Use id attributes on header cells and headers attributes on data cells to explicitly associate them. This is essential when headers span multiple rows/columns or when data cells are related to more than one header.

This links the data cell to the headers with the IDs females2, mary2, and km10_2.

🛠 Tip: If a table is too complex, consider breaking it into simpler tables for easier navigation and accessibility.

Why it Matters

Screen reader users rely on the semantic structure of tables to understand the relationships between headers and data. If headers are not properly associated with each data cell, users may:

• Hear unrelated or incorrect header information

• Struggle to determine the meaning or context of individual data points

• Experience confusion when navigating through large or complex tables

Properly associating table headers with data cells ensures that the content is understandable, navigable, and usable for people using assistive technologies.

Rule Description

This rule ensures that all data cells in a large data table are properly associated with one or more header cells. Screen readers can only interpret and announce table structures accurately when the markup follows semantic conventions using <th>, scope, id, and headers attributes. This is especially important in complex data tables where multiple headers intersect.

The Algorithm (in simple terms)

1. Identify all data tables on the page.

2. For tables 3×3 or larger:

   • Check every <td> that contains content.

   • Confirm that each <td> is programmatically associated with at least one <th> using either:

     • scope="row" or scope="col" (for simple tables), or

     • headers attribute referencing the IDs of related <th> elements (for complex tables).