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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-none-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/)

An element with a `tabindex` attribute is interactive and focusable by the user, which conflicts with `role="none"` (or its synonym `role="presentation"`), because that role tells assistive technologies to ignore the element's semantics.

When a browser encounters this conflict, it ignores the `role="none"` declaration and keeps the element's native semantics. The element remains in the tab order and is announced normally by screen readers. The `role="none"` has no effect, so the code is misleading.

The `role="none"` role strips an element of its implicit ARIA semantics. A `<table role="none">`, for example, is no longer announced as a table. But the HTML spec requires browsers to preserve semantics on any element that is focusable. An element with `tabindex` is focusable by definition, so the two attributes contradict each other.

To fix this, decide what the element should actually do. If the element should be focusable and interactive, remove `role="none"`. If the element should have no semantics and no interaction, remove `tabindex`.

## Example with the issue

```html
<div role="none" tabindex="0">
  Click me
</div>
```

The validator warns that `role="none"` is ignored here because `tabindex="0"` makes the element focusable.

## Fixed examples

Remove `role="none"` if the element should remain focusable:

```html
<div tabindex="0">
  Click me
</div>
```

Or remove `tabindex` if the element should truly have no semantics and no keyboard interaction:

```html
<div role="none">
  Click me
</div>
```