What This Rule Checks
Table header elements, such as those marked with <th> or with roles like role=”rowheader” or role=”columnheader”, must contain visible and meaningful text. This text helps both sighted users and screen reader users understand the purpose of the column or row in a table. If a header element is empty or lacks descriptive content, it becomes difficult for users to comprehend the table’s structure and content.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes.
Why This Matters
When screen readers navigate table cells, they announce the associated header. An empty header means the column content has no label, leaving users unable to understand what the data represents.
How to Fix
Provide Visible Text in Table Headers:
Ensure every <th>, role=”rowheader”, or role=”columnheader” element contains visible and descriptive text that reflects the content or purpose of the associated row or column.
Avoid Using Empty Table Headers:
Do not use <th> elements that lack text or have no relevant content. If an element does not serve as a header, consider using <td> instead.
Code Examples
<!-- Empty table header -->
<table>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alice</td>
<td>30</td>
</tr>
</table>
Copy
<!-- Table header with visually hidden text -->
<table>
<tr>
<th>
<span class="sr-only">Select</span>
</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>
<input
type="checkbox"
aria-label="Select Alice">
</td>
<td>Alice</td>
<td>30</td>
</tr>
</table>
Copy
Common Mistakes to Avoid
- Leaving <th> empty for checkbox or action columns without adding screen-reader-only text.
- Using as header content instead of actual descriptive text.
- Assuming visual context makes empty headers self-explanatory.
Tip: Data tables must use proper markup so screen readers can associate data cells with their headers. Without this association, table data becomes an incomprehensible list of values without context.