What This Rule Checks
In tables with multiple rows and columns, data cells must be associated with header cells so screen readers can announce the relevant headers when navigating cells. Without headers, users hear only raw data values without context.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content.
Why This Matters
In large tables, screen reader users rely on header associations to understand each cell’s context. Without headers, navigating a 10-column table means hearing “30” with no indication that it represents an age, a quantity, or a price.
How to Fix
Add <th> elements for row and column headers. Use the scope attribute on <th> elements to specify whether they apply to rows or columns. For complex tables, use the headers attribute on <td> cells to reference specific <th> id values.
Code Examples
<!-- Large table with no headers -->
<table>
<tr>
<td>Alice</td>
<td>30</td>
<td>Engineer</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Designer</td>
</tr>
</table>
Copy
<!-- Table with proper headers -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Role</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>Engineer</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Designer</td>
</tr>
</table>
Copy
Common Mistakes to Avoid
- Creating data tables without <th> header elements.
- Not using scope attribute to clarify header direction.
- Using <td> with bold styling instead of <th> for header cells.
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.
Related WCAG Criteria
- 1.3.1: Info and Relationships