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

In this table, the third column is missing one data cell. Assistive technology users who attempt to navigate down that column using a keyboard might conclude incorrectly that the column has no additional cells.

<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

The missing data cell has been added, though it remains empty. All users can infer that the cell has no data, and they can easily access the remaining cells in the column.

<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 has role="columnheader" or role="rowheader")
Header cell is missing one or more programmatically related data cells.

More examples

Understanding Success Criterion 1.3.1 Info and Relationships