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

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

<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:

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

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

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

Learn more:

MDN Reference

ARIA: none role

→

MDN Reference

ARIA: presentation role

→

MDN Reference

Using the presentation role

→