Scope Attr Valid

The scope attribute must be used correctly on table headers so screen readers can form clear associations between headers and data cells. This blog explains what the scope-attr-valid rule checks, why proper use of scope matters, how to apply it correctly and how this supports WCAG 2.2 and wider compliance expectations. The article is fully original, accurate and structured using the Welcoming Web content framework.

What it is

The scope-attr-valid rule checks whether table header (<th>) elements use the scope attribute appropriately. scope helps assistive technologies determine which headers apply to which table cells.

Valid values are: - col for column headers, - row for row headers, - colgroup for groups of columns, and - rowgroup for groups of rows.

Using invalid or incorrect values breaks header associations.

Why it matters

Incorrect scope usage causes several accessibility problems: - screen readers may not announce correct header associations, - users may struggle to understand how data relates to labelled rows or columns, - complex tables become confusing and inefficient to navigate, - cognitive load increases when relationships are unclear, - assistive technologies cannot reliably interpret table structure.

Accurate header associations ensure tables remain understandable for all users.

Who delivers it

Front end developers implement table structure with correct scope usage. Designers plan table layouts that support logical relationships. Content authors populate tables without modifying semantic structure. Accessibility specialists and QA testers verify that header associations are clear and correct. Welcoming Web assists by detecting invalid scope values.

How to ensure the scope attribute is used correctly

1. Use scope=“col” for column headers

Apply to headers at the top of a column.

<th scope="col">Name</th>

2. Use scope=“row” for row headers

Apply to headers at the start of a row.

<th scope="row">Total</th>

3. Avoid using scope on non-header elements

Only <th> elements should carry the attribute.

4. Use colgroup or rowgroup only when grouping structures are clear

These values are intended for more complex data tables.

5. Do not invent custom values

Invalid values cause assistive technologies to ignore header associations.

Best practice guidance

Keep table structures simple whenever possible. Use headers consistently across rows and columns. Document table patterns in your design system to maintain clarity across interfaces. For complex tables, consider combining scope with headers attributes for robust accessibility.

Compliance mapping

Correct scope usage supports: - WCAG 2.2 Info and Relationships success criterion, - WCAG 2.2 Meaningful Sequence requirements, - ADA Title III expectations for structured and understandable content, - EN 301 549 guidance on programmatically determinable table relationships, - Equality Act 2010 duties for accessible data presentation.

Welcoming Web supports alignment with recognised standards but does not issue or guarantee compliance certification.

How Welcoming Web supports teams

Welcoming Web identifies incorrect scope usage and flags values that do not match recognised patterns. The platform provides guidance for restoring accurate header relationships.

Key points for development teams

Use valid scope values. Apply scope only to <th>. Use col or row for simple tables. Avoid custom values. Support clear header associations.

Call to action

Run an audit Check your site for incorrect table scope usage. Supports WCAG 2.2 and ADA goals.

FAQs

What does the scope-attr-valid rule check

It checks whether <th> elements use valid and appropriate scope attribute values.

Why is scope important

It helps screen readers form correct relationships between headers and data.

Which values are valid

col, row, colgroup and rowgroup.

Can scope be used on <td> elements

No. Only <th> elements should use scope.

Should I use scope on every header

Use it when you need to express clear, logical relationships in the table.

Can complex tables use only scope

Complex tables often need both scope and headers for full accessibility.

Does valid scope guarantee WCAG compliance

It supports structural requirements but does not guarantee full compliance.

How does Welcoming Web help with scope issues

Welcoming Web detects incorrect values and provides guidance for proper table structure.

Disclaimer

Welcoming Web supports accessibility improvement and alignment with recognised standards but does not issue or guarantee compliance certification.