How to fix aria required children on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify the affected template file using Magento's template hints (Stores → Configuration → Advanced → Developer → Debug → Enable Template Path Hints for Storefront).
2. Copy the flagged template from vendor/magento/module-[ModuleName]/view/frontend/templates/ into your custom theme at app/design/frontend/[Vendor]/[Theme]/Magento_[ModuleName]/templates/ — never edit core files directly.
3. Open the copied .phtml file, locate the element with the parent role= attribute, and correct the child role pairings or remove disallowed tabindex attributes from img/a children.
4. If the violation is in a custom module or third-party extension template, copy it into your theme override path following the same pattern and correct it there.
5. Run bin/magento cache:flush after saving. Verify the fix in your browser with axe DevTools and check the Accessibility panel in Chrome DevTools.

<!-- ❌ 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>

What is aria required children?

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.

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.

See the complete Aria required children guide for every platform and the full background.