Skip to content
StoreA11y

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

ARIA roles missing their required attributes on Shopify

Some elements declare an ARIA role but omit an attribute that role requires — for example role="checkbox" without aria-checked, or role="slider" without aria-valuenow. The element is announced with its state missing or wrong, which is worse than having no role at all.

Frequently litigated

Broken ARIA is cited to show that an accessibility attempt was made but not tested.

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. For each element in the finding, either supply the missing attribute or, better, delete the role and use the native HTML element.
  2. role="checkbox" needs aria-checked; role="combobox" needs aria-expanded and aria-controls; role="slider" needs aria-valuenow, aria-valuemin and aria-valuemax; role="tab" needs aria-selected.
  3. A <div role="checkbox"> should almost always just be <input type="checkbox"> — native elements carry their state for free and work with the keyboard without any JavaScript.
  4. If the role is on a theme component with JavaScript behaviour, the state attribute also has to be updated in that JavaScript when the state changes, not just set once in the markup.
  5. Price-range filters and custom star ratings are the common offenders on a store.

Where this usually lives

snippets/facets.liquid (price range), assets/*.js custom components, review app blocks

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

<!-- Fragile -->
<div role="checkbox" tabindex="0">In stock only</div>

<!-- Correct if the role must stay -->
<div role="checkbox" tabindex="0" aria-checked="false">In stock only</div>

<!-- Best: native -->
<label><input type="checkbox" name="in_stock"> In stock only</label>

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