Skip to content
StoreA11y

Shopify · 1.3.1 Info and Relationships (Level A)

Lists contain elements that are not list items on Shopify

Some <ul> or <ol> elements contain children that are not <li> — usually a stray <div> wrapper added by an app or a page builder. Screen readers announce "list, N items" based on this structure, so the count is wrong and items get skipped.

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. The only permitted direct children of <ul>/<ol> are <li>, <script> and <template>.
  2. Find the list in the theme and move the offending wrapper inside the <li>, not around it.
  3. This commonly appears in the main navigation when a mega-menu wrapper is placed between <ul> and <li>, and in product grids where the grid wrapper was added at the wrong level.
  4. If an app injects the markup, check the app settings first; a theme edit will be lost on the next update.

Where this usually lives

sections/header.liquid (nav), snippets/product-grid.liquid, sections/main-collection-product-grid.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 -->
<ul class="grid">
  <div class="grid__wrapper">
    <li>Product</li>
  </div>
</ul>

<!-- Right -->
<ul class="grid">
  <li class="grid__item">
    <div class="card">Product</div>
  </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: list (axe-core).