aria-required-children

Certain ARIA roles only work when their required child roles are present. For example, an element with role="list" relies on one or more role="listitem" children so assistive technologies can communicate the list structure. Omitting those children results in a list with zero items, which makes no sense. When required children are added later by script or after data loads, set aria-busy="true" on the parent until the children are in place, then remove it.

Pass Patterns

A list contains the required listitem children

The role="listitem" attribute is applied to each child, giving the list the structure assistive technologies need to announce it correctly.

<div role="list">
    <div role="listitem">Product A</div>
    <div role="listitem">Product B</div>
    <div role="listitem">Product C</div>
</div>

A menu uses a list with native semantics removed for its visual display

Applying role="none" to the <ul> and <li> elements removes their native list semantics, so assistive technologies treat the role="menuitem" buttons as direct children of the menu.

<div role="menu">
    <ul role="none">
        <li role="none"><button role="menuitem">a</button></li>
        <li role="none"><button role="menuitem">b</button></li>
        <li role="none"><button role="menuitem">c</button></li>
    </ul>
</div>

Fail Patterns

A list is missing its required children

Without role="listitem" on the children, the list structure is not communicated to assistive technologies.

<div role="list">
    <div>Product A</div>
    <div>Product B</div>
    <div>Product C</div>
</div>

A menu uses a list without removing native semantics for its visual display

The <ul> and <li> elements carry their native list semantics, which conflict with the role="menu" parent.

<div role="menu">
    <ul>
        <li><button role="menuitem">a</button></li>
        <li><button role="menuitem">b</button></li>
        <li><button role="menuitem">c</button></li>
    </ul>
</div>

Try It Yourself

Using a screen reader

1. Load the page and open a screen reader.
2. Navigate to the element using standard screen-reader navigation (Arrow keys or Tab sequence, depending on the reader).
3. Listen to how the list is announced.

Expected results: The reader announces the list and the number of items, then allows item-by-item navigation.

Actual results: The reader either skips announcing the list or reads all text as a single block, preventing structured navigation.

Inspecting the browser dev-tools

1. Open the page and highlight the element with an ARIA role that expects children (for example, role="list").
2. In the Accessibility Tree panel, expand the node.

Expected results: Child elements with the required roles (such as listitem) appear beneath the parent.

Actual results: If required children are missing, the Accessibility Tree shows no such roles or the parent is treated as a generic container.

FAQ

Standards and Regulations

Personas impacted by this issue

• Screen Reader
• Braille

Related Issues

• aria-required-parent