Skip to content
StoreA11y

Shopify · 1.1.1 Non-text Content (Level A)

Images missing alternative text on Shopify

Some images have no text alternative. A screen reader announces them as "image" or reads the raw filename, so a blind shopper hears "IMG_4471 dot jpg" instead of the product name. Product images without alt text are the single most common defect cited in filed accessibility complaints.

Frequently litigated

Product images without alternative text are the defect most frequently pleaded in filed ecommerce complaints.

Which WCAG criterion this fails

  • Does not meet 1.1.1 Non-text Content (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. Product photos: Shopify admin > Products > [product] > hover the image > Add alt text. Describe what is in the photo — "Navy merino wool crew neck sweater, front view" — not "product image" and not the SKU.
  2. Content images: Content > Files does not hold alt text; alt is set wherever the image is placed. For rich-text blocks, edit the block and use the image alt field.
  3. Theme images: Online Store > Themes > Edit code. Search the theme for `<img` and for `image_tag`. Every one needs an `alt` attribute.
  4. Decorative images (dividers, background flourishes, spacer graphics) must use alt="" — an empty alt, not a missing one. That tells the screen reader to skip it. Never write alt="decorative".
  5. Never start alt text with "image of" or "picture of" — the screen reader already says that.

Where this usually lives

sections/image-banner.liquid, sections/slideshow.liquid, snippets/card-product.liquid, snippets/product-thumbnail.liquid, and the alt-text field on each product image in admin

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

{% comment %} Liquid: fall back to the product title, never to the filename {% endcomment %}
<img src="{{ image | image_url: width: 800 }}"
     alt="{{ image.alt | default: product.title | escape }}"
     width="{{ image.width }}" height="{{ image.height }}" loading="lazy">

<!-- Purely decorative: empty alt, so it is skipped -->
<img src="{{ 'divider.svg' | asset_url }}" alt="">

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: image-alt (axe-core).