scope-attr-valid

Description

The scope-attr-valid rule ensures that you use the scope attribute only on appropriate table elements. Correct usage of scope is essential for assistive technologies to accurately convey table structure and relationships to users.

Use of the scope attribute depends on your declared HTML version:

• HTML5: You must only use the scope attribute on <th> (table header) elements.
• HTML4: You can use the scope attribute on both <th> and <td> (table data) elements.

Using scope incorrectly on other elements, especially in an HTML5 context, confuses screen readers. This violation aligns with WCAG Success Criterion 1.3.1 (Info and Relationships). This criterion requires that information, structure, and relationships are programmatically determinable.

Examples

In the following example (assuming HTML5), a <td> element incorrectly uses the scope attribute. This violates the scope-attr-valid rule.

In the following corrected example, the header cell uses the correct <th> element, allowing you to use the scope attribute correctly.

How to fix?

To fix violations of the scope-attr-valid rule, follow these steps:

• Check your HTML version: Determine whether you are targeting HTML5 or HTML4.

• Identify violations: Find all table elements that incorrectly use the scope attribute.

• For HTML5:

  • If you find scope on a <td> element, remove the scope attribute.

  • If the element is intended as a table header, change the tag from <td> to <th> and keep the scope attribute (e.g., scope="col" or scope="row").
  • Ensure the scope value is valid (col, row, colgroup, or rowgroup).

• For HTML4:

  • You can use scope on both <th> and <td>.
  • Ensure the scope value is valid (col, row, colgroup, or rowgroup).

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships