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)
-
Check every data table for
<th>
and<td>
usage. -
Verify that:
-
Each
<th>
uses thescope
attribute or -
Each
<td>
that uses theheaders
attribute references valid<th>
elements within the same table.
-
-
Ensure the header structure forms a complete and understandable relationship between headers and data for screen reader interpretation.