Scope attribute should be used correctly on tables
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.
Fixing 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
col, but nothing else.
scope attribute values to all
th elements that do not have
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 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:
<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
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
row depending on whether they are column or row header cells.