Rule ID: ace-table-scope-valid

Validate scope attributes on table header cells use valid values like row or col

Blind Deafblind Mobility Best Practice

What This Rule Checks

The scope attribute is used to help screen readers and browsers understand the relationship between table header cells (<th>) and data cells (<td>). This attribute specifies whether a table header applies to a row, column, or group of rows/columns. Using the scope attribute ensures proper accessibility, making it easier for users with assistive technologies to navigate data tables.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

Invalid scope values prevent screen readers from associating header cells with data cells in the correct direction. Users hear data without context about which column or row it belongs to.

How to Fix

To ensure accessibility:

HTML5 Usage: Use the scope attribute only on <th> elements.

HTML 4 Usage: Use the scope attribute on both <th> and <td>, but only if necessary.

Set Correct Values: The value of scope must be either row, col, rowgroup, or colgroup, depending on whether the header refers to a row, column, or group of rows/columns.

Add scope values to all <th> elements that do not have one, and ensure that the values correctly describe the relationship of the header to the data.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Invalid scope value -->
<th scope="column">Name</th>
<!-- Should be "col" not "column" -->

Copy

Correct Markup Solutions:

Code example

<!-- Valid scope values -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>

  <tr>
    <th scope="row">Alice</th>
    <td>30</td>
  </tr>
</table>

Copy

Common Mistakes to Avoid

Using “column” instead of “col” or “columns” instead of “colgroup”.
Using non-standard scope values like “both” or “all”.
Applying scope to <td> elements instead of <th> elements.

Tip: Data tables must use proper markup so screen readers can associate data cells with their headers. Without this association, table data becomes an incomprehensible list of values without context.