All th elements and elements with role=columnheader/rowheader must have data cells they describe

Screen readers have a specific way of announcing tables. When tables are not properly marked up, this creates the opportunity for confusing or inaccurate screen reader output.

When tables are not marked up semantically and do not have the correct header structure, screen reader users cannot correctly perceive the relationships between the cells and their contents visually.

Fixing the problem

Ensure that each table header in a data table refers to data cells so that each header cell that is used is actually a header of something.

In other words, 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

Bad Example: <th> with set to scope="row" instead of scope="col"

Notice the <th> elements are scoped to row when they should be scoped to col in the following table:

Teddy bear collectors:

Last Name	First Name	City
Phoenix	Imari	Henry
Zeki	Rome	Min
Apirka	Kelly	Brynn

<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>

Following is the corrected code for associating column headers with table content in the previous example:

...
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope="col">City</th>
...