scope attribute should be used correctly

WCAG 1.3.1
Info and Relationships

Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).

Why this matters and how to fix it

Why this matters

Screen readers use the `scope` attribute on table headers to understand how header cells relate to data cells. Incorrect or misplaced scope values can make data tables confusing and difficult to interpret for non-visual users.

How to fix this issue

Use the `scope` attribute only on `<th>` elements to identify the cells they describe. Acceptable values are `col`, `row`, `colgroup`, or `rowgroup`. Do not place `scope` on `<td>` elements or non-table elements.

Automated detection · Manual review recommended

Developer guidance

Audit data tables to ensure `<th>` elements use valid `scope` values and align with table structure. In large or complex tables, prefer explicit associations using `headers` and `id` attributes for better assistive technology support.

Code examples

Incorrect Implementation

<table>
  <tr><td scope="col">Product</td><td scope="col">Price</td></tr>
  <tr><td>Apple</td><td>$1</td></tr>
</table>

Correct Implementation

<table>
  <tr><th scope="col">Product</th><th scope="col">Price</th></tr>
  <tr><td>Apple</td><td>$1</td></tr>
</table>
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance