In plain English
If a person can’t see an image, your website has to tell them what the image is, in words. Screen readers (the software blind and low-vision shoppers use) read those words out loud. No words means the image is a blank to them.
This is the very first rule in WCAG, and the most common one stores get wrong. It covers everything that isn’t plain text: product photos, icons, logo images, “add to cart” buttons made of an image, star ratings drawn as graphics, charts, and even CAPTCHAs.
Who this is for
- Blind and low-vision shoppers using a screen reader, which announces the alt text instead of the picture.
- Anyone on a slow or broken connection, where the image fails to load and the alt text shows in its place.
- Search engines and AI answer tools, which read alt text to understand what your images show, so good alt text quietly helps SEO too.
What “good” looks like
Every meaningful image gets a short description of what it shows or does. Purely decorative images get an empty alt so they’re skipped.
<!-- Good: describes the product -->
<img src="overcoat.jpg" alt="Navy wool overcoat, front view">
<!-- Good: an image button says what it does, not what it looks like -->
<button aria-label="Add to cart">
<img src="cart-icon.svg" alt="">
</button>
<!-- Good: a decorative flourish is hidden from screen readers -->
<img src="divider-swirl.png" alt=""><!-- Bad: no alt at all, so the screen reader may read the filename -->
<img src="overcoat.jpg">
<!-- Bad: alt that isn't a real alternative -->
<img src="overcoat.jpg" alt="IMG_4821">The test: if you covered the image and read only the alt text, would a shopper still know what they need to? If yes, you’ve got it right.
Where stores get it wrong
The usual culprits are theme and app images that ship with no alt, product
photos bulk-imported with filenames as alt text, and icon-only buttons (search,
cart, wishlist) that announce nothing. These are exactly the issues a
10-minute self-check and the
common Shopify failures list are
built to catch.