Ensure That <th> Elements and Elements With role=columnheader/rowheader Have Data Cells They Describe
Blind
Hearing
WCAG 2.2 Level A
Written and researched for humans by humans
Casandra Visser
Author
Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments:
0
Web accessibility standards require tables to be marked up semantically and with the correct header structure.
Why It Matters
When tables are not properly marked up, screen reader output will be inaccurate.
Without the right markup, screen reader users cannot correctly perceive the relationships between the cells and their contents.
Fixing the Issue
Ensure that each table header in a data table refers to data cells. This means the th element must have associated data cells.
If header attributes exist, ensure that they reference elements with text available to screen readers.
- The th element must not use the headers attribute
- th elements should only be used when there is a single row and single column of headers
- th elements must use the scope attribute
Good Code Example
Code example
...
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope="col">City</th>
...
Copy Bad Code Example
Code example
<table>
<caption>Teddy bear collectors:</caption>
<tr>
<th scope="row">Last Name</th>
<th scope="row">First Name</th>
<th scope="row">City</th>
</tr>
<tr>
<td>Phoenix</td>
<td>Imari</td>
<td>Henry</td>
</tr>
<tr>
<td>Zeki</td>
<td>Rome</td>
<td>Min</td>
</tr>
<tr>
<td>Apirka</td>
<td>Kelly</td>
<td>Brynn</td>
</tr>
</table>
Copy Test Cases
For more examples, visit the W3C’s GitHub’s ATC Rules library.