Ensure That Elements and Elements With role=columnheader/rowheader Have Data Cells They Describe

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.

Ensure That <th> Elements and Elements With role=columnheader/rowheader Have Data Cells They Describe

Written and researched for humans by humans

Why It Matters

Fixing the Issue

Good Code Example

Bad Code Example

Test Cases