Skip to content
StoreA11y

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

Invalid ARIA role values on Shopify

Some elements declare a role that does not exist in the ARIA specification — a typo such as role="buton", or an invented role such as role="card". An unrecognised role is discarded, and with it any semantics the element was meant to convey.

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. Correct the typo, or delete the role entirely if the native element already conveys the meaning.
  2. Valid roles are a fixed list — button, link, navigation, main, banner, contentinfo, search, dialog, tab, tablist, tabpanel, alert, status, region, list, listitem, and so on.
  3. role="card", role="section", role="container" and role="wrapper" are not real roles; those elements need no role at all.
  4. Search the theme for role=" and check each value against the ARIA spec.

Where this usually lives

Any section or snippet where roles were hand-added, and third-party 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

<!-- Invalid -->
<div role="card">…</div>
<button role="buton">Add to cart</button>

<!-- Valid -->
<div class="card">…</div>
<button>Add to cart</button>

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