Ensure the Scope Attribute is Used Correctly On Tables

Yotam Flohr
Researcher
Blind Hearing Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

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.

Why It Matters

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

Fixing the Issue

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.

Good Code Example

The markup in the following example shows native HTML5 landmark elements:

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