Associating <table> headers, i.e. <th> elements, with their <td> cells enables screen
readers to announce the header prior to the data. This considerably increases the accessibility of tables to visually impaired users.
There are two ways of doing it:
- Adding a
scope attribute to <th> headers.
- Adding an
id attribute to <th> headers and a headers attribute to every <td>
element.
It is recommended to add scope attributes to <th> headers whenever possible. Use <th id="...">
and <td headers="..."> only when <th scope="..."> is not capable of associating cells to their headers. This
happens for very complex tables which have headers splitting the data in multiple subtables. See W3C WAI Web Accessibility Tutorials for more information.
Note that complex tables can often be split into multiple smaller tables, which improves the user experience.
This rule raises an issue when a <th> element has neither id nor scope attributes set.
Noncompliant code example
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<th>Name</th> <!-- Non-Compliant -->
<th>Phone#</th> <!-- Non-Compliant -->
<th>City</th> <!-- Non-Compliant -->
</tr>
<tr>
<td>1.</td>
<th>Joel Garner</th> <!-- Non-Compliant -->
<td>412-212-5421</td>
<td>Pittsburgh</td>
</tr>
<tr>
<td>2.</td>
<th>Clive Lloyd</th> <!-- Non-Compliant -->
<td>410-306-1420</td>
<td>Baltimore</td>
</tr>
</table>
Compliant solution
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<th scope="col">Name</th> <!-- Compliant -->
<th scope="col">Phone#</th> <!-- Compliant -->
<th scope="col">City</th> <!-- Compliant -->
</tr>
<tr>
<td>1.</td>
<th scope="row">Joel Garner</th> <!-- Compliant -->
<td>412-212-5421</td>
<td>Pittsburgh</td>
</tr>
<tr>
<td>2.</td>
<th scope="row">Clive Lloyd</th> <!-- Compliant -->
<td>410-306-1420</td>
<td>Baltimore</td>
</tr>
</table>
or:
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<th id="name">Name</th> <!-- Compliant -->
<th id="phone">Phone#</th> <!-- Compliant -->
<th id="city">City</th> <!-- Compliant -->
</tr>
<tr>
<td>1.</td>
<th id="person1" headers="name">Joel Garner</th> <!-- Compliant -->
<td headers="phone person1">412-212-5421</td>
<td headers="city person1">Pittsburgh</td>
</tr>
<tr>
<td>2.</td>
<th id="person2" headers="name">Clive Lloyd</th> <!-- Compliant -->
<td headers="phone person2">410-306-1420</td>
<td headers="city person2">Baltimore</td>
</tr>
</table>
Exceptions
This rule is not applied in case of simple tables.
Tables are considered as such when the headers are either all in the first row, or all in the first column. The two conditions must not apply
together.
Simple table example:
<table border="1">
<caption>Simple Table 1</caption>
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
<table border="1">
<caption>Simple Table 2</caption>
<tr>
<th>Name</th>
<td>John</td>
</tr>
<tr>
<th>Surname</th>
<td>Doe</td>
</tr>
</table>
