# The “presentation” role does not affect elements that have a “tabindex” attribute.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-presentation-role-does-not-affect-elements-that-have-a-tabindex-attribute
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Browsers ignore `role="presentation"` on an element that has a `tabindex` attribute, because any `tabindex` value makes the element focusable and a focusable element keeps its semantics.

`role="presentation"` (and its synonym `role="none"`) removes an element's implicit role, so assistive technologies read its content without announcing the element itself. WAI-ARIA has a conflict rule for this case: when the element is focusable, browsers must ignore the presentation role and expose the element's implicit role. A user who tabs or clicks onto an element has to be told what it is.

Any `tabindex` value triggers that rule, including `tabindex="-1"`. A negative value keeps the element out of the Tab sequence, but a script or a mouse click can still focus it. Elements like `div`, `span` and `img` aren't focusable to begin with, so adding `tabindex="-1"` to them removes nothing from the tab order and only makes them focusable.

Decide what the element is for. If it only wraps content for layout or styling, remove `tabindex`. If it has to receive focus, remove `role="presentation"`. A decorative image needs neither attribute: `alt=""` on its own already takes it out of the accessibility tree.

## Invalid example

```html
<div class="thumbnail" role="presentation" tabindex="-1">
  <img src="harbor.jpg" alt="Harbor at sunset">
</div>
```

## Valid example

Remove `tabindex` when the wrapper is only there for layout:

```html
<div class="thumbnail" role="presentation">
  <img src="harbor.jpg" alt="Harbor at sunset">
</div>
```

Or remove `role="presentation"` when the element has to be focusable:

```html
<div class="thumbnail" tabindex="-1">
  <img src="harbor.jpg" alt="Harbor at sunset">
</div>
```