You've written alt text for every product photo. Every blog image has a description. By most sellers' definition, that's accessibility handled — check the box, move on. Then an accessibility audit, or worse, a demand letter, comes back with a list of failures you didn't know existed, on a site you genuinely thought was covered.
Alt text satisfies exactly one WCAG success criterion out of more than eight that specifically govern images. Decorative images with the wrong alt attribute, text baked into promotional banners, low-contrast overlays on product tiles, keyboard-inaccessible lightboxes — all of these fail independently of how good your alt text is, because they're testing entirely different things.
This guide covers the image-specific WCAG criteria alt text doesn't touch, why e-commerce sites specifically carry outsized legal exposure here, and the genuinely good news: most of the fixes double as real SEO wins, not just compliance overhead.
Key Takeaways
- Alt text covers WCAG 1.1.1 (Non-text Content) only — more than eight other image-specific success criteria govern decorative images, text-in-images, contrast, and interactive galleries.
alt=""is a valid, deliberate signal for decorative images; a missing alt attribute is a coding error, and the two are not the same thing to a screen reader.- Text baked into a banner or product image as a picture, rather than real HTML text, fails WCAG 1.4.5 unless the visual presentation is genuinely essential to the content.
- Product galleries and lightboxes need keyboard navigation, a working Escape key, and screen reader announcements on image change — none of which alt text provides.
- Figcaptions, aria-labels, and structured data captions reinforce the same image context for screen readers and Google simultaneously — fixing accessibility gaps is one of the few changes that pays off twice.
The "Alt Text = Accessibility Done" Myth
Alt text satisfies WCAG success criterion 1.1.1, Non-text Content — a real and important requirement, but only one line item among the image-specific criteria an audit actually checks. Treating it as the whole standard is the single most common gap between what sellers believe they've fixed and what a compliance review finds.
An audit tool or a plaintiff's expert witness checks decorative image handling, text-in-images, color contrast on overlays, keyboard access to interactive image components, and SVG labeling as separate, independently scored items. A site can pass every alt text check and still fail on all five of those — and increasingly does, since alt text has become the one accessibility fix most sellers already know to do.
Decorative Images: Empty Alt, Not Missing Alt
Purely decorative images — a background texture, a divider graphic, an icon that repeats information already stated in visible text nearby — should carry alt="", an empty but present attribute, paired with role="presentation" where the element allows it. That combination tells assistive technology to skip the image entirely rather than announce anything about it.
Writing alt="decorative image" is a common and understandable mistake, but it's wrong in the opposite direction from a missing attribute: it forces a screen reader to announce a phrase that conveys zero useful information, wasting a listener's attention on an image that shouldn't be announced at all. Empty alt text isn't a shortcut or an oversight — it's the correct, deliberate value for genuinely decorative content.
Complex Images: Infographics, Charts, and Product Diagrams
A short alt attribute can't carry the full information in an infographic, a sizing diagram, or a data chart — these need a short label plus a longer description delivered through aria-describedby, a <figure> and <figcaption> pair, or a link to a full text description elsewhere on the page.
On a product page, this shows up most often in size charts and assembly diagrams. A short alt like "Sizing chart for men's fitted t-shirts" tells a screen reader user what the image is; the actual measurements need to live in an accessible table or a linked description, not solely inside the pixels of a chart image. For the underlying principles of writing that short label well, see How to Write Alt Text for Product Images.
Text in Images: WCAG 1.4.5 and the Promotional Banner Problem
WCAG 1.4.5 requires that text be delivered as actual, selectable HTML text rather than baked into an image, unless the specific visual presentation is essential to the content — a logo, a signature, or text that's genuinely part of an image being discussed as an image. Everything else needs to be real text, styled with CSS, not a picture of text.
This directly targets a habit common across promotional banners, product labels showing pricing, and hero images carrying a headline. A "20% off" banner rendered as a JPEG fails this criterion outright — that same message as real HTML text over a background image passes, resizes properly, and, as a side benefit, becomes crawlable and indexable by Google in a way baked-in image text never is.
Color Contrast on Text Overlays: The Numbers That Actually Matter
Text placed over a photo — a hero banner headline, a sale badge on a product tile — needs a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text (roughly 18pt and above, or 14pt bold), measured against the actual pixels behind it, not an assumed background color.
The common failure case is white text placed over a light or busy product photo, where the ratio can drop well below 4.5:1 in specific regions of the image even if it looks readable at a glance on a bright monitor. Auditing this properly means checking contrast against the actual image, not the container's CSS background color — a semi-transparent dark overlay behind the text is the most reliable fix when the underlying photo itself can't be controlled.
Image-Based Buttons and Links: Alt Text Describes the Action
When an image functions as a button or a link — an arrow icon that submits a form, a magnifying glass icon that opens search — its alt text should describe the destination or action the click performs, not the visual appearance of the icon itself. "Submit form" is correct. "Arrow icon" tells a screen reader user nothing about what happens next.
This is a different rule from product photo alt text, and it's easy to apply the wrong pattern in each direction: describing a clickable icon's appearance instead of its function, or describing a static product photo's function instead of its appearance. Match the alt text to what the image actually does on the page.
Product Galleries and Lightboxes: The Interactive Layer Alt Text Can't Cover
A product gallery or lightbox is an interactive component, and none of its accessibility requirements are satisfied by writing good alt text on the individual images inside it. Keyboard users need to navigate between images without a mouse, focus needs to stay trapped inside the modal while it's open, and Escape needs to close it and return focus to whatever triggered it.
Screen reader users additionally need an announcement when the displayed image changes — without one, a screen reader has no way to know the visible product photo just switched, even if every individual image has perfect alt text. This is a common blind spot precisely because it looks like an image problem when it's actually a component and interaction-design problem.
Image Maps: Still Around, Still Need Per-Area Alt Text
Image maps are rare today but still show up in interactive lookbooks and shoppable outfit graphics, where clicking different regions of one photo links to different products. Each clickable area needs its own alt text describing what that specific region links to — a single alt attribute on the parent image doesn't cover the individual hotspots at all.
If you're building a shoppable lookbook feature, a set of individually tagged, absolutely positioned hotspot buttons over a static image is generally more accessible and easier to maintain than a true HTML image map, while achieving the same visual effect.
SVG Accessibility: Labeling Icons and Illustrations Correctly
An SVG used as meaningful content needs role="img" paired with aria-label, or a <title> and <desc> element nested inside the SVG itself, so assistive technology has something to announce. A purely decorative SVG — an ornamental divider, a repeated background pattern — should carry aria-hidden="true" so it's skipped entirely, the SVG equivalent of alt="" on a raster image.
Getting this backwards in either direction causes real problems: a meaningful SVG icon with no label announces as nothing at all, while a decorative SVG left unhidden can clutter a screen reader's output with meaningless noise on every single page it appears on.
Motion and Animation: Respecting prefers-reduced-motion
Autoplay image carousels and looping hero videos should honor the prefers-reduced-motion media query, pausing or removing continuous motion for users who've set that preference at the operating system level — a real accessibility need for users with vestibular disorders, not just a nice-to-have.
This is a straightforward CSS or JavaScript check most sites simply never implement, since autoplay motion is usually added purely for visual polish without anyone considering the subset of visitors it actively harms. Checking for and honoring this preference costs little engineering effort relative to the accessibility gap it closes.
Icon Fonts vs. SVG vs. img: Which Wins on Accessibility
SVG with proper role, aria-label, or embedded <title>/<desc> is the most accessible option of the three, because it can carry semantic labeling directly and scales without quality loss. Icon fonts are the weakest choice — they render as arbitrary Unicode characters that some screen readers announce incorrectly or not at all, and they break entirely if the font fails to load. A plain <img> sits in between: accessible with correct alt text, but heavier and less flexible than SVG for icon-scale graphics.
If your site still relies on an icon font for interface elements, migrating to labeled inline SVG is one of the higher-leverage, lower-risk accessibility fixes available, since it improves both screen reader behavior and rendering reliability at once.
The SEO Overlap: One Fix, Two Benefits
Figcaptions, aria-label attributes, and structured data image captions all reinforce the same contextual information for screen readers and for Google's image-understanding systems simultaneously — there's no meaningful tradeoff between writing for accessibility and writing for search visibility here. A well-captioned infographic or product diagram serves both audiences from the same piece of markup.
This overlap is genuinely useful leverage for a seller with limited time: fixing accessibility gaps on product and content images isn't purely a compliance cost, it's one of the few changes that improves rankings and reduces legal exposure from the same piece of work. For the broader picture of how alt text specifically supports both goals, see What Is Alt Text: The Complete Guide.
The Legal Reality: ADA, Section 508, and the EU Accessibility Act
ADA and Section 508 lawsuits targeting e-commerce websites over inaccessible images and interfaces have become a real and growing category of litigation in the US, with WCAG 2.1 AA functioning as the de facto legal baseline courts and settlement agreements reference even though ADA itself doesn't name a specific technical standard. Meeting WCAG 2.1 AA is the practical target for reducing that exposure, not a specific legal requirement written into the statute itself.
The EU Accessibility Act adds a parallel compliance deadline for businesses selling into EU markets, with its own enforcement mechanism separate from US litigation risk. Sellers operating in both markets should treat WCAG 2.1 AA as the shared technical baseline that satisfies the intent of both regimes, rather than maintaining two separate compliance efforts.
Platform-Specific Angles: Shopify, WordPress, and Custom React
Shopify sellers have a growing ecosystem of dedicated accessibility apps that scan themes for common issues — contrast, missing alt text, keyboard navigation gaps — though most still require manual review of custom sections and any imagery added outside the app's scan scope.
WordPress sites commonly lean on plugins like WP Accessibility or One Click Accessibility for baseline fixes (skip links, contrast adjustments, some ARIA cleanup), but plugin-level fixes rarely catch theme-specific issues like a custom lightbox gallery or a hero banner with baked-in text — those need direct template edits regardless of which plugin is installed.
Custom React builds benefit most from adopting established headless UI patterns for image-heavy components — accessible dialog and carousel primitives that already handle focus trapping, keyboard navigation, and ARIA wiring correctly, rather than hand-rolling a lightbox from scratch and re-solving problems these libraries have already solved.
Testing Tools: What to Actually Run
axe DevTools and WAVE both catch a large share of image-specific issues automatically — missing alt attributes, contrast failures, some ARIA misuse — directly in the browser as a extension, making them the fastest first pass on any page. Lighthouse's Accessibility audit, built into Chrome DevTools, adds a scored report covering many of the same checks alongside broader performance and SEO data in one run.
None of these substitute for manual screen reader testing, since automated tools can't judge whether alt text is actually descriptive or whether a gallery's screen reader announcements make sense in practice. NVDA (free on Windows) and VoiceOver (built into every Mac) are the two most practical options for a manual pass — running through your product pages and gallery interactions with one of them surfaces real usability gaps automated scanners miss entirely.
Common Mistakes That Fail Audits Anyway
A handful of recurring mistakes account for most avoidable accessibility failures on image-heavy sites:
alt="image"oralt="picture of product". Both are technically present but convey zero useful information — indistinguishable from having no alt text at all in practice.- Decorative images with keyword-stuffed alt text. Filling a decorative image's alt attribute with target keywords instead of leaving it empty fails the decorative-image criterion and reads as manipulative to both screen readers and search engines.
- Contrast failures on white text over light product photos. A common design choice that frequently drops well below 4.5:1 in the specific region behind the text, even when it looks fine on a quick visual check.
- No keyboard navigation in a product lightbox. A gallery that only responds to mouse clicks locks out keyboard-only and screen reader users entirely, regardless of how good the underlying image alt text is.
- Baked-in promotional text on banners. A sale percentage or headline rendered as part of a JPEG rather than real HTML text fails WCAG 1.4.5 and is invisible to Google's text-based crawling of the page.
Auditing an Existing Site Without Starting From Zero
Screaming Frog SEO Spider's accessibility report can crawl an entire site and flag missing alt attributes, along with several other accessibility-adjacent issues, at scale — a practical starting point for a catalog too large to review page by page manually.
Batch-fixing works best prioritized by page type rather than alphabetically or randomly: product pages carry the most legal and commercial risk and should be fixed first, followed by category and landing pages, with blog and purely editorial imagery coming last. This ordering matches both litigation risk (product pages are what plaintiffs' audits typically target) and revenue impact, since a product-page fix also tends to be the one that overlaps most with SEO gains. For a broader checklist covering the full image SEO picture alongside these accessibility items, see Image SEO Checklist and How to Write Alt Text for Every Product Type.
Getting the Fundamentals Right Across a Growing Catalog
Everything above assumes you're starting from images that already have some baseline alt text worth refining — the harder problem for a lot of sellers is generating that baseline consistently across hundreds or thousands of product photos in the first place. ImgSEO generates SEO-aware alt text and metadata across a batch of product images, giving you a real starting point to layer the accessibility-specific fixes in this guide on top of, rather than writing every description from scratch.
Frequently Asked Questions
Does accessibility help SEO? Yes, substantially, because the two disciplines read many of the same signals. Descriptive alt text, figcaptions, aria-labels, and structured data captions all give both screen readers and Google's crawlers the same contextual information about an image. Fixing accessibility gaps on product and content images is one of the few changes that improves compliance and search visibility at the same time.
Is alt text enough for WCAG compliance? No. Alt text satisfies one success criterion (1.1.1, Non-text Content) out of more than eight image-specific criteria in WCAG 2.1 AA. A site can have flawless alt text on every image and still fail an audit over text-in-images, insufficient color contrast on text overlays, missing keyboard navigation in a lightbox, or unlabeled decorative SVGs. Alt text is necessary, not sufficient.
What's the difference between alt="" and no alt attribute at all? alt="" is a deliberate, valid signal telling assistive technology to skip a purely decorative image entirely. A missing alt attribute is a coding error that some screen readers fill in by announcing the full image filename instead, which is often worse than silence. Every img element needs an alt attribute — empty is a valid value for decorative images, absent is not.
Do I need to fix every image on my site at once? No. Product images and any image that conveys information (infographics, size charts, pricing banners) should be prioritized first, since they carry the most legal and commercial risk. Purely decorative blog imagery and background textures can follow in a second pass — an audit tool like axe DevTools or Screaming Frog's accessibility report can help you triage by page type before you start fixing anything.
Does a lightbox or product gallery need special accessibility work beyond alt text? Yes. A gallery or lightbox is an interactive component, not a static image, so it needs keyboard navigation between images, a working Escape key to close, focus trapped inside the modal while open, and a screen reader announcement when the displayed image changes. None of that is covered by writing good alt text on the images themselves.
Conclusion
Alt text is the entry point to image accessibility, not the finish line. The gaps that actually fail audits and attract legal attention — decorative images marked wrong, text baked into banners, contrast failures on overlays, lightboxes with no keyboard path through them — sit entirely outside what alt text can fix, no matter how well it's written.
Start by triaging your product pages first, since that's where both litigation risk and SEO upside concentrate. Fix the mechanical, high-leverage items — proper alt="" on decorative images, real HTML text instead of baked-in banner text, keyboard access to your gallery — before moving to lower-risk editorial imagery. Run an automated scan to catch the obvious gaps, then do at least one manual pass with a real screen reader, since that's the only way to catch what automated tools consistently miss.
For the fuller picture of how image SEO and accessibility fit together across a full site, see the Image SEO Guide.
