Skip to content
StoreA11y

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

Buttons with no accessible name on Shopify

Some buttons have no readable name. Keyboard and screen-reader users hear "button" and cannot tell what it does. On a store this is typically the mobile menu toggle, a quantity stepper, a slideshow arrow, or a drawer close button.

Frequently litigated

Unlabelled buttons block the add-to-cart path, which is the fact pattern plaintiffs describe most often.

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. Locate each selector from the finding in Online Store > Themes > Edit code.
  2. Add aria-label to the button describing the action, not the icon: aria-label="Open menu", aria-label="Close cart", aria-label="Next slide", aria-label="Increase quantity".
  3. Mark the inner icon aria-hidden="true" focusable="false" so its markup is not read as well.
  4. For a toggle, also add aria-expanded="false" and flip it to "true" in the theme JavaScript when it opens — otherwise the state is silent.
  5. Check the quantity +/- buttons on the product and cart pages; those ship unlabelled in several popular paid themes.

Where this usually lives

sections/header.liquid (menu toggle), assets/*.js drawer and slideshow components, snippets/quantity-input.liquid, sections/main-cart-items.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

<button type="button"
        class="header__icon"
        aria-label="Open menu"
        aria-expanded="false"
        aria-controls="site-nav">
  <svg aria-hidden="true" focusable="false">…</svg>
</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: button-name (axe-core).