Skip to content
StoreA11y

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

Focusable elements have no interactive role on Shopify

Some elements were made focusable with tabindex but are still announced as plain text or a generic group. The keyboard user lands on something the screen reader describes as nothing, with no indication of what pressing Enter would do.

Frequently litigated

Focusable elements with no role are pleaded as keyboard traps or dead ends.

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. Replace <div tabindex="0" onclick> with a real <button type="button"> — that gives you the role, the keyboard handling and the focus ring for free.
  2. If the element must stay a div, add the correct role (button, link, tab) and handle both Enter and Space in the JavaScript. Native elements handle both; div click handlers only fire on Enter.
  3. Remove tabindex="0" from elements that are not interactive at all — decorative wrappers should not be in the tab order.
  4. Never use a positive tabindex (tabindex="3"); it reorders the whole page unpredictably. Only 0 and -1 are safe.

Where this usually lives

assets/global.js, custom sections with click handlers, 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

<!-- Wrong -->
<div tabindex="0" onclick="openCart()">Cart</div>

<!-- Right -->
<button type="button" onclick="openCart()">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: medium. Rule id: focus-order-semantics (axe-core).