probeo

How to fix an invalid scope attribute?

scope-attr-valid page

The issue

scope tells assistive technology which cells a header applies to. On the wrong element, or with a value browsers don’t recognize, it is ignored, and the table loses the header relationship it was meant to set. A screen reader then reads values without the header that explains them.

The cause is usually scope on a <td>, which is obsolete in HTML, or a misspelled value such as scope="column".

Scope

Every visible element with a scope attribute is checked. It is reported if the element isn’t a <th>, or if the value isn’t col, row, colgroup or rowgroup, in any case.

How to check you have it

  • In probeo: the page reports scope-attr-valid, “scope attribute should be used correctly”, as moderate. It is a best practice rule rather than a WCAG criterion. The detail says whether the element or the value is wrong.
  • By hand: search the source for scope= and check each one is on a <th> with one of the four values.
  • With a tool: axe DevTools has a rule with the same name.

The fix

Use scope only on <th>, with col, row, colgroup or rowgroup.

If a <td> carries scope because it is acting as a header, change it to a <th>. If the value is misspelled, correct it.

<th scope="col">Price</th>
<th scope="row">Pro</th>

Done when: every scope attribute is on a <th> and has one of the four values, and the check above comes back clean.

Do not

  • Do not put scope on <td> cells.
  • Do not use values like column or header.
  • Do not add scope to layout tables.

FAQ

Is scope needed on every header?

Not always. Browsers can often infer simple headers, but scope makes the relationship explicit, which helps in tables that aren’t a plain grid.

What do colgroup and rowgroup mean?

They make a header apply to a group of columns or rows, defined by <colgroup> or a <tbody> section, rather than a single one.

Is scope on td still supported?

It is obsolete in HTML, so don’t rely on it. Use a <th>.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.