<th> elements and elements with [role="columnheader"/"rowheader"] do not have data cells they describe

— Updated
Appears in: Accessibility audits
On this page

Screen readers and other assistive technologies have features to make navigating tables easier. Table headers must refer to some set of cells so that assistive technologies can help users navigate tables easily.

How this Lighthouse audit fails #

Lighthouse flags <th> elements and elements with [role="columnheader"/"rowheader"] that don't have the data cells they describe:

How to fix table headers that have no associated data cells #

The following table isn't structured correctly; there's a table header column, "Marathon pace", without table data cells:

<table>
  <caption>My marathon training log</caption>
  <thead>
    <tr>
      <th scope="col">Week</th>
      <th scope="col">Total miles</th>
      <th scope="col">Longest run</th>
      <th scope="col">Marathon pace</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>14</td>
      <td>5</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>16</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

To fix this table, add the missing table data cells for the table header column, "Marathon pace":

<table>
  <caption>My marathon training log</caption>
  <thead>
    <tr>
      <th scope="col">Week</th>
      <th scope="col">Total miles</th>
      <th scope="col">Longest run</th>
      <th scope="col">Marathon pace</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>14</td>
      <td>5</td>
      <td>4:45:00</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>16</td>
      <td>6</td>
      <td>4:33:00</td>
    </tr>
  </tbody>
</table>

Assistive technologies announce the table headers when they come to each table data cell. If the headers and data cells don't match up, it's very confusing.

Resources #

Last updated: — Improve article
Return to all articles
Share