ARIA Required Children
Rule ID: aria-required-children
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549
How to Fix the Problem
To address the aria-required-children issue, ensure that all elements assigned ARIA roles that require specific child roles actually contain those children. ARIA defines certain parent roles that must include specific child roles in order to function correctly for assistive technologies.
For example, a role="list" must contain elements with role="listitem", and a role="table" must include appropriate child roles like row, columnheader, or cell.
Steps to fix:
-
Review the ARIA role of the element in question.
-
Consult WAI-ARIA specifications to determine what children are required for that role.
-
Check your HTML structure to ensure the required child roles are present within the ARIA parent.
-
Do not assume visual nesting is sufficient; explicit ARIA role markup must also reflect this relationship.
-
If the visual or DOM structure does not match the intended hierarchy, use ARIA attributes like
aria-ownsto explicitly declare relationships.
Common attributes that imply child-parent relationships and should be checked:
-
aria-activedescendant -
aria-controls -
aria-describedby -
aria-flowto -
aria-labelledby -
aria-owns -
aria-posinset -
aria-setsize
Make sure these attributes and the roles they reference are implemented correctly and supported with the appropriate structural relationships.
Why it Matters
Assistive technologies rely heavily on ARIA roles and their relationships to convey the structure and purpose of content to users with disabilities. When required children are missing from ARIA parents:
-
Screen readers and other tools may misinterpret the interface.
-
Users may lose context or be unable to interact with complex widgets like trees, lists, or tables.
-
Critical navigation and accessibility functionality can break, leading to a poor or even unusable experience.
By ensuring required child roles are present, you help maintain semantic clarity and make your content accessible to a broader range of users.
Rule Description
Certain ARIA roles are only valid when they include specific required children. For instance, a combobox must include or be associated with elements having roles such as textbox and listbox. This rule ensures that such structural dependencies are enforced to support accessibility features properly.
The Algorithm (in simple terms)
-
Scan all elements with ARIA roles.
-
For each role, check if it has defined required children in the WAI-ARIA specification.
-
Confirm that these required child roles exist as direct or referenced children.
-
Flag any element where the required children are missing.