• June 30, 2025

Accessibility Rule: Avoid Conflicts with role="presentation" or role="none"

Rule ID: presentation-role-conflict
Ruleset: axe-core 4.10
User Impact: Minor
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, EN 301 549

How to Fix the Problem

When using the role="presentation" or role="none" on HTML elements, you are explicitly instructing assistive technologies to ignore these elements in the accessibility tree. However, to ensure this instruction is honored, certain restrictions must be followed:

✅ Valid Usage (Correct Markup Patterns):

These examples are correct because:

• They do not include any global ARIA attributes.

• They are not focusable (they don’t use tabindex and aren’t inherently interactive).

❌ Invalid Usage (Incorrect Markup Patterns):

These examples fail because:

• The <li> uses a global ARIA attribute (aria-hidden="true") which conflicts with the presentation role.

• The <button> is natively focusable and interactive, which contradicts the instruction to ignore it.

• The <img> has a tabindex="0" making it focusable, thus remaining in the accessibility tree.

✔️ Best Practices:

• Do not use role="presentation" or role="none" on interactive or focusable elements.

• Do not apply global ARIA attributes to elements with these roles.

• Use these roles only on purely decorative or layout-related elements that do not require user interaction or additional semantic meaning.

Why it Matters

The role="presentation" and role="none" are used to strip elements of their semantic meaning and remove them from the accessibility tree. This can be helpful for purely visual or layout elements. However, if an element also includes ARIA attributes or is focusable, assistive technologies will not ignore it.

This conflict undermines the original intent and can confuse screen reader users. They may encounter interactive or labeled elements that were meant to be hidden, leading to a frustrating and confusing experience.

Rule Description

This rule ensures that elements assigned the role="none" or role="presentation" are truly hidden from the accessibility tree and do not conflict with other semantic or interactive features.

The Algorithm (in Simple Terms)

1. Find all elements with role="none" or role="presentation".

2. For each:

   • Check if it has any global ARIA attributes (like aria-hidden, aria-label, etc.). If it does → Fail.

   • Check if it is focusable (either natively, like <button>, or using tabindex). If so → Fail.

3. If neither condition is true → Pass.