Features
Start a free trial

Ensure role attribute has an appropriate value for the element

Rule ID: aria-allowed-role User Impact: minor Guidelines: Best Practices

The role attribute in HTML defines an element's purpose to assistive technologies. Assigning inappropriate ARIA roles to elements can disrupt accessibility, leading to confusion for users relying on screen readers and other assistive tools.

About This Rule

This guideline ensures that ARIA roles are used appropriately for each element, preventing conflicts and enhancing accessibility for users relying on assistive technologies. Adhering to this practice aligns with Deque's best practices.

Why It Matters

Using WAI-ARIA roles where they are not allowed can interfere with the accessibility of the web page. An invalid HTML element and ARIA role combination may result in no effect on the accessibility of the application and, at worst, may trigger behavior that disables accessibility for entire portions of an application. When ARIA roles are used on HTML elements that are not in accordance with the HTML in ARIA specification, they conflict with the semantics of the elements, causing assistive technology products to report nonsensical user interface (UI) information that does not represent the actual UI.

How to Fix

To ensure appropriate use of ARIA roles:

  • Assign Roles Permitted for the Element: Ensure that the role assigned to an element is allowed for that element according to the HTML in ARIA specification.
    Copy code
    <ul role="menu">
  <li role="none">
    <button role="menuitem">Start</button>
  </li>
</ul>
  • Avoid Assigning Roles to Elements with Default Semantics: Elements like <button> and <a> have inherent roles. Adding a role that conflicts with these default semantics can confuse assistive technologies.
    Copy code
    <!-- Avoid this -->
<button role="heading" aria-level="2">Welcome</button>
  • Consult the ARIA in HTML Specification: Refer to the specification to determine which roles are appropriate for each element.

Examples

Incorrect

Assigning a role not permitted for the element:

Copy code
<ul role="button">Name</ul>

Correct

Assigning an appropriate role to the element:

Copy code
<ul role="menu">
  <li role="none">
    <button role="menuitem">Start</button>
  </li>
</ul>

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: