A: Certain ARIA roles must be contained within specific, higher-level parent roles (WCAG 1.3.1)
aria-required-parent
Ensure that elements with ARIA roles that require parent roles are also included in these.
This means
Certain roles require a specific parent container – e.g., tab → tablist, option → listbox, menuitem → menu/menubar, radio → radiogroup, treeitem → tree, listitem → list. If the parent context is missing, the structure is not recognizable for assistive technologies.
Impact
Screen reader announcements, keyboard navigation, and focus logic do not work reliably. This makes orientation and operation difficult and violates WCAG 1.3.1 (A).
Recommendation
- If possible, use native HTML (<ul>/<li>, <fieldset>/<legend>, <button>).
- Nest roles correctly and map them in the DOM (do not replace with aria-owns).
Example
Problematic:
<div role="tab">About us</div>Better:
<div role="tablist"><button role="tab">About us</button></div>