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
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
- 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.
<article>has a global ARIA attribute of
aria-labelin addition to the
role="presentation", and because of its
tabindexattribute, 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.
<article>has an empty ARIA attribute of
aria-label=""in addition to the
tabindexattribute has been removed. Now, the element's implicit
articlerole 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=“presentation”do not have a global ARIA attribute.
- all elements with
role=“presentation”are not focusable.