Annex

Fixing Non-text Content on Shopify (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.

Shopify — where to look

Admin, then the product Media section, then the alt text field on each image. In theme code: snippets/card-product.liquid.

What to do

Fill in alt text on product media. In theme code make sure the product card prints the media alt text rather than the filename. Decorative theme images should carry an empty alt attribute, not have the attribute removed.

Verification status

Checked by reading the platform’s own source code. Dawn renders alt="{{ card_product.featured_media.alt | escape }}", so it prints the media alt text and not the filename. An empty alt here means the field was left blank in Admin.

Source: https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid

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.