Back to Info and Examples for Accessibility Insights for Web
presentation-role-conflict
The use of role="none" or role="presentation" on HTML elements must not conflict with the implicit functionality of the element, and must not be in conflict with other specified global ARIA attributes.
Why it matters
An ARIA role attribute can be added to an element to instruct assistive technologies to treat the element as something other than its native HTML element type. For example, an <a> element with role="button" is to be treated as a button, not a link.
Assistive technologies will often report an element’s role when the role has semantics important to accessibility. For example, they inform users when they encounter links, buttons, headings, or images. However, they generally ignore exposing properties of semantically neutral (generic) elements, such as <span> or <div> elements.
The role=“presentation” or role=“none” attributes instruct assistive technologies to disregard the element’s implicit role without hiding its content from users. However, in some cases HTML elements will not respect a role="none" or role="presentation". Generally this occurs when an element has implicit behaviors or explicit properties which are important to accessibility, and they conflict with the specified presentational roles. As a result, the roles are ignored and users will continue to be able to interact with the element as if the specified role was not present.
How to fix
For each element with role="none" or role="presentation":
- Make sure it doesn’t have a global ARIA attribute.
- Make sure it's not focusable.
Note: an element with tabindex="-1" is removed from the web page's tabbing order. It is, however, still focusable.
Example
Fail
<article> has a global ARIA attribute of aria-label in addition to the role="presentation", and because of its tabindex attribute, it is also a focusable element. This causes a failure due to conflict between the global ARIA attribute, the element being focusable, and the presentational role.Pass
<article> has an empty ARIA attribute of aria-label="" in addition to the role="presentation". Its tabindex attribute has been removed. Now, the element's implicit article role is not reported to the browser's accessibility tree, because the conflicting properties which were important to accessibility (named element and being focusable) have been removed.About this rule
This rule passes if ALL of the following are true:
- all elements with
role=“none”orrole=“presentation”do not have a global ARIA attribute. - all elements with
role=“none”orrole=“presentation”are not focusable.
More examples
Using ARIA: Use of Role=presentation or Role=none
Understanding Success Criterion 1.3.1: Info and Relationships