WCAG for Ecommerce
WCAG 1.1.1 Non-Text Content — Alt Text for Images
If an image, icon, infographic, or product visual communicates meaning, shoppers who cannot see it need an equivalent text alternative.
For D2C teams, this is not just a standards question. It is a revenue-path question. When a WCAG criterion fails on a product page, filter interface, or checkout form, it creates both customer friction and legal exposure.
What this means in plain English
If an image, icon, infographic, or product visual communicates meaning, shoppers who cannot see it need an equivalent text alternative.
On ecommerce sites, this criterion matters because shoppers are rarely reading one clean article. They are evaluating products, interacting with filters, switching variants, reviewing shipping promises, and moving through forms under time pressure. When the underlying accessibility rule breaks, the buying journey breaks with it.
Why it matters for ecommerce
Product galleries
swatch thumbnails
lifestyle imagery with promotional text
payment icons and trust badges
ADA complaints against online stores usually do not focus on abstract theory. They focus on failed tasks: a user cannot understand a product image, cannot interpret a discount, cannot complete a form, or cannot recover from an error. That is why even one overlooked success criterion can create outsized legal and commercial risk.
How to check if you comply
Manual test
Turn on a screen reader and move through product listings, product detail pages, and homepage hero modules. Listen for whether images are skipped, read as raw filenames, or announced with useful context.
Automated test
Use axe, Lighthouse, or WAVE to flag missing alt attributes, but manually judge quality because a meaningless alt attribute can still pass tooling.
How to fix violations
Write concise alt text for informative images, leave decorative images empty with alt="", and move text out of graphics whenever possible.
<img src="serum-bottle.jpg" alt="Vitamin C serum bottle with pump applicator" />
<img src="divider.svg" alt="" />The best fix is usually at the component level. If the problem lives in a reusable product card, accordion, swatch selector, or form field, repair the shared component once instead of chasing the same violation page by page.
Common mistakes stores make
- Using SKU names as alt text
- Repeating the page headline in every image alt attribute
- Leaving button icons unnamed
- Treating text baked into images as decorative
These mistakes recur because ecommerce teams optimize for speed, visual merchandising, and third-party integrations. Accessibility gets treated as cleanup work instead of release quality, so the same defect reappears with every new campaign or theme update.
Why this matters legally
In 2025, 8,667 ADA lawsuits were filed across federal and state courts. Plaintiff firms do not need every WCAG failure to build pressure. They only need enough reproducible barriers to show that disabled shoppers cannot access the same buying journey. That makes criteria like WCAG 1.1.1 Non-Text Content — Alt Text for Images commercially and legally material, not academic.
Related reading
FAQs
Does every ecommerce image need alt text?
Informative images need meaningful alt text; purely decorative images should usually have empty alt text so assistive tech can ignore them.
Can AI-generated alt text solve WCAG 1.1.1 by itself?
No. Generated text can help with drafting, but humans still need to verify accuracy, relevance, and merchandising context.
What product images are highest risk?
Primary product photos, swatches, badges, icons, and any image that changes buying decisions are the first places to fix.