# Bad value “presentational” for attribute “role” on element X.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-presentational-for-attribute-role-on-element-x
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

This error occurs when you use `role="presentational"` on an HTML element. While the intent is clear — you want to strip the element's implicit ARIA semantics — the value `presentational` does not exist in the WAI-ARIA specification. It's a common typo or misconception. The two valid roles for this purpose are `presentation` and `none`, which are synonyms of each other.

When you apply `role="presentation"` or `role="none"` to an element, you're telling assistive technologies (like screen readers) to ignore the element's implicit semantic meaning. For example, a `<table>` used purely for layout purposes has no tabular data semantics, so `role="presentation"` removes the table-related semantics from the accessibility tree. However, the *content* inside the element remains accessible — only the container's semantics (and in some cases, its required associated descendants) are removed.

This matters for several reasons:

- **Standards compliance:** Using an invalid role value means the attribute is essentially ignored by browsers and assistive technologies, so the element's semantics are *not* removed as intended.
- **Accessibility:** If a screen reader encounters an unknown role, it may fall back to the element's default semantics, leading to a confusing experience. For instance, a layout table without a valid `presentation` role may still be announced as a data table.
- **Browser consistency:** Invalid ARIA values can lead to unpredictable behavior across different browsers and assistive technologies.

To fix this, simply replace `presentational` with `presentation` or `none`.

## Examples

### ❌ Incorrect: using the invalid `presentational` role

```html
<table role="presentational">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
```

### ✅ Correct: using `presentation`

```html
<table role="presentation">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
```

### ✅ Correct: using `none` (synonym for `presentation`)

```html
<table role="none">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
```

### Other elements where this applies

The `presentation` / `none` role can be used on various elements, not just tables. Here's another common example with an image used purely for decoration:

```html
<!-- ❌ Incorrect -->
<img src="divider.png" alt="" role="presentational">

<!-- ✅ Correct -->
<img src="divider.png" alt="" role="presentation">
```

### When to use `presentation` vs. `none`

Both `presentation` and `none` are functionally identical. The `none` role was introduced later as a clearer name, since `presentation` can be confused with visual presentation. For maximum browser support, some developers use both:

```html
<table role="none presentation">
  <tr>
    <td>Layout content</td>
  </tr>
</table>
```

This fallback pattern ensures that older assistive technologies that don't recognize `none` will still pick up `presentation`. However, in most modern environments, either value alone is sufficient.