What This Rule Checks
For users relying on screen readers to navigate and understand tables, it is essential that data cells (<td>) are properly associated with their respective header cells (<th>). The scope attribute helps screen readers identify the relationship between table headers and their corresponding data cells, allowing users to understand how the table is structured.
The scope attribute defines whether a header is for a column, row, or a group of columns/rows. This ensures that users with disabilities can easily navigate tables and understand which data relates to which header.
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.
Why This Matters
Broken header references mean screen readers cannot announce column or row headers when navigating table cells. Users hear raw data values without context about what each value represents.
How to Fix
To ensure that tables with headers and data cells are accessible, you need to use the scope attribute to define relationships between headers and data cells. The scope attribute helps define whether a table header applies to a column, row, or a group of columns or rows. This ensures that users who rely on assistive technology can easily understand how the table is structured.
Correct Use of scope, colgroup, and rowgroup Attributes
In a basic table where each row has a header and each column also has a header, the scope attribute should be used on each <th> element. Use scope=”col” for column headers and scope=”row” for row headers.
Code Examples
<!-- headers attribute references non-existent ID -->
<table>
<tr>
<th id="name">Name</th>
<th id="role">Role</th>
</tr>
<tr>
<td headers="name">Alice</td>
<td headers="title">Engineer</td>
</tr>
</table>
Copy
<!-- Correct header references -->
<table>
<tr>
<th id="name">Name</th>
<th id="role">Role</th>
</tr>
<tr>
<td headers="name">Alice</td>
<td headers="role">Engineer</td>
</tr>
</table>
Copy
Common Mistakes to Avoid
- Referencing header IDs that don’t exist in the table.
- Using headers attribute with IDs from outside the table.
- Not updating headers attributes when table structure changes.
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.
Related WCAG Criteria
- 1.3.1: Info and Relationships