# Certain ARIA roles must contain particular children

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/aria-required-children
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) 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

| Parent Role | Required Child Role(s) |
|---|---|
| `list` | `listitem` |
| `menu` | `menuitem`, `menuitemcheckbox`, or `menuitemradio` |
| `menubar` | `menuitem`, `menuitemcheckbox`, or `menuitemradio` |
| `tablist` | `tab` |
| `tree` | `treeitem` or `group` |
| `grid` | `row` or `rowgroup` |
| `table` | `row` or `rowgroup` |
| `row` | `cell`, `columnheader`, `gridcell`, or `rowheader` |
| `feed` | `article` |

## Examples

### Incorrect: Missing required child roles

This `tablist` has children that lack the required `tab` role:

```html
<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:

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

This `menu` has children with incorrect roles:

```html
<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"`:

```html
<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"`:

```html
<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"`:

```html
<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:

```html
<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:

```html
<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.