What the law actually requires for product images
Two regimes matter for most sellers, and both point at the same technical standard.
In the EU, the European Accessibility Act applies to e-commerce services. Its harmonised standard, EN 301 549 v3.2.1, incorporates WCAG 2.1 Level AA in full; version 4.1.1, expected during 2026, moves that baseline to WCAG 2.2. In the US, there is no image-specific statute, but ADA Title III web litigation overwhelmingly cites WCAG 2.1 AA as the benchmark, and missing alt text is the single most commonly pleaded defect.
The practical upshot: build to WCAG 2.2 Level AA and you satisfy both. These are the criteria that bite on imagery.
| Criterion | What it means for images | Level |
|---|---|---|
| 1.1.1 Non-text Content | Every meaningful image needs a text alternative; decorative images need an empty alt | A |
| 1.4.3 Contrast (Minimum) | Text inside infographics and badges needs 4.5:1 contrast (3:1 for large text) | AA |
| 1.4.5 Images of Text | Don't put essential text in an image when real text would do | AA |
| 1.4.11 Non-text Contrast | Meaningful graphics and UI indicators need 3:1 against their background | AA |
| 1.4.10 Reflow | Images must not force horizontal scrolling at 320px equivalent width | AA |
| 1.4.4 Resize Text | Text must scale to 200% — text baked into a bitmap does not | AA |
Colour-variant swatches that convey the only difference between two SKUs are meaningful graphics, not decoration. They need both a text alternative ("Colour: forest green") and 3:1 contrast against the page background — a pale ivory swatch on a white product page fails 1.4.11 even with perfect alt text.
The five image failures that cause most complaints
Accessibility audits of product pages tend to surface the same handful of problems. In rough order of how often they appear:
1. Missing or junk alt text. Platform imports usually leave alt empty or fill it with the filename. Either way, a screen reader announces nothing useful — or worse, spells out "underscore zero four two one dot jay peg."
2. Essential text inside the bitmap. Size charts, care instructions, ingredient lists, and "2-pack" badges rendered as pixels. This fails 1.4.5 and 1.4.4 at once, and it also hides that content from search engines and AI shopping assistants.
3. Low-contrast overlay copy. Thin white type over a bright lifestyle photo routinely measures below 3:1. Designers approve it on a calibrated monitor; a shopper on a phone in daylight cannot read it at all.
4. Decorative images that announce themselves. Background textures, spacer graphics, and lifestyle filler with descriptive alt text add noise. If the image adds nothing the surrounding text doesn't already say, give it alt="".
5. Gallery controls without labels. Thumbnail strips, zoom buttons, and 360-degree spinners built from unlabelled <div>s are invisible to keyboard and screen-reader users, so the alternate angles effectively don't exist.
How to write alt text for product photos
Good product alt text answers one question: what would a sighted shopper learn from this image that the page text doesn't already tell them? That means the alt text differs by image role, even for the same product.
Weak alt text
- "product image"
- "womens-jacket-green-01.jpg"
- "Buy the best waterproof jacket online — free shipping, 30-day returns, shop now"
- "Image of a jacket. Photo. Picture of jacket."
Useful alt text
- "Forest green waterproof jacket, front view, hood down"
- "Back view showing vented yoke and reflective seam"
- "Close-up of taped seams at the shoulder"
- "Model 5'9\" wearing size M, jacket ends at mid-hip"
Practical rules that hold up across catalogues:
- Aim for 80–125 characters. Long enough to be specific, short enough that listeners don't tune out. Some screen readers truncate around 125.
- Lead with the distinguishing detail. On a gallery of eight near-identical shots, the angle or feature is the information, not the product name repeated eight times.
- Skip "image of" and "photo of." Screen readers already announce the element as a graphic.
- Never keyword-stuff. It degrades the experience for the people the attribute exists for, and search engines discount it anyway.
- Move long descriptions out of alt. A detailed size chart belongs in an adjacent HTML table or a linked long description, not a 400-character alt string.
- Include text that appears in the image. If a badge says "SPF 50," the alt text must too.
Auto-generated alt text is a reasonable floor, not a finish line. Vision models describe what is in the frame competently, but they don't know which detail matters for the purchase decision. Generate a first pass across the catalogue, then hand-edit the hero and size/fit images — usually the top two or three per SKU — where the shopping decision is actually made.
Contrast, text-in-image, and infographic design
Marketplaces have pushed sellers toward image-heavy listings: Amazon A+ modules, TikTok Shop feature callouts, comparison charts. Those are exactly the assets most likely to fail contrast and images-of-text criteria, because they treat the image as a layout canvas.
Designing infographics that pass:
- Put the type on a controlled plate. A solid or heavily blurred panel behind the text gives you a predictable contrast measurement instead of one that changes with every background you drop it onto.
- Set a minimum type size relative to the frame. A useful rule of thumb: no text smaller than about 2.5% of the image height, so it survives the thumbnail and mobile crops.
- Don't rely on colour alone. A red "out of stock" flag and a green "in stock" flag that differ only in hue fail for colour-blind shoppers. Add an icon or a word.
- Mirror every image-only claim in HTML. If a comparison chart is a PNG, reproduce it as a real table below the gallery. That single habit satisfies 1.4.5, 1.4.4, and 1.4.10 at once — and makes the content readable by search crawlers and AI shopping agents too.
- Test at 320px. Open the page in a 320px-wide viewport. If an image forces horizontal scroll, you've failed reflow.
Because AI image tools like Retouchable regenerate infographic layouts and overlay text as separate, editable layers rather than flattening them into the photo, it's straightforward to bump type size or swap a low-contrast colour and re-export the whole set — rather than reopening a hundred PSDs.
Auditing a large catalogue without auditing every image
You cannot manually review 40,000 images. You can review the ones that matter and automate the rest. A workable sequence:
| Step | Method | Effort |
|---|---|---|
| 1. Find missing alt attributes | Crawl the site (Screaming Frog, Sitebulb, or a script) and export every <img> with empty or filename-like alt | Low — fully automated |
| 2. Flag text-in-image | Run OCR over the catalogue; any image returning more than a few words is a 1.4.5 candidate | Low — batch job |
| 3. Measure overlay contrast | Sample text and background pixels programmatically, or spot-check templates rather than instances | Medium |
| 4. Generate first-pass alt text | Vision model over the flagged set, written back via your platform's API | Low |
| 5. Hand-edit high-traffic SKUs | Top 10% of products by revenue — hero plus size/fit images only | High but bounded |
| 6. Screen-reader spot check | Walk 5–10 representative product pages with NVDA or VoiceOver end to end | Medium |
Two things to be honest about. First, automated checkers catch roughly a third of WCAG issues; a green score from an overlay widget or a scanner is not compliance, and accessibility overlays have themselves been the subject of litigation. Second, alt text quality degrades silently — a template that once produced good text keeps producing it for products it wasn't designed for. Re-sample quarterly.
Most image accessibility debt originates in a handful of design templates and a handful of import scripts. Fixing the template that generates your A+ modules corrects thousands of images at once; fixing images one at a time never catches up with the catalogue.
The business case beyond compliance
Framing image accessibility purely as legal risk undersells it. The same work pays off in three other places.
Search and AI visibility. Alt text is one of the few textual signals attached to an image, and it feeds Google Images, visual search, and the AI shopping assistants that increasingly summarise product pages. Content trapped in a bitmap is invisible to all of them. Moving a size chart from PNG to HTML makes it machine-readable in exactly the way accessibility requires.
Conversion and returns. Specific, descriptive image content helps every shopper, not just assistive-technology users. Fit and scale information that is actually readable — rather than a chart nobody can zoom into on a phone — is one of the more reliable ways to cut size-related returns.
Market reach. The disability community and their households represent enormous discretionary spending, and shoppers who hit a wall on your product page simply buy from a competitor. There's no complaint to respond to; the revenue just doesn't arrive.
The prioritisation is straightforward: fix missing and junk alt text first because it's the most common failure and the cheapest to remediate at scale; then get essential text out of bitmaps; then bring overlay contrast up to standard. Those three cover the large majority of image-related findings on a typical store.