Skip to content
StoreA11y

Shopify · 4.1.1 Parsing (Level A)

The same id is used on more than one interactive element on Shopify

Some ids are repeated on active elements. Labels, aria-controls and aria-describedby all resolve by id and stop at the first match, so a label ends up pointing at the wrong control. On a product page this typically means the quantity or variant field on a quick-view card collides with the same field on the main product form.

Which WCAG criterion this fails

  • Does not meet 4.1.1 Parsing (Level A)
  • Does not meet 4.1.2 Name, Role, Value (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. Ids must be unique across the whole page. Anything rendered inside a loop needs the loop index or the object id appended.
  2. In Liquid, suffix with {{ section.id }} or {{ product.id }}: id="Quantity-{{ section.id }}".
  3. Update every reference at the same time — the matching <label for>, aria-controls, aria-labelledby and aria-describedby.
  4. Quick-view and quick-add modals are the usual source, because they render a second copy of the product form.
  5. Search the theme for id=" and look for any hardcoded id inside a {% for %} block.

Where this usually lives

snippets/quantity-input.liquid, snippets/card-product.liquid, snippets/quick-add.liquid, sections/main-product.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

<label for="Quantity-{{ section.id }}">Quantity</label>
<input type="number"
       id="Quantity-{{ section.id }}"
       name="quantity"
       form="product-form-{{ section.id }}">

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: duplicate-id-active (axe-core).