Skip to content
StoreA11y

WooCommerce · 1.1.1 Non-text Content (Level A)

Images missing alternative text on WooCommerce

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 WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. 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

Media Library > each image > "Alternative Text" field; template overrides in your child theme under woocommerce/loop/, and any <img> in header.php / footer.php

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. 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).