Elements whose role is none or presentation must not conflict with other roles
Start building more accessible experiences
Compliance Data & Impact
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>-
Ensure that each element with
role="none"orrole="presentation"does not have one of the following characteristics:- A global ARIA attribute
- Is focusable (either natively or using
tabindex)
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
Deque University Course Pages (subscription required)
No related course information available.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: