Ensure ARIA attributes are not prohibited for an element's role

Elements must only use permitted ARIA attributes.

About This Rule

This rule checks that none of the attributes used with a particular role are listed as "prohibited" for that role in the latest version of the WAI-ARIA specification. For example, the aria-label and aria-labelledby attributes are prohibited on presentation and none roles, as well as on text-like roles such as code, insertion, strong, p.

For example with a <p> DOM element, you should not put a aria-label, because it has an implicit paragraph role.

For more information, please see WCAG21 name-role-value.

Why It Matters

Using ARIA attributes in roles where they are prohibited can mean that important information is not communicated to users of assistive technologies. Assistive technologies may also attempt to compensate for the issue, resulting in inconsistent and confusing behavior of these tools.

How to Fix

To resolve issues with prohibited ARIA attributes:

• Remove the prohibited attribute from the element.
• Change the role to one on which the attribute is not prohibited.
• Provide the information as text in the page.
• Move the attribute to a different element that does support it.

Example

Fail

The following example incorrectly uses the aria-label attribute on an element with the role="presentation", where it is prohibited:

<div role="presentation" aria-label="Decorative image"></div>

Pass

In this corrected example, the aria-label attribute is removed from the element with the role="presentation":

<div role="presentation"></div>