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
