The scope attribute should be used correctly on tables

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

Why this is Important

The scope attribute makes table navigation much easier for screen reader users, provided that it is used correctly. If used incorrectly, it can make table navigation much harder and less efficient.

A screen reader operates under the assumption that a table will have a header and that this header will also specify a scope. Because of the way screen readers function, having an accurate header makes viewing a table far easier and more efficient for people who use the device.

Compliance Data & Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Mobility/Dexterity
Severity: Critical
Issue Type:
  • Deque Best Practice
WCAG Success Criteria:
  • Not applicable
Section 508 Guidelines:
  • Not applicable

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=" " attributes 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.

Related Deque University Course Pages

Related Deque Code Library Examples

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Relevant Custom Widget Type(s):
  • Table - Sortable
  • Table - Responsive
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: scope-attr-valid