HTML Guides for accessibility

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

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

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

<div class="thumbnail" tabindex="-1">

<img src="harbor.jpg" alt="Harbor at sunset">

</div>

The role="presentation" on this element is ignored because the element also carries a global ARIA attribute, such as aria-label or aria-describedby.

role="presentation" (and its synonym role="none") removes an element's implicit semantics so assistive technologies treat it as if it were plain content. Global ARIA states and properties, such as aria-label, aria-describedby, aria-live, and aria-hidden, are allowed on any element regardless of its role. When one of them is present, the browser cannot silence the element, because that attribute needs a role to attach to. The ARIA specification resolves this conflict by ignoring the presentation role and exposing the element's implicit role instead.

The result is that role="presentation" does nothing here, which is almost always a mistake. Decide which of the two you actually want.

If the element should stay presentational, remove the global ARIA attribute. If you need the ARIA attribute, remove role="presentation" and let the element keep its semantics.

Invalid example

The aria-label cancels the presentation role, so the <div> is not silenced:

<div role="presentation" aria-label="Main navigation">

...

</div>

Valid example

Keep the label and drop the ineffective role:

<div aria-label="Main navigation">

...

</div>

Or, if the element was only meant to be presentational, remove the ARIA attribute:

<div role="presentation">

...

</div>