Ensure that each non-empty data cell in a <table> larger than 3 by 3 has one or more table headers

The td-has-header rule ensures that each data cell (<td>) in a large table is associated with at least one header cell (<th>) to support screen reader navigation.

What is being tested?

This rule checks if data cells in tables with 3 or more rows and columns have one or more associated header cells. It verifies both simple tables using scope attributes and complex tables using id and headers.

Why it matters

Screen readers rely on table headers to announce the context of each cell. Without headers, users may hear disjointed data with no understanding of the rows or columns, making the table unusable for people with disabilities.

How to fix the problem

• Use <th scope="col"> for column headers and <th scope="row"> for row headers in simple tables.
• For complex tables, use id on headers and headers on each <td> to reference related headers.

Simple example

<table>
  <caption>Personal Bests</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">1 mile</th>
      <th scope="col">5 km</th>
      <th scope="col">10 km</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Mary</th><td>8:32</td><td>28:04</td><td>1:01:16</td></tr>
    <tr><th scope="row">Betsy</th><td>7:43</td><td>26:47</td><td>55:38</td></tr>
  </tbody>
</table>

Complex example

<table>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" id="females">Females</th>
    <th colspan="2" id="males">Males</th>
  </tr>
  <tr>
    <th id="mary">Mary</th>
    <th id="betsy">Betsy</th>
    <th id="matt">Matt</th>
    <th id="todd">Todd</th>
  </tr>
  <tr>
    <th id="mile">1 mile</th>
    <td headers="females mary mile">8:32</td>
    <td headers="females betsy mile">7:43</td>
    <td headers="males matt mile">7:55</td>
    <td headers="males todd mile">7:01</td>
  </tr>
</table>

Best practices

• Use simple tables where possible—complex tables are harder to navigate.
• Use scope for simpler markup, id + headers for complex relationships.
• Always test with target screen reader and browser combinations for compatibility.