aria-required-children
Ensures elements with an ARIA role that require child roles contain them.
Description
To make the webpage accessible, some ARIA parent role values applied to elements must contain specific child elements and role values.
Why is it important?
A user using assistive technology must have relevant context to traverse a website. For instance, it’s crucial to know the parent (container), item, or peers in the folder for a tree item. There are two methods to do this:
- The context is obvious from the DOM.
- When the hierarchy is different from the code structure or DOM tree, ARIA (such as aria-owns) can be used to provide relationships.
Examples
-
Success:
-
role="option"
is used to identify the listbox parent’s children that indicate controls managed by the listbox. Each listitem also has the required attribute (aria-selected) that is necessary for its function as a listitem. To guarantee that they always inform assistive technologies of the proper current status, these attribute values are updated through scripting.
-
-
Failure:
- Together, this code performs the duties of a list control. The managed
<div>
components lack the necessary “child” role (example: option) while the managing<div>
element has the proper “parent” role (example: listbox). A child element of the controlling<div>
element that shouldn’t be there is also present (example: h3).
- Together, this code performs the duties of a list control. The managed
How to fix?
Ensure the necessary child elements are included in elements with explicit or implicit ARIA roles.
The connections between elements that cannot be easily ascertained from the document structure are indicated by the values of the following attributes. The relationships are connected to characteristic tables that show values for both explicit and implicit role attributes as well as values for role attributes that nested child elements receive.
Visit WAI-ARIA Authoring Practices 1.1: Design Patterns and Widgets for more details about composite widgets and their required roles.
Tags
cat.aria, wcag2a, wcag131
References
- WCAG 1.3.1: Info and Relationships
- Deque University: aria-required-children
- Accessibility Insights: aria-required-children
- Evinced Digital Accessibility Knowledge Base: aria-required-children
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!