Make sure the scope attribute is used correctly on tables

The scope-attr-valid rule ensures that the scope attribute is used correctly in tables—specifically on <th> elements, and with valid values.

What is being tested?

This rule checks that:

• In HTML5, scope is only used on <th> elements.
• In HTML4, scope can be used on <th> and <td> elements.
• The value of the scope attribute is row or col.

Why it matters

The scope attribute improves table navigation for screen reader users by defining which headers apply to which rows or columns. Without it—or when used incorrectly—screen readers can misinterpret the table, making it harder or slower for users to understand the data.

Good markup 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>
</table>

Incorrect markup examples

<td scope="col">Invalid in HTML5</td>

<th scope="group">Invalid scope value</th>

Best practices

• Use <th> for header cells and apply scope="col" or scope="row" as appropriate.
• In HTML5, avoid using scope on <td> elements.
• For complex tables, consider using headers and id attributes instead of relying solely on scope.