How to Fix ARIA Required Children and Parent Relationships? Complete Guide (2026)

Why Required Parent/Child Pairings Matter

Composite-widget roles do not stand alone. Screen readers rely on the parent/child structure to compute the "1 of 5" counters, the "tab 2 of 4 selected" announcements, and the keyboard navigation patterns (arrow keys inside a tablist, Home and End inside a listbox). When the structure is broken, every one of those features breaks.

• Counters disappear: A role="list" with no listitemchildren is announced as "list, empty" even when items are visible. The user cannot tell how many items are present.
• Keyboard patterns break: A role="tab" outside a role="tablist" does not get arrow-key navigation. Keyboard users are stuck.
• Selection state is lost: role="option" outside a role="listbox" can announce aria-selected, but the user has no listbox to navigate, so the state is meaningless.
• Trees collapse to flat lists: A role="treeitem" outside a role="tree" loses the hierarchy. Expand/collapse no longer makes sense.
• WCAG 1.3.1 violations: Info and Relationships requires that programmatic structure matches visual structure. A visually nested tree that programmatically is a flat row of items fails 1.3.1.
• AI search visibility:AI answer engines lean on semantic HTML and the accessibility tree to understand a page's structure. Broken composite roles produce a noisier tree, weaker structured signals, and weaker citation candidates for Google AI Overviews and Perplexity.

The Required Parent/Child Pairings You Must Know

The WAI-ARIA specification defines the full list. The pairings most likely to fail an audit:

The relationship runs both ways. aria-required-children fails when a parent has no children of the required role; aria-required-parent fails when a child appears without the required ancestor.

How to Fix aria-required-children

<!-- BAD -->
<div role="list">
  <div>Apples</div>
  <div>Bananas</div>
  <div>Cherries</div>
</div>

<!-- GOOD: explicit listitem children -->
<div role="list">
  <div role="listitem">Apples</div>
  <div role="listitem">Bananas</div>
  <div role="listitem">Cherries</div>
</div>

<!-- BEST: native semantics -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

<!-- BAD -->
<div role="tablist">
  <button>Overview</button>
  <button>Pricing</button>
  <button>FAQ</button>
</div>

<!-- GOOD -->
<div role="tablist" aria-label="Plan details">
  <button role="tab" aria-selected="true" aria-controls="p1" id="t1">Overview</button>
  <button role="tab" aria-selected="false" aria-controls="p2" id="t2">Pricing</button>
  <button role="tab" aria-selected="false" aria-controls="p3" id="t3">FAQ</button>
</div>

<!-- BAD -->
<ul role="menu">
  <li><a href="/edit">Edit</a></li>
  <li><a href="/delete">Delete</a></li>
</ul>

<!-- GOOD -->
<ul role="menu">
  <li role="menuitem">Edit</li>
  <li role="menuitem">Delete</li>
</ul>

<!-- BAD -->
<ul role="listbox">
  <li>Small</li>
  <li>Medium</li>
  <li>Large</li>
</ul>

<!-- GOOD -->
<ul role="listbox" aria-label="Size">
  <li role="option" aria-selected="false">Small</li>
  <li role="option" aria-selected="true">Medium</li>
  <li role="option" aria-selected="false">Large</li>
</ul>

How to Fix aria-required-parent

<!-- BAD -->
<div className="grid">
  <article role="listitem">Card 1</article>
  <article role="listitem">Card 2</article>
</div>

<!-- GOOD -->
<div role="list" className="grid">
  <article role="listitem">Card 1</article>
  <article role="listitem">Card 2</article>
</div>

<!-- BAD -->
<button role="tab">Settings</button>

<!-- GOOD -->
<div role="tablist" aria-label="Account">
  <button role="tab" aria-selected="true">Settings</button>
  <button role="tab" aria-selected="false">Billing</button>
</div>

<!-- BAD -->
<div className="results">
  <div role="option">First match</div>
  <div role="option">Second match</div>
</div>

<!-- GOOD -->
<div role="listbox" aria-label="Search results">
  <div role="option">First match</div>
  <div role="option">Second match</div>
</div>

How to Check Your Pages

• Greadme deep scan — runs both aria-required-children and aria-required-parent, lists every parent missing required children and every orphan child role, and offers a one-click GitHub PR fix where applicable.
• Greadme crawler scan — finds template-level role mistakes that repeat on every page (a single broken tablist component fails on every page that mounts it).
• Greadme AI visibility analyzer — surfaces how clean composite-widget structure affects how AI answer engines interpret the interactive structure of your pages.
• Chrome DevTools → Accessibility tree — inspect the tree for any composite role: if the children are not the roles you expect, the audit will fail.
• axe-core (the open-source rules engine) — integrates into Jest, Playwright, and Cypress for build-time validation of role hierarchies.
• Manual screen-reader test — open the page in NVDA, VoiceOver, or TalkBack and listen for the "X of N" announcement on lists, tabs, options, and treeitems. If the count is missing, the structure is broken.

10 Rules for Reliable Composite Widgets

Common Mistakes and How to Avoid Them

FAQ

What does the aria-required-children audit check?

It verifies that every element with a composite-widget role contains the child roles its parent role requires. A role="list" with no listitem children fails. A role="tablist" with no tab children fails.

What does the aria-required-parent audit check?

It verifies that every child role appears inside its required parent role. A role="listitem" outside a role="list" fails. A role="tab" outside a role="tablist" fails.

Does my <ul>/<li> markup pass these audits automatically?

Yes — native HTML provides the implicit roles. <ul> implies role="list" and <li> implies role="listitem" as long as <li> is a direct child of <ul>. Some browsers strip the implicit list role when the list is styled with list-style: none; if that affects your screen-reader testing, add an explicit role="list" to the <ul>.

Is broken composite structure a WCAG failure?

Yes. It maps to Success Criterion 1.3.1 Info and Relationships (Level A) when the visual structure does not match the programmatic structure, and to 4.1.2 Name, Role, Value (Level A) when role announcements break.

Can I use a div as a listitem if I add role="listitem"?

Yes — that is exactly what role="listitem" exists for. But the parent must also have role="list" (or be a native <ul> / <ol>), or the orphan-child audit will fail.

Why do my tabs fail even though they look correct?

The most common cause is the role being applied at the wrong level — role="tablist" on the outer container but the tabs nested inside an extra wrapping <div> that interrupts the parent/child relationship. Move the role to the direct parent of the tabs, or apply role="presentation" to the wrapper so the structure flattens.

Do these audits affect AI search engines?

Indirectly. AI answer engines such as Google AI Overviews, ChatGPT, and Perplexity parse the accessibility tree and semantic HTML to understand interactive structure. Broken composite widgets produce a noisier tree, weaker structured signals, and worse rankings in traditional Google search — and AI answer engines preferentially cite pages that already rank well.