Skip to content
StoreA11y

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

ARIA attributes have invalid values on Shopify

Some ARIA attributes hold a value the specification does not allow — most often aria-labelledby or aria-controls pointing at an id that does not exist on the page, or aria-expanded set to something other than true/false. A broken reference means the element silently has no name at all.

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. Take the id named in each aria-labelledby / aria-controls / aria-describedby value and search the rendered page for it. If it is absent, either fix the reference or remove the attribute.
  2. This breaks most often inside {% for %} loops where the referenced id is suffixed but the reference is not.
  3. aria-expanded, aria-hidden, aria-selected and aria-checked take only "true" or "false" — not "1", "0", "yes" or an empty string.
  4. If a drawer's target only exists after JavaScript renders it, set the attribute in that JavaScript instead of the markup.

Where this usually lives

sections/header.liquid, snippets/facets.liquid, assets/global.js, snippets/card-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

<!-- Broken: #site-nav does not exist -->
<button aria-controls="site-nav" aria-expanded="false">Menu</button>

<!-- Fixed: id present, values suffixed consistently -->
<button aria-controls="site-nav-{{ section.id }}" aria-expanded="false">Menu</button>
<nav id="site-nav-{{ section.id }}">…</nav>

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-valid-attr-value (axe-core).