Elements with role='presentation' or role='none' must not be focusable or have global ARIA attributes.

When an element has role="presentation" or role="none", it signals that the element is purely decorative. The browser should strip the element's semantic meaning from the accessibility tree, making it invisible to assistive technologies like screen readers. However, a conflict occurs when the same element is also focusable (via tabindex or by being a natively focusable element) or carries global ARIA attributes (such as aria-label, aria-describedby, or aria-live). These attributes and behaviors communicate meaning or interactivity to assistive technologies, which directly contradicts the "this is decorative" declaration.

When this conflict happens, browsers resolve it by ignoring the presentation role and exposing the element in the accessibility tree. The element ends up exposed but in an unpredictable state: it may lack a proper role or accessible name, depending on how the conflicting attributes interact. Screen reader users may encounter an element that is announced in confusing or incomplete ways. The experience also varies across browsers and assistive technologies, since implementations of the presentational role conflict resolution differ.

This rule relates to WCAG success criterion 4.1.2 (Name, Role, Value) at Level A, which requires that all user interface components have programmatically determinable names and roles. An element caught in this conflict may end up with an ambiguous or missing role in the accessibility tree, breaking that requirement. When the conflict involves decorative non-text content (like images), it can also fail success criterion 1.1.1 (Non-text Content), which requires decorative images to be implementable in a way assistive technologies can ignore.

How to fix it

The fix depends on the author's actual intent:

If the element is truly decorative, remove anything that makes it focusable or communicates information to assistive technologies. Remove tabindex, global ARIA attributes like aria-label or aria-describedby, and ensure the element is not natively focusable (e.g., an <a> with href or a <button>).

If the element has meaning or interactivity, remove role="presentation" or role="none" and assign an appropriate role instead. Keep the ARIA attributes and focusability that reflect the element's purpose.

A third option: if the element should be both decorative and hidden from keyboard navigation, add aria-hidden="true" and tabindex="-1" to remove it from both the accessibility tree and the tab order. But only do this when the element genuinely has no function for any user.

Examples

Incorrect: presentation role with a global ARIA attribute

This image has role="none" but also carries aria-label, which is a global ARIA attribute. The two declarations conflict.

<img
  src="logo.png"
  role="none"
  aria-label="Company logo" />

The browser will ignore role="none" and expose the image, but its semantic state may be inconsistent across assistive technologies.

Correct: decorative image without conflicting attributes

If the image is decorative, remove the ARIA attribute and use an empty alt instead:

<img
  src="logo.png"
  role="none"
  alt="" />

Or simply rely on the empty alt attribute alone, which already marks the image as decorative:

<img src="logo.png" alt="" />

Incorrect: presentation role on a focusable element

This div has role="presentation" but is focusable through tabindex="0". A screen reader user will land on an element with no announced role or purpose.

<div role="presentation" tabindex="0">
  Click here for more info
</div>

Correct: remove the presentation role and add a proper role

If the element is interactive, give it an appropriate role and accessible name:

<div role="button" tabindex="0" aria-label="More info">
  Click here for more info
</div>

Or if the element is truly decorative, remove tabindex:

<div role="presentation">
  Click here for more info
</div>

Incorrect: presentation role with aria-live

The aria-live attribute is a global ARIA attribute, so it conflicts with the presentation role.

<div role="none" aria-live="polite">
  Status: loading...
</div>

Correct: remove the presentation role for a live region

<div role="status" aria-live="polite">
  Status: loading...
</div>

Correct: hiding a decorative element completely

When an element should be invisible to both assistive technologies and keyboard users:

<img
  src="decorative-swirl.png"
  alt=""
  aria-hidden="true" />

Learn more:

W3C Reference

Understanding ARIA: Using the presentation role

→

MDN Reference

MDN: Using the presentation role

→

MDN Reference

MDN: Using the none role

→