Skip to content
StoreA11y

Shopify · 4.1.2 Name, Role, Value (Level A)

ARIA attributes used where they are forbidden on Shopify

Some elements carry an ARIA attribute that their role explicitly forbids — most often aria-label on a plain <div>, <span> or <p>. A label on an element with no role is ignored by some screen readers and read instead of the visible text by others, so the same page is announced differently depending on the software.

Which WCAG criterion this fails

  • 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. Remove aria-label and aria-labelledby from generic elements: <div>, <span>, <p>, <li> without a role.
  2. If the element needs a name, give it a role that supports one — role="region" with aria-label, role="group", or a real landmark element — but only if it genuinely is one of those.
  3. If the intent was extra context for a control, put the text in the control itself, or use aria-describedby on the control instead.
  4. This most often appears where an aria-label was added to a wrapper <div> hoping it would be announced. It will not be; wrap the meaningful content in a real element instead.

Where this usually lives

snippets/card-product.liquid, sections/header.liquid, and app blocks that add aria-label to wrappers

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

<!-- Forbidden: a plain div cannot take a name -->
<div aria-label="Product card">…</div>

<!-- Either drop it -->
<div class="card">…</div>

<!-- or give it a role that supports a name -->
<div role="group" aria-label="Wool Runner, £95">…</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: low. Rule id: aria-prohibited-attr (axe-core).