Image buttons missing alternative text on Shopify

What this is

3 image buttons have no text, so screen reader users cannot tell what pressing it does.

Who it affects

• Screen reader users
• People with motor disabilities

Standards

• WCAG 1.1.1 Non-text Content (A)
• WCAG 4.1.2 Name, Role, Value (A)

How to fix it

1. Add an `alt` to the `<input type="image">` that describes the action (for example "Search"), not the picture.

Example

Before

<input type="image" src="/go.png">

After

<input type="image" src="/go.png" alt="TODO: describe the action, e.g. Search">

The alt text should describe what the button does.

On Shopify

Products: Admin → Products → open the product → click the image → "Add alt text". Theme images: Online Store → Customize → select the image section → fill the alt text field. Liquid: `{{ image | image_url | image_tag: alt: image.alt }}`.

Other platforms

• General advice
• WordPress
• Elementor
• Webflow
• Framer
• Wix
• Squarespace
• Next.js
• Lovable

Prompt for an AI coding tool

Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.

More fixes

• Images missing alternative text
• SVG images missing a text alternative
• Elements with role="img" missing a text alternative
• Links without a name
• Buttons without a name
• Links distinguished only by color