Scope attribute should be used correctly on tables
How to Fix the Problem
If you are using HTML5, check that the scope
attribute is only
being used on th
elements. If you are using HTML 4, check that
the scope
attribute is only being used on th
and
td
.
Finally, check that the value of the scope is either row
or
col
, but nothing else.
Add scope
attribute values to all th
elements that
do not have one.
The markup necessary to convey the relationship between header cells and data
cells in data tables that are not complex can be accomplished using the
scope
attribute. The scope
attribute tells the
browser and screen reader that everything under the column is related to the
header at the top, and everything to the right of the row header is related to
that header.
Applying the scope attribute to a table in markup looks like this:
Good Example
<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>
Note that the top headers for Name, 1 mile, 5 km and 10 km are all marked up
with th
elements, as are the row headers for Mary, Betsy, Matt
and Todd. Each of these header cells have also been given the
scope
attribute values of col
or
row
depending on whether they are column or row header cells.
Why it Matters
The scope
attribute makes table navigation much easier for screen
reader users, provided that it is used correctly. Incorrectly used,
scope
can make table navigation much harder and less efficient.
A screen reader operates under the assumption that a table has a header and that this header specifies a scope. Because of the way screen readers function, having an accurate header makes viewing a table far more accessible and more efficient for people who use the device.
Rule Description
The scope
attribute must be used correctly on tables in
accordance with either HTML4 or HTML5 specifications to enable efficient table
navigation for screen reader users.
The Algorithm (in simple terms)
Ensures that the scope attribute is used correctly on tables.