Data cells in tables larger than 3x3 should have associated headers.

Data cells in a table that is larger than 3×3 need explicit header associations so that screen reader users can understand what each cell means. When a sighted user scans a table, the row and column headers are visually apparent. Screen readers, however, read cells one at a time and must rely on programmatic relationships between data cells and their headers to announce context like "Revenue, Q3, $4.2M." Without these associations, a screen reader may announce a bare value such as "$4.2M" with no indication of what it refers to.

This rule applies to tables with more than three columns or more than three rows. In very small tables (3×3 or smaller), the surrounding context is usually enough for screen readers to convey meaning. As tables grow, the distance between a header and a data cell increases, and the need for explicit associations becomes more pressing.

Why this matters

This rule maps to WCAG 2 success criterion 1.3.1 Info and Relationships (Level A). That criterion requires that information, structure, and relationships conveyed through visual presentation are also available programmatically. When table headers are not associated with their data cells, structure that is obvious on screen is invisible to assistive technology.

The primary users affected are people who use screen readers, including users who are blind or have low vision. Without header associations, these users must memorize column and row positions to make sense of data, which is error prone and often impractical for larger tables.

How to fix it

There are two main techniques.

Use th elements with the scope attribute

For straightforward tables where headers appear in the first row, the first column, or both, wrap each header in a <th> element and add a scope attribute. Set scope="col" for column headers and scope="row" for row headers. This tells the screen reader which data cells each header applies to.

Use the headers attribute on td elements

For tables with irregular structures, such as merged cells or headers that span multiple levels, the scope attribute may not be enough. In these cases, give each <th> a unique id and then reference those IDs in the headers attribute of each <td>. Separate multiple IDs with spaces.

Examples

Incorrect: table with no header associations

In this table, screen readers have no way to associate data cells with their column or row labels.

<table>
  <tr>
    <td></td>
    <td>Q1</td>
    <td>Q2</td>
    <td>Q3</td>
    <td>Q4</td>
  </tr>
  <tr>
    <td>Revenue</td>
    <td>$1.1M</td>
    <td>$1.3M</td>
    <td>$4.2M</td>
    <td>$3.8M</td>
  </tr>
  <tr>
    <td>Expenses</td>
    <td>$0.9M</td>
    <td>$1.0M</td>
    <td>$2.1M</td>
    <td>$1.7M</td>
  </tr>
  <tr>
    <td>Profit</td>
    <td>$0.2M</td>
    <td>$0.3M</td>
    <td>$2.1M</td>
    <td>$2.1M</td>
  </tr>
</table>

Correct: using th and scope

Each header cell is a <th> with the appropriate scope value. Screen readers can now announce "Revenue, Q3, $4.2M."

<table>
  <tr>
    <td></td>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
    <th scope="col">Q3</th>
    <th scope="col">Q4</th>
  </tr>
  <tr>
    <th scope="row">Revenue</th>
    <td>$1.1M</td>
    <td>$1.3M</td>
    <td>$4.2M</td>
    <td>$3.8M</td>
  </tr>
  <tr>
    <th scope="row">Expenses</th>
    <td>$0.9M</td>
    <td>$1.0M</td>
    <td>$2.1M</td>
    <td>$1.7M</td>
  </tr>
  <tr>
    <th scope="row">Profit</th>
    <td>$0.2M</td>
    <td>$0.3M</td>
    <td>$2.1M</td>
    <td>$2.1M</td>
  </tr>
</table>

Correct: using the headers attribute for a complex table

When a table has multi-level headers or spans, the headers attribute gives full control over which headers apply to each cell.

<table>
  <tr>
    <td></td>
    <th id="h1" scope="col">Q1</th>
    <th id="h2" scope="col">Q2</th>
    <th id="h3" scope="col">Q3</th>
    <th id="h4" scope="col">Q4</th>
  </tr>
  <tr>
    <th id="revenue" scope="row">Revenue</th>
    <td headers="revenue h1">$1.1M</td>
    <td headers="revenue h2">$1.3M</td>
    <td headers="revenue h3">$4.2M</td>
    <td headers="revenue h4">$3.8M</td>
  </tr>
  <tr>
    <th id="expenses" scope="row">Expenses</th>
    <td headers="expenses h1">$0.9M</td>
    <td headers="expenses h2">$1.0M</td>
    <td headers="expenses h3">$2.1M</td>
    <td headers="expenses h4">$1.7M</td>
  </tr>
</table>

The scope approach is simpler and should be the default choice. Reserve the headers attribute for tables where scope cannot express the relationships accurately, such as tables with cells that span multiple rows or columns, or tables with two or more levels of headers.

Learn more:

W3C Reference

Understanding Info and Relationships

→

W3C Reference

Using the scope attribute to associate header cells and data cells in data tables

→

MDN Reference

MDN: The Table Header Element

→