Annex

Fixing Non-text Content on WooCommerce (WCAG 1.1.1)

Every image that carries information needs a text equivalent; images that are purely decorative must be hidden from assistive technology.

Why it matters

In a catalogue without alt text, a screen reader user cannot tell one product from another — the listing reads as a row of filenames. Alt text is also what renders when an image fails to load, and it is one of the signals search engines use to understand a product image. Fixing this is simultaneously an accessibility fix, a resilience fix and an SEO fix.

WooCommerce — where to look

WordPress Media Library, the Alternative Text field; the rendering happens in single-product/product-image.php.

What to do

Populate the alt text field, and map the alt-text column during bulk imports. Leave alt empty for decorative images.

Verification status

Checked by reading the platform’s own source code. The core template passes attachment alt text through to the rendered image, so an empty alt means the Media Library field was left blank — not a template bug. Bulk imports that skip the alt column are the usual cause.

Source: https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/templates/single-product/product-image.php

Reference themes change. If your store runs a different or older theme, confirm the file before editing it.

How to verify the fix

  1. Disable images in the browser and reload a product listing — can you still tell the products apart?
  2. Walk a listing page with a screen reader and confirm each product is distinguishable.
  3. Try to select the text in a promotional banner. If you cannot, it is baked into the image.

Other platforms

The full criterion

Read the full explanation of WCAG 1.1.1 Non-text Content, or the formal W3C definition.