Ensure elements marked as presentational do not have global ARIA or tabindex so that all screen readers ignore them

The presentation-role-conflict rule ensures that elements with role="none" or role="presentation" are truly removed from the accessibility tree and are not made focusable or given global ARIA attributes.

What is being tested?

This rule checks that elements using role="none" or role="presentation":

• Do not have any global ARIA attributes (such as aria-hidden).
• Are not focusable (either natively like a <button> or with tabindex).

Why it matters

Using role="none" or role="presentation" indicates that an element should be ignored by screen readers. If the element has other attributes that make it focusable or interactive, it remains in the accessibility tree and can cause confusion for screen reader users.

Correct markup examples

<li role="none">...</li>

<li role="presentation">...</li>

Incorrect markup examples

<li role="none" aria-hidden="true"></li>   <!-- Has global ARIA attribute -->

<button role="none"></button>              <!-- Natively focusable element -->

<img role="presentation" tabindex="0">       <!-- Made focusable with tabindex -->

These examples fail because the element is still accessible to assistive technology despite the intent to hide it.

Best practices

• Use role="none" or role="presentation" only on elements that are purely decorative or structural.
• Do not apply global ARIA attributes like aria-hidden, aria-label, etc., to those elements.
• Ensure the element is not focusable with tabindex or native focus behavior.