Elements whose role is none or presentation must not conflict with other roles

Rule ID: presentation-role-conflict
Ruleset: axe-core 4.1
User Impact: Minor
Guidelines: Deque Best Practice
 

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Compliance Data & Impact

User Impact

Minor
Minor
Critical

Disabilities Affected

  • Blind
  • Low Vision
  • Mobility

Standard(s)

  • Deque Best Practice

    How to Fix the Problem

    Correct markup solutions

    The presentation-role-conflict rule has two markup patterns that pass test criteria:

    <li role="none"></li>
    
    <li role="presentation"></li>
    1. Ensure that each element with role="none" or role="presentation" does not have one of the following characteristics:

    Incorrect markup solutions

    The presentation-role-conflict rule has three markup patterns that fail testing criteria:

    <li role="none" id="global-attr" aria-hidden="true"></li>
    
    <button id="natively-focusable" role="none"></button>
    
    <li role="presentation" id="tabindex" tabindex="0"></li>

    Why it Matters

    There are certain cases where the semantic role of an element with role="none" or role="presentation" does not resolve to none or presentation (respectively). When this happens, the element is not removed from the accessibility tree (as expected) and screen readers are able to interact with it.

    To ensure the element remains removed from the accessibility tree, you should not add any global ARIA attributes to the element or make if focusable.

    Rule Description

    Ensures elements which are marked to be removed from the accessibility tree are in fact removed.

    The Algorithm (in simple terms)

    Checks all elements with role=“none” or role=“presentation” to ensure they do not have a global ARIA attribute and are not focusable.

    Resources

    Refer to the complete list of axe 4.1 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: