Skip to content
StoreA11y

Shopify · 1.1.1 Non-text Content (Level A)

Image buttons have no alternative text on Shopify

Some <input type="image"> buttons have no alt attribute. These are real submit buttons rendered as a picture, so a screen-reader user is offered a submit control with no idea what submitting does. Legacy search and newsletter forms are the usual source.

Which WCAG criterion this fails

  • Does not meet 1.1.1 Non-text Content (Level A)
  • 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. Add alt describing the action, not the picture: alt="Search", alt="Subscribe".
  2. Better: replace <input type="image"> with a <button type="submit"> containing an <img> or inline SVG plus a text or visually hidden label — far easier to style and to keep accessible.
  3. Never use alt="button" or alt="submit".

Where this usually lives

snippets/search-form.liquid, sections/newsletter.liquid, sections/footer.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

<!-- Before -->
<input type="image" src="search.png">

<!-- After -->
<input type="image" src="search.png" alt="Search">

<!-- Preferred -->
<button type="submit">
  <img src="search.png" alt="">
  <span class="visually-hidden">Search</span>
</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: input-image-alt (axe-core).