How to fix aria required children on Webflow

Steps for Webflow

1. Open the Webflow Designer and select the element that is the ARIA parent (the element with the role= attribute).
2. In the right-hand Settings panel (the gear icon), scroll to the Custom Attributes section. Review the role value and ensure its child elements carry the correct child roles.
3. Select each child element and, in its own Settings panel Custom Attributes, add the required role attribute (e.g. role: menuitem for children of a menu).
4. To fix tabindex on an img or a inside a restricted parent: select the child element → Settings → Custom Attributes, find tabindex and delete it, or move the focusable behavior to a correctly-roled wrapper element.
5. Prefer Webflow's native semantic elements (Navbar, List, List Item) over custom div+role combinations — they output the correct ARIA structure automatically.
6. Publish and verify with axe DevTools in your browser.

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