---
title: ARIA Required Child Roles | Accessibility Rule
description: Specific ARIA roles must contain particular children
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/aria-required-children
  md: https://testingbot.com/support/accessibility/web/rules/aria-required-children/index.md
---
# Ensure elements with an ARIA role that require child roles contain them

Rule ID: aria-required-childrenUser Impact: criticalGuidelines: WCAG 2.0

Certain ARIA roles must contain specific child elements with designated roles to function correctly.

## About This Rule

This rule checks that elements with ARIA roles contain the required child elements with appropriate roles, as specified in the [WAI-ARIA guidelines](https://www.w3.org/TR/wai-aria-1.1/#roles). Ensuring the correct parent-child role relationships is essential for assistive technologies to convey the intended meaning and functionality to users.

## Why It Matters

The WAI-ARIA specification defines allowable and required child and parent roles for each ARIA role. If an element with a specific ARIA role lacks the necessary child roles, assistive technologies may not interpret the element as intended, leading to accessibility issues. For example, a `tree` role should contain elements with the `treeitem` role to ensure proper functionality and user understanding.

## How to Fix

Ensure that elements with ARIA roles include the required child elements:

- Review the WAI-ARIA specifications to identify required child roles for each parent role.
- Modify the DOM structure to include necessary child elements with appropriate roles.
- Use ARIA relationship attributes like [aria-owns](https://www.w3.org/TR/wai-aria-1.1/#aria-owns) or [aria-controls](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) to define relationships when the DOM hierarchy does not reflect the required structure.

### Example

#### Fail

A `tree` element without any `treeitem` children:

    <div role="tree">
      <!-- Missing treeitem elements -->
    </div>

#### Pass

A `tree` element with the required `treeitem` children:

    <div role="tree">
      <div role="treeitem">Item 1</div>
      <div role="treeitem">Item 2</div>
    </div>

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [aria-required-parent](https://testingbot.com/support/accessibility/web/rules/aria-required-parent)
- [aria-roles](https://testingbot.com/support/accessibility/web/rules/aria-roles)
- [aria-toggle-field-name](https://testingbot.com/support/accessibility/web/rules/aria-toggle-field-name)
- [aria-tooltip-name](https://testingbot.com/support/accessibility/web/rules/aria-tooltip-name)
- [aria-valid-attr-value](https://testingbot.com/support/accessibility/web/rules/aria-valid-attr-value)