WCAG H63: Using the scope attribute to associate header cells and data cells

Rule ID:
wcag/h63
Category:
Accessibility
Standards:
  • WCAG 2.2 (A)
  • WCAG 2.1 (A)
  • WCAG 2.0 (A)

For complex tables, WCAG H63 requires header cells to use the scope to associate with data cells.

A table is considered simple when:

In all other cases, the table is considered complex and requires the scope attribute to be set.

Use the strict option to enforce for all tables (simple and complex).

Rule details

Examples of incorrect code for this rule:

<table>
    <tr>
        <th>Column A</th>
        <th>Column B</th>
    </tr>
    <tr>
        <!-- complex table with both column and row headers -->
        <th>Row 1</th>
        <td>Row 1</td>
    </tr>
</table>
error: <th> element must have a valid scope attribute: row, col, rowgroup or colgroup (wcag/h63) at inline:3:10:
  1 | <table>
  2 |     <tr>
> 3 |         <th>Column A</th>
    |          ^^
  4 |         <th>Column B</th>
  5 |     </tr>
  6 |     <tr>


error: <th> element must have a valid scope attribute: row, col, rowgroup or colgroup (wcag/h63) at inline:4:10:
  2 |     <tr>
  3 |         <th>Column A</th>
> 4 |         <th>Column B</th>
    |          ^^
  5 |     </tr>
  6 |     <tr>
  7 |         <!-- complex table with both column and row headers -->


error: <th> element must have a valid scope attribute: row, col, rowgroup or colgroup (wcag/h63) at inline:8:10:
   6 |     <tr>
   7 |         <!-- complex table with both column and row headers -->
>  8 |         <th>Row 1</th>
     |          ^^
   9 |         <td>Row 1</td>
  10 |     </tr>
  11 | </table>


3 errors found.

Examples of correct code for this rule:

<table>
    <tr>
        <th>Column A</th>
        <th>Column B</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

<table>
    <tr>
        <th scope="col">Column A</th>
        <th scope="col">Column B</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

<table>
    <tr>
        <th scope="row">Row 1</th>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <th scope="row">Row 2</th>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

Markdown

If you are using content generated from Markdown consider disabling this rule as most markdown parsers does not generate <th> elements with the scope attribute.

Alternatively use a disable directive somewhere in the markdown file:

<!-- [html-validate-disable-block wcag/h63: markdown does not generate tables with scope attribute] -->

| Foo | Bar | Baz |
| --- | --- | --- |
| 1   | 2   | 3   |

Options

This rule takes an optional object:

{
  "strict": false
}

strict

When strict is enabled, this rule enforces the scope attribute on all <th> elements without considering if the table is simple or complex.

Version history