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

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>

Learn more:

MDN Reference

ARIA: presentation role - MDN

→

MDN Reference

tabindex - HTML global attribute - MDN

→

W3C Reference

Accessible Rich Internet Applications (WAI-ARIA) 1.2

→