• June 30, 2025

Ensuring Proper Use of the scope Attribute in Tables

Rule ID: scope-attr-valid
Ruleset: axe-core 4.10
User Impact: Moderate
Guidelines: Deque Best Practice

How to Fix the Problem

To ensure accessibility and semantic correctness, the scope attribute must be used appropriately depending on the HTML standard you’re working with:

• In HTML5: Use the scope attribute only on <th> (table header) elements.

• In HTML4: The scope attribute may be used on both <th> and <td>, though <th> is preferred for headers.

Valid scope attribute values are:

• col — identifies a column header

• row — identifies a row header

All other values (like column, rowgroup, or custom strings) are invalid and must be avoided unless working in older HTML contexts that require them.

Example Fix

Best Practices:

• Use scope="col" on top row headers that label columns.

• Use scope="row" on the first column headers that label rows.

• Avoid applying scope to regular data cells (<td>).

• Ensure every <th> has an appropriate and valid scope attribute when possible.

This simple structure supports screen reader users by enabling more efficient and understandable table navigation.

Why it Matters

The scope attribute plays a crucial role in making tables understandable for screen reader users. It defines the relationship between header cells and the corresponding rows or columns of data, allowing assistive technologies to convey this relationship accurately.

If used incorrectly:

• Screen readers may misinterpret the structure of the table.

• Navigation within the table becomes inefficient and confusing for users who rely on auditory cues.

If used correctly:

• Screen readers can announce the associated header when a user navigates to a data cell.

• The table becomes significantly more accessible and user-friendly for individuals with visual impairments.

Rule Description

The scope attribute on table headers (<th>) must be implemented in line with HTML standards. It ensures that each header cell clearly identifies whether it applies to a row or a column. This semantic clarity directly supports assistive technology in delivering a coherent experience for users.

The Algorithm (in Simple Terms)

1. Loop through each table element in the page.

2. For each <th>:

   • Check if it includes a scope attribute.

   • Validate that the scope attribute contains either row or col.

3. Ensure that the scope attribute is not applied to <td> elements (in HTML5).

4. Flag any misuse or omission.