ARIA Required Parent Rule: Ensuring Proper Parent Roles for ARIA Elements
Rule ID: aria-required-parent
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 ensure accessibility and compatibility with assistive technologies, all ARIA roles must be properly nested within their required parent roles. This hierarchy allows screen readers and other assistive tools to understand and communicate relationships between elements effectively.
Steps to Fix:
-
Identify ARIA roles in your code that have a required parent role.
-
Check the parent element: Ensure the ARIA role is nested inside an element with the correct parent role.
-
Correct the structure: If the required parent is missing, restructure the DOM to include the appropriate parent.
-
Use relationship attributes properly: Consider using ARIA attributes that clarify the relationship, such as:
-
aria-owns– for defining ownership across non-nested elements. -
aria-controls– to indicate control relationships between widgets. -
aria-labelledby/aria-describedby– for labeling and descriptions. -
aria-activedescendant– for focus management in composite widgets. -
aria-posinsetandaria-setsize– to convey position and grouping information.
-
Example:
If a role="listitem" is used, it must be inside a container with role="list", role="group", or other allowed parent roles:
Incorrect:
Why it Matters
ARIA roles define the structure and behavior of elements for users relying on assistive technologies. If an ARIA role that requires a parent role is not properly nested, screen readers cannot interpret its context or hierarchy, leading to confusion or completely missed content.
For example, in a tree or menu structure, the hierarchy of parent-child relationships is vital for navigation. Failing to define parent roles disrupts this hierarchy and can make the component unusable for keyboard and screen reader users.
Rule Description
Certain ARIA roles must be placed inside specific parent roles to function correctly. These relationships are defined in the WAI-ARIA specification and enforced by tools like axe-core to ensure accessible, meaningful UI structures.
The Algorithm (in simple terms)
The checker scans the document for all elements with ARIA roles and verifies whether each role that requires a parent is correctly nested within an allowed parent role. If the required parent is missing or incorrect, the element fails the check.