Back to Info and Examples for Accessibility Insights for Web
aria-prohibited-attr
Elements with implicit or explicit ARIA roles (e.g., <p> or <div role="paragraph">) must not be provided ARIA attributes which are listed as prohibited for use with specified role, as identified in the ARIA specifications.
Why it matters
Using prohibited ARIA attributes with specific roles can result in important information not being communicated to people using assistive technologies. In certain situations it can also result in wrong or unexpected information being communicated to them.
How to fix
If the information that is meant to be conveyed by the attribute is important, then instead of removing the prohibited attribute you can do one of three things:
- Change the role to one on which the attribute is not prohibited (so long as the new role is appropriate for the element/content that is being presented to the user)
- Remove the attribute and instead provide the information as text in the page
- Move the attribute to a different element that does support it
Example
Fail
aria-label attribute is used on a paragraph element (which has an implicit paragraph role) for "Shipping Instructions. This is a text-based role which prohibits author naming (e.g., use of aria-label and aria-labelledby).<h3 id="shipping">Shipping instructions:</h3>
<div aria-labelledby="shipping">...</div>`
Pass
aria-label and aria-labelledby attributes aren't used on a text-based role.<div>Shipping instructions:</div>
<h3>Shipping instructions:</h3><div>...</div>
About this rule
This is an example of when the rule passes:
-aria-label and aria-labelledby attributes aren’t used on presentation and none roles, generic roles or equivalent elements (e.g., a <div> has an implicit generic role) on text-based roles such as paragraph, code, insertion, or strong.