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.