Table Header TH Is Empty
| Field | Value |
|---|---|
| Rule code | Table_Header_Empty |
| WCAG conformance level | A |
| WCAG success criterion | 1.3.1 Info and Relationships |
| Must be fixed at source | No |
Description
Tables display information in rows and columns. Column headers identify what kind of information is shown in each particular column of a row. We detected a table header (th) element that is empty. A table header element needs inner text so that it conveys accessible information. If the table header does not have inner text, the table data cell element (td) may be more appropriate. Additionally, we recommend adding a scope attribute with a value of column to each column heading so that they are identified appropriately. If a table header element is empty, users cannot utilize headings to navigate the table and may find the column data confusing.
How to fix
Add text to each <th> element that describes the header's row or column.
<table>
<caption>Personal favorite foods</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Favorite food</th>
<th scope="col">Second favorite food</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Alice</th>
<td>tacos</td>
<td>apple pie</td>
</tr>
<tr>
<th scope="row">Brenda</th>
<td>ice cream</td>
<td>pasta</td>
</tr>
<tr>
<th scope="row">Chaz</th>
<td>stir fry</td>
<td>hummus</td>
</tr>
</tbody>
</table>