Skip to content
StoreA11y

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

ARIA attributes not allowed on this element on Shopify

Some elements carry an ARIA attribute that their role does not support — for example aria-selected on a plain link, or aria-checked on a button. Browsers either ignore it or map it to something unintended, so what the shopper hears does not match what is on screen.

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 the attribute unless the element genuinely has the role that permits it.
  2. If the behaviour is wanted, set the correct role first and then the attribute — for tabs, role="tab" plus aria-selected on each tab, inside a role="tablist".
  3. aria-* attributes copied from a code snippet onto the wrong element are the usual cause. Do not add ARIA speculatively; less ARIA is safer than wrong ARIA.
  4. Prefer native semantics: <button>, <a href>, <input type="checkbox"> already expose the right roles and states.

Where this usually lives

assets/*.js tab and accordion components, sections/main-product.liquid tabs

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: aria-selected is not allowed on a link with no tab role -->
<a href="#desc" aria-selected="true">Description</a>

<!-- Right -->
<div role="tablist">
  <button role="tab" id="tab-desc" aria-selected="true" aria-controls="panel-desc">Description</button>
</div>
<div role="tabpanel" id="panel-desc" aria-labelledby="tab-desc">…</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: medium. Rule id: aria-allowed-attr (axe-core).