Container roles must own the required child roles

Rule aria-required-children · ARIA · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Composite widgets rely on a specific parent/child role structure. A role="tablist" with no role="tab" children, for example, is not a working tab widget.

How to fix#

Give the container the child roles it must contain (respecting aria-owns), or remove the container role.

Example#

<div role="tablist"><div>One</div></div>

<div role="tablist"><div role="tab">One</div></div>

Example#

<div role="listbox"><span>Not an option</span></div>

<div role="tablist"><div class="scroll-wrap"><button role="tab" aria-selected="true">One</button></div></div>

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WAI-ARIA — Required Owned