Ensure elements with ARIA roles that require children contain them

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Every ARIA container must include all required child roles.

Why this matters and how to fix it

Why this matters

ARIA container roles rely on specific child roles to convey structure. For example, a `list` must contain `listitem`s and a `menu` must contain `menuitem`s. Missing children break relationships and make navigation confusing or inaccessible for screen reader users.

How to fix this issue

Refer to the ARIA role specification for required child roles and add them as needed. Prefer native HTML elements like `<ul>` with `<li>` to maintain correct hierarchy automatically. Use ARIA roles only for fully custom widgets.

Automated detection · Manual review recommended

Developer guidance

Dynamic UIs, filtering, lazy loading, or virtualization can temporarily break structure. In component libraries, enforce required child components (`List` contains `ListItem`). Use the GetWCAG automated scanner to validate structure and visually inspect the Accessibility Tree to ensure hierarchy is correct.

Code examples

Incorrect Implementation

<ul role="list"></ul>

Correct Implementation

<ul role="list"><li role="listitem">Item 1</li></ul>

Real-World Examples

Before

<ul role="list"></ul> <!-- Screen reader cannot announce items because required children are missing -->

After

<ul role="list"><li role="listitem">Option A</li></ul> <!-- Screen reader announces each item correctly -->

Manual testing

  1. 1. Identify ARIA container elements on the page.
  2. 2. Verify that required child roles exist for each container.
  3. 3. Use the accessibility tree to confirm that hierarchy is preserved.
  4. 4. Add missing child elements or replace the container with native HTML semantics.
  5. 5. Test with a screen reader to ensure child elements are announced properly.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance