Ensure ARIA elements are inside required parent roles

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 element must sit inside its required parent role to be understood.

Why this matters and how to fix it

Why this matters

Some ARIA roles only function correctly within specific parent roles. For example, a `listitem` must be inside a `list`, and a `menuitem` inside a `menu`. Missing required parents breaks relationships and causes screen readers to misinterpret content.

How to fix this issue

Verify each ARIA role's required parent according to the specification. Ensure elements like `listitem`, `menuitem`, `treeitem`, `tab`, or `row` are nested inside their required container. Prefer native HTML elements (`<ul>`, `<nav>`, `<table>`) when possible to maintain valid hierarchy automatically.

Automated detection · Manual review recommended

Developer guidance

In component libraries, enforce required parent roles. For example, a `ListItem` component should only render inside a `List`. Use the GetWCAG automated scanner to validate structure and inspect the accessibility tree to confirm the hierarchy.

Code examples

Incorrect Implementation

<li role="listitem">Item</li>

Correct Implementation

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

Real-World Examples

Before

<li role="listitem">Option 1</li> <!-- No parent list; screen reader may misannounce -->

After

<ul role="list"><li role="listitem">Option 1</li></ul> <!-- Properly nested; screen reader announces hierarchy -->

Manual testing

  1. 1. Inspect elements with ARIA roles that require specific parents.
  2. 2. Confirm each element is nested inside the correct container role.
  3. 3. Use the accessibility tree or dev tools to verify the hierarchy.
  4. 4. Replace missing parents with native HTML containers or add required roles.
  5. 5. Test with a screen reader to ensure relationships are announced correctly.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance