# The scope attribute on table headers must have a valid value.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/adaptable/scope-attr-valid
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `scope` attribute on a `<th>` element tells assistive technologies which data cells that header applies to. When the attribute contains an invalid value, screen readers cannot associate headers with their corresponding cells, and users hear data without context.

Valid values for the `scope` attribute are `row`, `col`, `rowgroup`, and `colgroup`. Any other value, including typos like `"column"` or `"rows"`, is ignored by browsers and assistive technologies. The result is the same as having no `scope` at all, except worse: a developer may assume the association is working when it is not.

Screen reader users are the most affected group. When navigating a data table, screen readers announce the relevant header before each cell's content. For example, in a table of employee data, a screen reader might say "Name: Alice" as a user moves through a row. If the `scope` value is invalid, the screen reader may announce only "Alice" with no indication of which column the value belongs to. This makes complex tables nearly impossible to understand without sight.

This rule maps to WCAG 2 success criterion 1.3.1, "Info and Relationships" (Level A). That criterion requires that information and relationships conveyed through visual presentation are also available programmatically. Column and row headers are a visual cue that sighted users rely on; the `scope` attribute is one way to expose that same relationship to assistive technologies.

## How to fix it

Check every `<th>` element that has a `scope` attribute and confirm the value is one of the four valid options:

- `col` — the header applies to the remaining cells in the same column.
- `row` — the header applies to the remaining cells in the same row.
- `colgroup` — the header applies to all cells in the column group.
- `rowgroup` — the header applies to all cells in the row group.

Remove or correct any `scope` attribute that uses a different value. If a `<th>` element does not need an explicit `scope` (for instance, in a simple table with headers only in the first row), you can either set `scope="col"` or remove the attribute entirely, since browsers can infer the association in simple layouts. For complex tables with multi-level headers, explicit and correct `scope` values are necessary.

## Examples

### Invalid scope value

The `scope` attribute contains `"column"`, which is not a valid value:

```html
<table>
  <tr>
    <th scope="column">Name</th>
    <th scope="column">Department</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Engineering</td>
  </tr>
</table>
```

Screen readers will not associate "Name" with "Alice" or "Department" with "Engineering" because `"column"` is not recognized.

### Corrected scope value

Replace `"column"` with the valid value `"col"`:

```html
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Department</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Engineering</td>
  </tr>
</table>
```

### Row headers with an invalid value

```html
<table>
  <tr>
    <th scope="rows">Q1</th>
    <td>$1,200</td>
    <td>$1,400</td>
  </tr>
  <tr>
    <th scope="rows">Q2</th>
    <td>$1,100</td>
    <td>$1,500</td>
  </tr>
</table>
```

`"rows"` (plural) is not valid. The correct value is `"row"`:

```html
<table>
  <tr>
    <th scope="row">Q1</th>
    <td>$1,200</td>
    <td>$1,400</td>
  </tr>
  <tr>
    <th scope="row">Q2</th>
    <td>$1,100</td>
    <td>$1,500</td>
  </tr>
</table>
```

### Using rowgroup and colgroup

For tables with grouped rows or columns, `rowgroup` and `colgroup` are the appropriate values:

```html
<table>
  <thead>
    <tr>
      <th scope="colgroup" colspan="2">Revenue</th>
      <th scope="colgroup" colspan="2">Expenses</th>
    </tr>
    <tr>
      <th scope="col">Domestic</th>
      <th scope="col">International</th>
      <th scope="col">Domestic</th>
      <th scope="col">International</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$500</td>
      <td>$300</td>
      <td>$200</td>
      <td>$150</td>
    </tr>
  </tbody>
</table>
```

Each `scope` value here is one of the four valid options, so assistive technologies can correctly associate every data cell with its headers.