Ensure the Scope Attribute is Used Correctly On Tables
Blind
Hearing
Mobility
WCAG 2.1 Level A
Web accessibility standards state that the scope attribute must be used correctly on tables in accordance with either HTML4 or HTML5 specifications to enable efficient table navigation for users who rely on screen readers.
The scope attribute makes table navigation much easier for screen reader users, but only if it’s used correctly.
Screen readers will automatically assume that a table has a header and that this header specifies a scope..
The scope attribute should only be used on th elements. If you are using HTML 4, the scope attribute should only be used on th and td.
You should also check that the value of the scope is either row or col, but nothing else.
Lastly, add scope attribute values to all th elements that do not have one.
The markup in the following example shows native HTML5 landmark elements:
<table>
<caption><strong>Greensprings Running Club Personal Bests</strong></caption>
<tr>
<th scope="col">Name</th>
<th scope="col">1 mile</th>
<th scope="col">5 km</th>
<th scope="col">10 km</th>
</tr>
<tr>
<th scope="row">Mary</th>
<td>8:32</td>
<td>28:04</td>
<td>1:01:16</td>
</tr>
<tr>
<th scope="row">Betsy</th>
<td>7:43</td>
<td>26:47</td>
<td>55:38</td>
</tr>
<tr>
<th scope="row">Matt</th>
<td>7:55</td>
<td>27:29</td>
<td>57:04</td>
</tr>
<tr>
<th scope="row">Todd</th>
<td>7:01</td>
<td>24:21</td>
<td>50:35</td>
</tr>
</table>
Copy