Back to Info and Examples for Accessibility Insights for Web
aria-required-parent
Certain ARIA roles must be contained by particular parent elements.
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 <li> element with role="option" is to be treated as a selectable option in a listbox control, not as a static list item.
Some ARIA "child" roles identify managed controls that are always part of a larger composite control, identified by a "parent" role.
For example, role="option" identifies a child control that is managed by a parent control identified by role="listbox". People who use assistive technologies might find it difficult or impossible to use a child control if its managing control lacks the required parent role.
How to fix
- Identify the ARIA role that best identifies the element’s function.
- In the Chrome or Edge accessibility pane, examine the elements serving as the managed controls to verify they have the correct "child" role attributes.
- Identify (or add) the element serving as the managing control and add the appropriate "parent" role to it.
- Apply any ARIA state and property attributes that are required for the given roles.
- 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 details about composite widgets and their required roles, see WAI-ARIA Authoring Practices 1.1: Design Patterns and Widgets.
Example
Fail
<a> elements have the correct "child" roles ( menuitem ), but the managing <ul> element is missing the required "parent" role ( menu or menubar ).
Because assistive technologies can’t identify this code as a menu, some users don’t know how to interact with it.<li>
<a role="menuitem" href="#" tabindex="0">Profile</a>
<li>
<a role="menuitem" href="#" tabindex="0">Preferences </a>
</li>
</ul>
Pass
menuitem children is marked with role="menu". Assistive technologies can inform users that the managing control is a menu.
In addition, the menu has been given an accessible name by adding an aria-label attribute to the parent element. All <li> elements should be marked with role="none" to remove the implied listitem role.<li role="none">
<a role="menuitem" href="#" tabindex="0">Profile</a>
<li role="none">
<a role="menuitem" href="#" tabindex="0">Preferences </a>
</li>
</ul>
About this rule
This rule passes if:
- Required ARIA parent is present