scope-attr-valid

Description

The scope attribute has to be used in tables as follows:

• The value of the scope attribute should be either row or col.
• All <th> elements should have a scope attribute.
• In HTML4, the scope attribute should be used only on th and td elements.
• In HTML5, the scope attribute should be used only on th elements.

Example

In the following example, the first column and the first row don’t have a scope attribute defined in the <th> element. Without a scope attribute, screen readers and other assistive technologies find it difficult to understand the relationships between the table elements. So, the following code breaks the scope-attr-valid rule.

In contrast, the following code snippet uses the scope attribute on all th elements. This makes it easy for screen readers and other assistive technologies to understand the relationships between the table elements. So, this code snippet doesn’t break the scope-attr-valid rule.

How to fix?

You can follow these steps to fix issues if this rule gets flagged:

• Check if all the <th> elements have a scope attribute defined. If not, add it.
• Check if the value of the scope attribute is anything other than row or col. If so, change it.
• For HTML4, check if you have used the scope attribute anywhere other than th or td elements. If so, remove it.
• For HTML5, check if you have used the scope attribute anywhere other than thelements. If so, remove it.

References

• WCAG 4.1.2: Name, Role, Value