Buttons with no name in Shopify

WCAG 4.1.2 (A) · EN 301 549 9.4.1.2

Some buttons have no visible text and no accessible name.

Where to change it in Shopify

In Dawn and its derivatives, header icon buttons live in sections/header.liquid.

Shopify themes are edited under Online Store › Themes. "Edit code" opens the Liquid templates. Many colour and typography settings can be changed without coding, from the theme editor.

As it is

<button><svg>…</svg></button>

As it should be

<button aria-label="Dismiss notice">
  <svg aria-hidden="true">…</svg>
</button>

Why it matters

This usually hits icon-only buttons: the close X, the search magnifier, the basket in the header. A screen reader announces them as "button" and the person has to activate them to find out what they do.

On other platforms

Buttons with no name in WooCommerce

Does your Shopify shop have this failure?

We detect your platform automatically and give you the instructions for it. Free, no sign-up.