Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web

aria-allowed-role

Elements must use only ARIA roles appropriate for that element.

Why it matters

An ARIA role  attribute can be added to an element to instruct assistive technologies to expose the element as something other than its native HTML element type. For example, an <a> element with role="button" is to be exposed as a button, not a link.

Some ARIA roles are only appropriate to specify on certain elements. The reason for this is that some HTML elements have have what's referred to as "strong native semantics" - meaning that these elements have implicit ARIA semantics and features which can contradict, or cause uncertain behaviors for AT when developers specify ARIA roles on elements which do not share these native semantics. As a result, people who use assistive technologies might find the element difficult or impossible to use, or the explicitly set role may be entirely ignored to mitigate the contradictory semantics the developer has specified.

How to fix

  1. Examine the element in the Chrome or Edge accessibility pane to verify that it has the correct role attribute.

  2. As necessary, review the ARIA in HTML specification to see which roles are allowed on specific HTML elements.

  3. Identify the ARIA role that best identifies the element’s function.

  4. Assign a valid ARIA role if needed.
    Note: Some ARIA roles, while technically valid, are not widely supported by assistive technologies.

Example

 

Fail

This button has an article role which is not appropriate as buttons are interactive elements and articles are not. As such, people who use assistive technologies will not be able to effectiely interact with it, as its functionality will be obscured to them.
<button role="article" >I really am a button</button>
 

Pass

Removing the role=”article” from the button ensures everyone can correctly interact with the element.
<button >I am a button</button>

About this rule

This rule passes if ALL of the following are true:

  • Elements with explicit role attributes have values that are both valid ARIA roles, and the role is allowed on the element to which it is specified.
  • The role is widely supported in screen readers and other assistive technologies.

More Examples

Accessible Rich Internet Applications (WAI-ARIA) 1.2: Categorization of Roles

ARIA in HTML: ARIA Roles, States, and Properties allowed per HTML element

Understanding Success Criterion 4.1.2: Name, Role, Value

Understanding Success Criterion 1.3.1: Info and Relationships