Skip to content
StoreA11y

Shopify · 1.3.1 Info and Relationships (Level A)

ARIA roles not inside their required parent on Shopify

Some elements use a role that must sit inside a specific parent role and do not — role="listitem" outside role="list", role="option" outside role="listbox", role="tab" outside role="tablist". The browser drops the relationship, so a screen reader cannot say "item 3 of 12" and may not expose the element at all.

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. For each element in the finding, add the required parent role, or remove the child role and use native markup.
  2. role="listitem" needs an ancestor with role="list"; role="option" needs role="listbox"; role="tab" needs role="tablist"; role="menuitem" needs role="menu" or role="menubar"; role="gridcell" needs role="row".
  3. A wrapper element between parent and child breaks the relationship. Give the intervening wrapper role="presentation", or move it outside.
  4. On a store this is usually a custom variant picker or a predictive-search dropdown where role="option" was added to the results without role="listbox" on the container.
  5. Plain <ul>/<li> is safer than role="list"/role="listitem" — the native elements cannot be separated by a stray wrapper.

Where this usually lives

sections/predictive-search.liquid, snippets/product-variant-picker.liquid, snippets/facets.liquid, assets/predictive-search.js

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: the wrapper severs listbox from option -->
<ul role="listbox">
  <div class="results">
    <li role="option">Wool Runner</li>
  </div>
</ul>

<!-- Right -->
<ul role="listbox" aria-label="Search results">
  <li role="option" id="r1">Wool Runner</li>
  <li role="option" id="r2">Tree Dasher</li>
</ul>

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-parent (axe-core).