Back to Info and Examples for Accessibility Insights for Web
th-has-data-cells
A header cell in a data table must not have missing data cells.
Why it matters
People with good vision typically read a data table by visually scanning its rows or columns of data. They can easily skip over a missing data cell and continue through the rest.
People who use assistive technologies a read data table by navigating through its rows or columns using a keyboard. When they encounter a missing data cell, they might not realize there's any content beyond it. Even if they do, they can't skip over the missing data cell; instead, they have to navigate around it. They are likely to have difficulty interpreting the table.
How to check
Examine the row or column header in the context of the table to verify that it has no data cells.
If the header has no data cells, then no changes are required. (The missing cells will not disrupt keyboard navigation.)
How to fix
If a row or column header has at least one data cell, then ensure that ALL of the following are true:
- The header has a full set (row or column) of related data cells. (It's ok if cells are empty.)
- All of the data cells are programmatically related to the header.
Example
Fail
<table>
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Pounds</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>12</td>
</tr>
<tr>
<th>Bananas</th>
</tr>
<tr>
<th>Oranges</th>
<td>16</td>
</tr>
<tr>
<th>Pears</th>
<td>6</td>
</tr>
</tbody>
</table>
Pass
<table>
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Pounds</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>12</td>
</tr>
<tr>
<th>Bananas</th>
<td></td>
</tr>
<tr>
<th>Oranges</th>
<td>16</td>
</tr>
<tr>
<th>Pears</th>
<td>6</td>
</tr>
</tbody>
</table>
About this rule
Instances need review if ALL of the following are true:
- Element is a header cell (
<th>or hasrole="columnheader"orrole="rowheader") - Header cell is missing one or more programmatically related data cells.