Rule ID: ace-table-th-data-cells

Confirm that table header cells are associated with data cells they describe

WCAG 2.0 (A) - WCAG 2.2 (A) 1.3.1: Info and Relationships Blind Deafblind User Impact

What This Rule Checks

Table headers (denoted by the <th> element) play a crucial role in helping users, particularly those using assistive technologies, understand the structure and content of data tables. Each <th> element should be associated with data cells (denoted by <td> elements) to provide context and make the table more accessible. This means that every <th> must actually serve as a header for data below or beside it.

If the <th> element is not properly associated with data cells, screen readers and other assistive technologies may not be able to properly convey the meaning of the data to users, causing confusion.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content.

Why This Matters

Header cells that don’t describe any data cells create confusion for screen reader users navigating the table. The orphaned header may be announced without any associated content, disrupting the navigation pattern.

How to Fix

Each table header (<th>) in a data table must refer to data cells, meaning the header cell must be associated with actual data.
Do not use the headers attribute in this context, as it is not necessary for single row/column headers.
Ensure that the scope attribute is used appropriately to define whether the header refers to a column (scope=”col”) or a row (scope=”row”).

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Header with no associated data cells -->
<table>
  <tr>
    <th>Name</th>
    <th>Unused Header</th>
  </tr>

  <tr>
    <td>Alice</td>
  </tr>
</table>

Copy

Correct Markup Solutions:

Code example

<!-- All headers have associated data cells -->
<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>

  <tr>
    <td>Alice</td>
    <td>Engineer</td>
  </tr>
</table>

Copy

Common Mistakes to Avoid

Having <th> elements in columns or rows with no corresponding <td> elements.
Merging cells in ways that orphan header cells.
Using empty <th> elements as spacers in table layout.

Tip: Data tables must use proper markup so screen readers can associate data cells with their headers. Without this association, table data becomes an incomprehensible list of values without context.

Related WCAG Criteria

1.3.1: Info and Relationships