Elements whose role is none or presentation must not conflict with other roles.
How to Fix the Problem
Correct markup solutions
presentation-role-conflict rule has two markup patterns that pass test criteria:
<li role="none"></li> <li role="presentation"></li>
Ensure that each element with
role="presentation"does not have one of the following characteristics:
- A global ARIA attribute
- Is focusable (either natively or using
Incorrect markup solutions
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="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.
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=“presentation” to ensure they do not have a global ARIA attribute and are not focusable.