Aria required children

What it is

ARIA (Accessible Rich Internet Applications) roles tell screen readers and other assistive technologies what a piece of your page is — a list, a menu, a tab panel, etc. Each parent role has a strict set of child roles it is allowed to contain. For example, a `list` role must contain `listitem` children; a `menu` must contain `menuitem` children. When you nest elements that don't belong — such as a plain image or link with a `tabindex` attribute — directly inside a parent ARIA role, assistive technologies get confused and may skip content, announce it incorrectly, or break keyboard navigation entirely. The WCAG 1.3.1 criterion ("Info and Relationships") requires that the structure you see visually is faithfully conveyed in code so every user, regardless of ability, gets the same information.

Why it matters

Screen-reader users — roughly 7–8 million people in the US alone — rely on correct ARIA structure to navigate your store. A broken ARIA parent/child relationship can cause product listings, navigation menus, carousels, or tab panels to become completely invisible or unreadable to assistive technology, directly costing you sales from customers with disabilities. Beyond lost revenue, WCAG 1.3.1 failures are frequently cited in ADA Title III accessibility lawsuits against online retailers; a documented violation increases your legal exposure. Google also uses accessibility signals as a quality indicator, so persistent structural errors can subtly suppress your organic rankings over time.

How to fix it

1. Identify the offending element: locate the HTML element that carries the parent ARIA role (e.g. role="list", role="menu", role="tablist") and inspect its direct children in your browser's DevTools (right-click → Inspect → Accessibility pane).
2. Check the required/allowed children for that role: consult the WAI-ARIA spec or Deque's rule reference to see exactly which child roles are permitted. For example, role="list" requires role="listitem" children; role="menu" requires role="menuitem" / role="menuitemcheckbox" / role="menuitemradio".
3. Fix mismatched children: either (a) add the correct role attribute to the child element (e.g. add role="listitem" to a child <div>), or (b) wrap the non-conforming children in an appropriate element that carries the required role.
4. Remove disallowed tabindex values: if the scanner flags img[tabindex] or a[tabindex] as illegal children, either remove the tabindex attribute from those elements, move them outside the ARIA parent, or replace them with a semantically correct interactive child (e.g. a role="menuitem" wrapping the image).
5. Use native HTML elements wherever possible instead of ARIA roles: <ul>/<li> for lists, <nav> for navigation, <button> for actions — native elements carry the correct implicit roles and permitted child rules automatically, eliminating this class of error.
6. Re-test with an accessibility scanner (axe DevTools browser extension or Lighthouse) and a screen reader (NVDA + Firefox or VoiceOver + Safari) to confirm the violation is resolved and the content is announced correctly.

<!-- ❌ WRONG: img with tabindex is not a valid child of role="list" -->
<ul role="list">
  <img src="product.jpg" alt="Blue Widget" tabindex="0">
</ul>

<!-- ✅ CORRECT: wrap the image in a proper listitem -->
<ul>
  <li>
    <a href="/products/blue-widget">
      <img src="product.jpg" alt="Blue Widget">
    </a>
  </li>
</ul>

<!-- ❌ WRONG: a[tabindex] as direct child of role="menu" -->
<div role="menu">
  <a href="/sale" tabindex="0">Sale</a>
</div>

<!-- ✅ CORRECT: give the child the required menuitem role -->
<div role="menu">
  <a href="/sale" role="menuitem">Sale</a>
</div>

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• ARIA basics — MDN