incorrect-header-data-association

Description

Data cells (<td>) in tables must be correctly associated with their corresponding header cells (<th>) to ensure proper navigation for screen reader users. Incorrect associations can make tables difficult to understand for users relying on assistive technologies.

The incorrect-header-data-association rule aligns with WCAG Success Criterion 1.3.1 (Info and Relationships), which requires that information, structure, and relationships conveyed through presentation must be programmatically determinable.

Examples

In the following example, a data cell lacks a proper association with its header, making it unclear for screen reader users.

In the corrected example, the scope attribute is used to associate headers with their corresponding data cells:

How to fix?

To fix violations of the incorrect-header-data-association rule, follow these steps:

1. Ensure every <th> has a proper scope attribute (col, row, colgroup, or rowgroup).
2. For complex tables, use headers and id attributes to explicitly link data cells to their headers.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships
• Technique H43
• Technique H63