Lack of described data cells in <th> elements and elements with [role=”columnheader”/”rowheader”]

2 min read

Google Lighthouse, reports <th> elements and elements with [role = "columnheader" / "rowheader"] that does not address enough data cells and therefore lowers the user experience.

How to pass data cell audits? 

Let’s go through the example. For example, the table below contains a table header column. But there is no table data set that this refers to. In that coding, the header column represents “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>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>16</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

Fixing this is possible by having a table data cell in the rest of the code. It is ‘’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>

Test Your Website Issues

You can quickly analyze your site