Ensure elements marked as presentational are consistently ignored

The role="none" and role="presentation" attributes tell browsers to strip the semantic meaning from an element, effectively removing it from the accessibility tree. This is useful when elements are used purely for visual layout and carry no meaningful content for assistive technology users.

However, the WAI-ARIA specification defines specific conditions under which this removal is overridden. If a presentational element has a global ARIA attribute (such as aria-hidden, aria-label, aria-live, aria-describedby, etc.) or is focusable (either natively, like a <button>, or through tabindex), the browser must ignore the presentational role and keep the element in the accessibility tree. This is known as a presentational role conflict.

When this conflict occurs, screen reader users may encounter elements that were intended to be hidden but are instead announced — potentially with confusing or missing context. This creates a disorienting experience, particularly for blind users and users with low vision who rely on screen readers to understand the page structure.

This rule is flagged as a Deque best practice. While not mapped to a specific WCAG success criterion, it supports the broader goal of ensuring the accessibility tree accurately represents the author’s intent, which contributes to a coherent experience under WCAG principles like 1.3.1 Info and Relationships and 4.1.2 Name, Role, Value.

How to Fix It

For every element with role="none" or role="presentation", ensure that:

1. No global ARIA attributes are present. Remove attributes like aria-hidden, aria-label, aria-live, aria-describedby, aria-atomic, and any other global ARIA attributes.
2. The element is not focusable. Don’t use natively focusable elements (like <button>, <a href>, or <input>) with a presentational role. Also, don’t add tabindex to a presentational element.

If the element genuinely needs a global ARIA attribute or needs to be focusable, then it shouldn’t have a presentational role — remove role="none" or role="presentation" instead.

Examples

Incorrect: Presentational element with a global ARIA attribute

The aria-hidden="true" attribute is a global ARIA attribute, which creates a conflict with role="none":

<li role="none" aria-hidden="true">Decorative item</li>

Incorrect: Natively focusable element with a presentational role

A <button> is natively focusable, so its presentational role will be ignored by the browser:

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

Incorrect: Presentational element made focusable via tabindex

Adding tabindex="0" makes the element focusable, overriding the presentational role:

<img alt="" role="presentation" tabindex="0">

Correct: Presentational element with no conflicts

These elements have no global ARIA attributes and are not focusable, so they will be properly removed from the accessibility tree:

<li role="none">Layout item</li>

<li role="presentation">Layout item</li>

<img alt="" role="presentation">

Correct: Removing the presentational role when focus is needed

If the element needs to be focusable, remove the presentational role and give it an appropriate accessible name instead:

<button aria-label="Submit form">Submit</button>

Learn more:

Deque Reference

Deque University - How To Fix

→