Certain ARIA roles must contain particular children

The WAI-ARIA specification defines a strict hierarchy for many roles, where parent and child relationships must be maintained for the accessibility semantics to work as intended. For example, an element with role="list" must contain elements with role="listitem", just as a role="menu" must contain role="menuitem" (or related menu item roles). When these required child roles are absent, assistive technologies like screen readers cannot properly convey the structure of the component. A screen reader user navigating a tree view, for instance, needs to understand the parent container, individual items, and sibling relationships — none of which are communicated correctly if the expected child roles are missing.

This issue critically affects users who are blind, deafblind, or have mobility impairments and rely on assistive technologies to navigate and interact with complex widgets. Without the correct role hierarchy, these users may not understand what type of content they’re interacting with, how many items exist, or how to navigate between them.

This rule relates to WCAG 2.0/2.1/2.2 Success Criterion 1.3.1: Info and Relationships (Level A), which requires that information, structure, and relationships conveyed through presentation can be programmatically determined. When ARIA roles lack their required children, the structural relationships are broken and cannot be programmatically determined by assistive technologies.

There are two ways the required parent-child relationship can be established:

• DOM structure: The child elements with the required roles are direct descendants (or appropriate descendants) of the parent element in the DOM.
• aria-owns: When the DOM hierarchy doesn’t match the intended accessibility tree structure, the aria-owns attribute can be used on the parent to explicitly associate child elements that exist elsewhere in the DOM.

How to Fix

1. Identify the ARIA role on the parent element.
2. Consult the WAI-ARIA specification to determine which child roles are required for that parent role.
3. Ensure all direct children (or owned children via aria-owns) have the correct required roles.
4. If you cannot add the required child roles, consider whether the parent role is appropriate for your use case, or use native HTML elements that provide these semantics automatically.

Common Parent-Child Role Requirements

Examples

Incorrect: Missing required child roles

This tablist has children that lack the required tab role:

<div role="tablist">
  <div>Tab 1</div>
  <div>Tab 2</div>
  <div>Tab 3</div>
</div>

This list contains <div> elements without the listitem role:

<div role="list">
  <div>Apple</div>
  <div>Banana</div>
  <div>Cherry</div>
</div>

This menu has children with incorrect roles:

<div role="menu">
  <div role="option">Cut</div>
  <div role="option">Copy</div>
  <div role="option">Paste</div>
</div>

Correct: Required child roles present

The tablist now contains children with role="tab":

<div role="tablist">
  <div role="tab" aria-selected="true">Tab 1</div>
  <div role="tab">Tab 2</div>
  <div role="tab">Tab 3</div>
</div>

The list contains children with role="listitem":

<div role="list">
  <div role="listitem">Apple</div>
  <div role="listitem">Banana</div>
  <div role="listitem">Cherry</div>
</div>

The menu contains children with role="menuitem":

<div role="menu">
  <div role="menuitem">Cut</div>
  <div role="menuitem">Copy</div>
  <div role="menuitem">Paste</div>
</div>

Correct: Using aria-owns for children outside the DOM hierarchy

When required children are not direct descendants in the DOM, use aria-owns to establish the relationship:

<div role="tablist" aria-owns="tab1 tab2 tab3">
<!-- Tabs may be rendered elsewhere in the DOM -->

</div>

<div role="tab" id="tab1" aria-selected="true">Tab 1</div>
<div role="tab" id="tab2">Tab 2</div>
<div role="tab" id="tab3">Tab 3</div>

Correct: Using native HTML elements instead

Native HTML elements automatically provide the correct role relationships without any ARIA attributes:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Whenever possible, prefer native HTML elements over ARIA roles. Native elements come with built-in semantics, keyboard behavior, and accessibility support that don’t require manual role management.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA 1.1 - The Roles Model

→