Skip to content
StoreA11y

Shopify · 1.3.1 Info and Relationships (Level A)

ARIA roles missing their required child roles on Shopify

Some elements use a role that requires specific children and do not have them — role="list" without role="listitem", or role="tablist" without role="tab". Screen readers may drop the whole container from the accessibility tree, hiding everything inside it.

Which WCAG criterion this fails

  • Does not meet 1.3.1 Info and Relationships (Level A)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Either add the required child roles, or remove the parent role and use native elements.
  2. role="tablist" needs role="tab" children; role="list" needs role="listitem"; role="menu" needs role="menuitem"; role="radiogroup" needs role="radio".
  3. Watch for a wrapper <div> between the parent and its children — that breaks the relationship. Use role="presentation" on the intervening wrapper, or restructure.
  4. For navigation menus, plain <ul>/<li> markup is more reliable than role="menu", which implies desktop-application keyboard behaviour you would then have to implement.

Where this usually lives

sections/header.liquid (mega menu), assets/*.js tab components, snippets/product-variant-picker.liquid

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<!-- Wrong: wrapper breaks the required parent/child relationship -->
<div role="tablist">
  <div class="wrap">
    <button role="tab">Description</button>
  </div>
</div>

<!-- Right -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="p1" id="t1">Description</button>
  <button role="tab" aria-selected="false" aria-controls="p2" id="t2">Shipping</button>
</div>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: medium. Rule id: aria-required-children (axe-core).