Back to Info and Examples for Accessibility Insights for Web
aria-required-attr
Required ARIA attributes must be provided.
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" is to be treated as a button, not a link.
Some ARIA role attributes require additional ARIA attributes to communicate the control’s properties or current state. People who use assistive technologies might find it difficult or impossible to use an element that’s missing a required ARIA attribute.
How to fix
- Identify the ARIA role that best identifies the element’s function.
- Examine the element in the Chrome or Edge accessibility pane to verify that it has the correct role attribute.
- Apply any ARIA state and property attributes that are required for the given role.
- Make sure the value of each ARIA property attribute is correct.
- Make sure the value of each ARIA state attribute updates as needed to reflect the element’s current state.
For a list of roles and their required attributes, see ARIA in HTML: ARIA Roles, States, and Properties.
Example
Fail
<div> element ha an ARIA role attribute ( role="checkbox" ) that correctly identifies it to assistive technologies as a checkbox. However, the aria-checked state attribute required for that role is missing.
People who use assistive technologies can’t tell whether the checkbox is checked.<div role="checkbox" tabindex="0">Keep me signed in</div>
Pass
aria-checked attribute has been added to the element.
The attribute’s value is updated through scripting (not shown) to ensure it always communicates the correct current state to assistive technologies.<div role="checkbox" aria-checked="false" tabindex="0">Keep me signed in</div>
About this rule
This rule passes if:
- All ARIA attributes required for the given role are present