WCAG 1.1.1 — Non-text Content
Every image that carries information needs a text equivalent; images that are purely decorative must be hidden from assistive technology.
What this means for a store
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.
The failures we see most often
Product images with empty alt text or the filename as alt text (IMG_4821.jpg, product-1-copy.png).
Why it happens: Bulk product imports leave the alt-text column unmapped, and themes fall back to printing the filename.
Decorative dividers, textures and shadows given descriptive alt text.
Why it happens: The rule 'every image needs alt text' is applied too literally. A screen reader then announces every ornament and the page becomes noise.
Text baked into a promotional banner image ('40% off in cart').
Why it happens: Campaign artwork is produced in a design tool and uploaded as one flat image. The discount never reaches assistive technology, and it is not selectable or translatable either.
Icon-only controls (cart, search, wishlist) with no accessible name.
Why it happens: The icon reads clearly to sighted users, so a label seems unnecessary.
How to check it yourself
- Disable images in the browser and reload a product listing — can you still tell the products apart?
- Walk a listing page with a screen reader and confirm each product is distinguishable.
- Try to select the text in a promotional banner. If you cannot, it is baked into the image.
Fixing it, by platform
- Shopify — Non-text Content Admin, then the product Media section, then the alt text field on each image. In theme code: snippets/card-product.liquid.
- WooCommerce — Non-text Content WordPress Media Library, the Alternative Text field; the rendering happens in single-product/product-image.php.
- Webflow — Non-text Content Designer image settings, or the image field in a CMS collection.
- Wix — Non-text Content Editor, right-click an image, Set Alt Text.
- Squarespace — Non-text Content Image block settings, Image Alt Text field.
What this page covers
What follows is the practical meaning of a WCAG 2.2 success criterion. Automated tests catch only a portion of accessibility issues, so a clean scan result does not mean compliance. Platform paths vary by version and theme.
Source
The formal definition of this criterion: W3C — Understanding Non-text Content