Associating table headers with a row, column, or a group of rows or columns enables screen reader softwares to announce the header prior to the data. This considerably increases the accessibility of tables to visually impaired users.
The following code:
<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>
should be refactored into either:
<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>