← All rules

ARIA

Some roles require specific children

• Rule: aria-required-children
• Severity: Critical
• WCAG level A

Why it matters

A tablist holds tabs, a list holds list items. When the required children are missing the whole composite widget collapses in the accessibility tree, and none of it is announced correctly.

How to fix it

1. Give the direct children the role the parent expects (role="tab" inside role="tablist").
2. Where a wrapper element sits in between, give it role="presentation" so it does not break the relationship.
3. Drop the parent role if the structure is not really that widget.

In markup

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

<div role="tablist">
  <button role="tab" aria-selected="true">Overview</button>
</div>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

• 1.3.1 Info and Relationships (opens in new tab) — WCAG level A

Further reading

Deque University on aria-required-children (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.