What This Rule Checks
ARIA roles sometimes require a parent element with a specific role to function properly. This ensures that elements are structured in a way that assistive technologies can understand the relationships between them. For example, certain ARIA roles like menuitem or treeitem need to be contained within specific parent roles like menu or tree. Missing required parent elements can break these relationships, leading to an incomplete or confusing experience for users of screen readers.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Child roles without required parents are orphaned from their expected widget context. A tab outside a tablist won’t be recognized as part of a tab interface. Screen readers may announce it as a generic element or ignore it entirely.
How to Fix
Make sure that these ARIA attributes are used correctly and only in the right contexts.
Code Examples
<!-- Tab role outside a tablist -->
<div role="tab">Settings</div>
<div role="tabpanel">
...
</div>
Copy
<!-- Tab properly nested in tablist -->
<div role="tablist">
<div role="tab" aria-selected="true">
Settings
</div>
<div role="tab" aria-selected="false">
Profile
</div>
</div>
<div role="tabpanel">
...
</div>
Copy
Common Mistakes to Avoid
- Placing role=”option” outside of a role=”listbox” container.
- Using role=”menuitem” without wrapping it in a role=”menu” or role=”menubar”.
- Restructuring HTML that breaks the parent-child role relationship.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.
Related WCAG Criteria
- 1.3.1: Info and Relationships