Skip to main content
No Result Found

aria-roles

Severity: Critical

Description

ARIA roles assigned to an element using the role attribute must be a valid one. If any element is assigned to an invalid ARIA role, screen readers and other assistive technologies can’t identify it. This makes the webpage inaccessible to users of such technologies.

Incorrect definitions of ARIA roles usually happen due to spelling mistakes and usage of invalid ARIA roles.

Example

In the following example, the role navigationmenu is an invalid ARIA role. Screen readers and other assistive technologies can’t identify what it means. This makes the code snippet inaccessible. It breaks the aria-roles rule.

Incorrect sample with role = navigationmenu
Copy icon Copy

In contrast, the following code snippet correctly uses the navigation role. Hence, this code snippet is accessible and doesn’t break the aria-roles rule.

Correct sample with role = navigation
Copy icon Copy

How to fix?

You can follow these steps to fix issues if this rule gets flagged:

  • Check if you have defined invalid values for the role attribute.
  • If so, use the correct value to fix the issue.

Reference

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle