Assistive technologies, such as screen readers, use <th>
headers to provide some context when users navigates a table. Without
it the user gets rapidly lost in the flow of data.
Headers should be properly associated with the corresponding <td>
cells by using either a scope
attribute or
headers
and id
attributes. See W3C WAI Web Accessibility
Tutorials for more information.
This rule raises an issue whenever a <table>
does not contain any <th>
elements.
Noncompliant Code Example
<table> <!-- Noncompliant -->
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>Alice Doe</td>
<td>54</td>
</tr>
</table>
Compliant Solution
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>Alice Doe</td>
<td>54</td>
</tr>
</table>
Exceptions
No issue will be raised on <table> used for layout purpose, i.e. when it contains a role
attribute set to
"presentation"
or "none"
. Note that using <table> for layout
purpose is a bad practice.
No issue will be raised on <table> containing an aria-hidden
attribute set to "true"
.
See