aria-required-parent
Ensures elements with an ARIA role that require parent roles are contained by them.
Description
For the accessibility features to work as intended, specific ARIA roles must be contained by specific parent roles.
Why is it important?
To direct assistive technologies to handle an element differently than its default HTML element type, an element can be given an ARIA role property. For instance, a listbox control should consider a li
element with the role="option"
as a selectable option rather than a static list item.
If a child control’s managing control lacks the necessary parent function, people who use assistive technologies may find it challenging or impossible to use it.
Examples
-
Success:
- The
role="menu"
tag is used to identify the parent of the“menuitem”
children. Users of assistive technologies are informed that a menu is the managing control. The parent element also has an“aria-label"
attribute to give the menu a visible name. To eliminate the implied listitem role, allli
elements should be marked withrole="none"
.
- The
-
Failure:
- The managed
a
elements have the necessary"parent"
roles (for examplemenu
ormenubar
), but the managingul
element is lacking the necessary"child"
roles (menuitem
). Some users are unable to interact with this code because assistive technologies cannot recognise it as a menu.
- The managed
How to fix?
Ensure all ARIA roles are contained by their required parent element, if any.
The following relationship properties are available in ARIA:
aria-activedescendant
-
aria-controls
(used primarily by elements where the role is group, region, or widget) aria-describedby
-
aria-flowto
(used primarily to provide alternate reading/tab order to skip past ads or complementary regions) aria-labelledby
-
aria-owns
(used primarily to identify which elements belong to the group) aria-posinset
aria-setsize
Tags
cat.aria, wcag2a, wcag131
References
- WCAG 1.3.1: Info and Relationships
- Deque University: aria-required-parent
- Accessibility Insights: aria-required-parent
- Evinced Digital Accessibility Knowledge Base: aria-required-parent
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!