aria-allowed-attr

Ensure that elements use only ARIA attributes that are allowed for their corresponding ARIA role.

Description

Ensure that you adhere to ARIA specifications by using valid ARIA attributes and fulfilling any additional requirements specified for roles, states, and properties, such as being part of a larger structure, requiring specific attributes, or necessitating programmatically managed states.

Why is it important?

Ensure that ARIA property and state attributes are used appropriately by matching them with the corresponding ARIA roles. Mismatches between an element’s role and its state or property attributes can lead to assistive technologies ignoring or responding unexpectedly to these attributes, making the element difficult or impossible to use for individuals relying on assistive technologies.

Examples

• Success:

  • A <span> element with role="checkbox" has an attribute aria-checked="true".

• Failure:

  • A <span> element with role="checkbox" has an attribute aria-expanded="true".

How to fix?

Refer to ARIA in HTML - Document conformance requirements for use of ARIA attributes in HTML to know which ARIA attributes should be used with different HTML elements.

Tags

cat.aria, wcag2a, wcag412

References

• WCAG 4.1.2: Name, Role, Value
• Deque University: aria-allowed-attr
• Accessibility Insights: aria-allowed-attr
• Evinced Digital Accessibility Knowledge Base: aria-allowed-attr