Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web


ARIA roles must have valid values.

Why it matters

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

When an assistive technology encounters an element whose role attribute has an invalid value, it might ignore the element or respond to it in an unexpected way. As a result, people who use assistive technologies might find the element difficult or impossible to detect or use.

How to fix

Provide a valid value for the role attribute:

  • Make sure the value is spelled correctly.
  • Make sure the role value exists. (For example, a common mistake is to specify the invalid role "footer" when the valid role is "contentinfo".)
  • Make sure the role is not abstract.

For a list of valid ARIA roles, see Accessible Rich Internet Applications (WAI-ARIA) 1.1: Categorization of Roles. Note that some ARIA roles, while technically valid, are not widely supported by assistive technologies. This rule will fail when such roles are used.




The children of this radiogroup have invalid role attribute values. Assistive technologies can’t report their roles and might not report the elements at all.
<div role="radiogroup" aria-labelledby="size" id="rg1">
<h3 id="size">T-shirt size:</h3>
<div role="radiobutton" aria-checked="false" tabindex="0">Small</div>
<div role="radiobutton" aria-checked="false" tabindex="-1">Medium</div>
<div role="radiobutton" aria-checked="false" tabindex="-1">Large</div>


The children have valid role attribute values. Assistive technologies can report the elements as radio buttons.
<div role="radiogroup" aria-labelledby="size" id="rg1">
<h3 id="size">T-shirt size:</h3>
<div role="radio" aria-checked="false" tabindex="0">Small</div>
<div role="radio" aria-checked="false" tabindex="-1">Medium</div>
<div role="radio" aria-checked="false" tabindex="-1">Large</div>

About this rule

This rule passes if ALL of the following are true:

  • ARIA role is valid
  • ARIA role is not an abstract role
  • The role is widely supported in screen readers and other assistive technologies

More examples