How to fix aria required children on OpenCart

Steps for OpenCart

1. Connect via FTP/SFTP to your server. Template files are in catalog/view/theme/[your-theme]/template/.
2. Identify the relevant .twig or .tpl file (e.g. common/header.twig, product/category.twig).
3. Edit the file to add the correct child role attributes to children of ARIA parent roles, or remove tabindex from img/a elements that are illegal children.
4. Save the file and hard-refresh your browser. Test with axe 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.