# The “columnheader” role is unnecessary for element “th”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-columnheader-role-is-unnecessary-for-element-th
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `<th>` at the top of a column is already exposed as a column header, so `role="columnheader"` on it tells screen readers nothing new.

Browsers work out the ARIA role of a `<th>` from its place in the table. A header cell in the `<thead>`, or in a row of headers above the data, gets the role `columnheader`. A header cell at the start of a data row gets `rowheader`. When the layout leaves room for doubt, `scope="col"` or `scope="row"` settles it. Writing the role by hand adds nothing and makes the markup harder to read.

The validator reports this warning for `role="columnheader"` on any `<th>`, wherever it sits. On a header that starts a row, the role is also wrong, because it overrides `rowheader` and tells screen readers the cell heads a column.

In most tables you'll see an error next to this warning. When the `<table>` has no `role` attribute, or has `role="table"`, `role="grid"` or `role="treegrid"`, its `<th>` cells can't have a `role` attribute at all. Removing `role="columnheader"` fixes both messages.

Table plugins and markup copied from online word processors often add a role to every part of a table. The `columnheader` role exists for tables built from generic elements such as `<div>`, where nothing else marks a cell as a header. A native `<th>` doesn't need it, so delete the attribute and keep `scope` if you want to state the direction. If the same table has roles on its rows or other cells, remove those as well.

## Invalid example

```html
<table>
  <thead>
    <tr>
      <th scope="col" role="columnheader">Day</th>
      <th scope="col" role="columnheader">Opening hours</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>9:00 to 17:00</td>
    </tr>
    <tr>
      <td>Saturday</td>
      <td>10:00 to 14:00</td>
    </tr>
  </tbody>
</table>
```

## Valid example

```html
<table>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Opening hours</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>9:00 to 17:00</td>
    </tr>
    <tr>
      <td>Saturday</td>
      <td>10:00 to 14:00</td>
    </tr>
  </tbody>
</table>
```