Scope Attr Valid
Critical - WCAG Level A
What the issue is:
The scope attribute is intended to declare the relationship between a table header cell (<th>) and the cells it labels (columns/rows or groups). The rule flags cases where scope is used incorrectly — for example, placed on non-header cells (<td>), given an invalid value (like scope="column" instead of "col"), or omitted on header cells in simple tables where screen readers rely on it.
Why it matters:
Screen readers use header semantics (and the scope attribute) to expose the relationship between header and data cells. If scope is incorrect, users of assistive technologies cannot determine which header applies to a cell, leading to confusion when interpreting table data. Keyboard-only users and people with cognitive disabilities also rely on correct table markup to navigate and understand information.
How to fix it:
Identify header cells. Any cell that labels a row/column should be a <th>, not a <td>. Replace <td> with <th> where appropriate.
Use scope only on <th> elements. Remove scope attributes from non-<th> elements.
Use valid values: per HTML spec, scope must be one of: "col", "row", "colgroup", or "rowgroup". For simple tables, prefer "col" for top-row headers and "row" for left-column headers.
Wrap header rows in <thead> and data rows in <tbody> where appropriate — this clarifies structure.
For complex tables (multi-row/column headers, headers that span non-adjacent cells), consider using id + headers attributes or aria-labelledby to explicitly map headers to data cells instead of relying solely on scope.
Best practices:
Always include a <caption> for table context.
Use semantic HTML (<th>, <thead>, <tbody>, <tfoot>) before resorting to ARIA.
Test with a screen reader to confirm header associations.
Common mistakes to avoid:
Placing scope on <td>
Using invalid scope values (e.g., "column")
Assuming visual styling implies header semantics
Overusing scope in complex tables where headers/ids are required.