• June 30, 2025

Accessible Table Header Associations

Rule ID: td-headers-attr
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

To ensure accessible data tables, every <td> (table data cell) that uses the headers attribute must reference valid and meaningful <th> (table header) elements within the same table. This allows screen readers to correctly interpret the relationships between headers and data.

A simpler and more maintainable method is to use the scope attribute on each <th> element. This clearly defines whether the header applies to a row, column, group of rows, or group of columns:

• Use scope="col" for headers at the top of a column.

• Use scope="row" for headers at the start of a row.

• Use scope="colgroup" when a <th> spans multiple columns.

• Use scope="rowgroup" when a <th> spans multiple rows.

Example (Basic Table with scope)

Example (Advanced Table with Grouped Headers)

When using complex tables that cannot rely on the scope attribute alone, use the headers and id attributes to explicitly link <td> elements to their corresponding <th> elements.

Why it Matters

Screen reader users rely heavily on semantic table structure to understand how data relates to headers. While sighted users can quickly understand a table’s layout visually, screen reader users must rely on correct markup to navigate.

When accessibility features like scope, headers, and semantic tags are missing or incorrect:

• Users may hear incorrect or incomplete data context.

• Navigation through table cells becomes confusing or meaningless.

• Large or complex tables become unusable for non-sighted users.

With accessible markup, screen readers announce the correct headers when a user navigates through each cell, ensuring clarity and ease of use.

Rule Description

Accessible tables must use proper semantic markup and header associations. Headers must clearly describe the data they relate to, and data cells must reference those headers correctly. This ensures compatibility with assistive technologies and compliance with accessibility standards.

The Algorithm (in Simple Terms)

1. Check every data table for <th> and <td> usage.

2. Verify that:

   • Each <th> uses the scope attribute or

   • Each <td> that uses the headers attribute references valid <th> elements within the same table.

3. Ensure the header structure forms a complete and understandable relationship between headers and data for screen reader interpretation.