# The “role” attribute must not be used on a “td” element which has a “table” ancestor with no “role” attribute, or with a “role” attribute whose value is “table”, “grid”, or “treegrid”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-role-attribute-must-not-be-used-on-a-td-element-which-has-a-table-ancestor-with-no-role-attribute-or-with-a-role-attribute-whose-value-is-table-grid-or-treegrid
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `<td>` inside a `<table>` with no `role`, or with a `role` of `table`, `grid` or `treegrid`, gets its ARIA role from the table and must not have a `role` attribute of its own.

Browsers map table cells automatically. In a plain table, or one with `role="table"`, each `<td>` is exposed as a `cell`. In a table with `role="grid"` or `role="treegrid"`, each `<td>` is exposed as a `gridcell`. The ARIA in HTML specification doesn't let authors set any role on these cells, so the validator rejects redundant values like `role="cell"` and `role="gridcell"` as well as roles that turn the cell into something else, such as `role="button"` or `role="presentation"`.

Overriding a cell's role breaks the structure screen readers depend on. A `<td>` exposed as a button is no longer a cell, so assistive technology can't announce its row and column headers or reach it with table navigation commands.

To make a cell interactive, put a real control such as a `<button>` or an `<a>` inside the `<td>`. For layout tables, which are common in HTML email, set `role="presentation"` on the `<table>` instead of on each cell. Once the table has a role other than `table`, `grid` or `treegrid`, its cells lose their table semantics and the rule no longer applies.

## Invalid examples

### Data table

```html
<table>
  <tr>
    <th>Name</th>
    <th>Actions</th>
  </tr>
  <tr>
    <td role="cell">Alice</td>
    <td role="button" tabindex="0">Edit</td>
  </tr>
</table>
```

### Layout table

```html
<table>
  <tr>
    <td role="presentation">Logo</td>
    <td role="presentation">Newsletter title</td>
  </tr>
</table>
```

## Valid examples

### Data table

```html
<table>
  <tr>
    <th>Name</th>
    <th>Actions</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td><button type="button">Edit</button></td>
  </tr>
</table>
```

### Layout table

```html
<table role="presentation">
  <tr>
    <td>Logo</td>
    <td>Newsletter title</td>
  </tr>
</table>
```