<th>
elements and elements with [role="columnheader"/"rowheader"]
do not have data cells they describe
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:
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.
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
- Source code for
<th>
elements and elements with[role="columnheader"/"rowheader"]
do not have data cells they describe audit - All
<th>
elements and elements withrole="columnheader"
orrole="rowheader"
must have data cells they describe (Deque University)