Alt text for product images: how to write it for accessibility and SEO

Missing or poor-quality alt text on product images is the most common accessibility failure on ecommerce sites. It appears on approximately 83% of sites scanned by Complyko and is consistently one of the first issues cited in ADA demand letters. Yet it is one of the quickest to fix for small catalogs and one of the most automatable at scale.

This guide covers how to write effective alt text for ecommerce product images, how to handle every edge case and how to approach alt text at scale for large catalogs.

What alt text does and why it matters

The alt attribute on an <img> element provides a text alternative. When an image cannot be perceived (user is blind, image fails to load, text-only browser), the alt text serves in its place.

Screen readers read alt text aloud when they encounter an image. See our screen reader testing guide for how this sounds in practice. If alt is missing, screen readers fall back to the filename: “product-image-v2-blue-final-REVISED.jpg, graphic.” If alt is empty (alt=""), the image is skipped. If alt text is provided, it replaces the image.

WCAG 1.1.1(Non-text Content, Level A) requires that all non-text content has a text alternative serving the equivalent purpose. For product images, that purpose is communicating the product's appearance.

How to write alt text for product images

Describe what the image shows in a way that serves the same purpose as viewing it. For product images, the purpose is communicating appearance. Include:

• What the product is (if not already clear from context)
• The color or material variant shown
• Key visual features relevant to a purchase decision
• The context if it is a lifestyle image (product in use)

Keep it under 125 characters. Screen readers read the entire alt text without pause. Long alt disrupts browsing flow.

Alt text formulas for ecommerce

Good vs bad alt text examples

Alt text for product variant images

Variant images are the most important to get right. When a user selects a color and the main image updates, the alt text must reflect the variant shown.

<!-- Initial state: blue selected -->
<img id="main-image"
     src="shoe-blue.jpg"
     alt="Running shoe in ocean blue, side view" />

<!-- After user selects "Coral Pink" variant -->
<!-- JavaScript must also update the alt attribute: -->
<script>
mainImage.src = "shoe-coral.jpg";
mainImage.alt = "Running shoe in coral pink, side view";
</script>

A static alt that always reads “Blue sweater” when the visible image shows a green sweater (because the user selected green) is confusing and inaccurate.

For Shopify: set alt text per image in the product admin. When variant images are associated with specific variants, each variant image gets unique alt text.

For WooCommerce: product gallery images have alt text in the media library. Variable product images swapped on variant selection need distinct alt text per variant.

Alt text for galleries and carousels

Product galleries with multiple angles of the same product require alt text that distinguishes each image:

Without distinct alt text, a screen reader user hears the same product name five times with no differentiation. Distinct alt for each gallery image provides the visual browsing experience that sighted users get from thumbnails.

When images are decorative

Purely decorative images get empty alt: alt="". This tells screen readers to skip them.

Decorative in ecommerce:

• Background textures and pattern images
• Ornamental dividers
• Icons next to text labels where the text already communicates meaning (checkmark icon next to “Free shipping”)

Be conservative. If there is any question about whether the image conveys information a blind customer would benefit from, add alt text. Missing necessary alt text is worse than providing unnecessary alt text.

CSS background images have no alt mechanism. If a CSS background conveys meaningful content (promotional banner, hero with text), that content must exist as actual HTML text.

Zoom functionality and accessibility

Hover-triggered zoom is inaccessible by default: keyboard users and touch users cannot trigger hover. Provide alternatives: a button to open full-size image or keyboard-triggerable zoom controls.

Full-screen lightbox views need focus trapping, keyboard navigation (arrow keys between images, Escape to close) and their own alt text. See our ARIA guide for dialog patterns.

SVG accessibility in ecommerce

SVGs are common for icons (cart, wishlist, search, account). The approach depends on context:

• SVG inside a button with text label: mark SVG as aria-hidden="true". The text provides the name.
• SVG as the only content in a button (icon-only): add aria-label to the button. Mark SVG as aria-hidden="true".
• SVG as a product illustration: treat like an img. Use role="img" and aria-label.

Lazy loading and alt text

Native lazy loading (loading="lazy") does not affect alt text. The alt attribute is in the HTML from initial parse, regardless of when the image loads.

JavaScript-based lazy loading (replacing src with a data attribute) can cause problems if the placeholder state has missing alt that is not updated when the real image loads. Ensure your lazy loading preserves correct alt text from the start.

Alt text at scale for large catalogs

Stores with thousands of products cannot write individual alt text manually:

For a 1,000-product store with 4 images each, data-driven generation from structured attributes is the most efficient approach. For stores with unstructured product data, AI-assisted generation with human review is the pragmatic choice.

AI tools for generating alt text

Vision-capable AI models can generate descriptive alt text from product images. Current options:

AI-generated alt text is significantly better than missing alt text. But it is not a set-and-forget solution. AI can hallucinate product details (wrong color, wrong material), miss variant-specific information and produce inconsistent brand voice. Always review before publishing. See our AI-generated content disclosure guide for transparency considerations.

Platform setup: Shopify, WooCommerce, Magento, BigCommerce

Shopify

In Shopify admin: Products → select product → click image → enter alt text. For bulk updates, export products to CSV, fill the “Image Alt Text” column and reimport. Shopify apps like SEO Manager and TinyIMG provide bulk alt text editing.

Shopify theme code: product images use {{ image | image_url | image_tag: alt: image.alt }}. If image.alt is empty, the alt attribute will be empty. Ensure alt text is set in the admin for every product image.

WooCommerce

In WordPress: Media Library → select image → fill “Alt Text” field. For product galleries: edit product → Product Gallery → click image → edit alt in media dialog. WordPress stores alt text in postmeta as _wp_attachment_image_alt.

For bulk editing, plugins like Jenga WP (free) or WP Media Library provide spreadsheet-style alt text editing across all images.

Magento / Adobe Commerce

In Magento admin: Catalog → Products → edit product → Images and Videos → click image → enter Alt Text. Magento's image import via CSV supports alt text in the _media_image_label column.

BigCommerce

In BigCommerceadmin: Products → edit product → Images & Videos → click image → fill “Image Description” field. This maps to the alt attribute. BigCommerce's product CSV import supports image descriptions.

SEO benefits of descriptive alt text

Alt text is one of the clearest cases where accessibility directly benefits SEO. Google uses alt text as a primary signal for Google Image Search ranking and for understanding page content.

Practical impact: stores that systematically improve alt text from missing or filename-based to descriptive text report 20-40% increases in organic image search traffic. This is commercial-intent traffic: users searching for product images are often ready to buy.

Google's guidance: “When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page.”

Do not keyword-stuff. “Blue merino wool crewneck sweater mens fashion winter casual comfortable warm” is over-optimized and harmful for screen reader users. Accurate descriptions naturally include relevant keywords.

Common mistakes to avoid

Alt text audit checklist

Frequently asked questions

How do you write alt text for product images?

Use the formula: [Product name] in [color/material], [view/context]. Example: “Merino wool crewneck sweater in navy blue, front view.” Include details that help a blind customer make a purchase decision.

What makes good alt text for ecommerce images?

It describes what the image shows in a way that serves the same purpose as viewing it. Includes the product name, variant details, view angle and relevant features. Avoids filenames, generic terms and keyword stuffing.

Should all images have alt text?

Product images need descriptive alt text. Decorative images get alt="". When in doubt, add alt text. Missing necessary alt is worse than providing unnecessary alt.

How long should product image alt text be?

Under 125 characters. Screen readers read the full alt without pause. If more detail is needed, use aria-describedby to reference a longer description.

How do you handle variant image alt text?

Each variant image needs unique alt including the variant attribute. When JavaScript swaps images on variant selection, update the alt attribute too.

How do you handle alt text at scale?

Use structured templates with product data attributes. Generate programmatically from color, material and category fields. AI-assisted generation with human review for unstructured data. Prioritize top pages by traffic.

Does alt text improve SEO?

Yes. Google uses alt text for Image Search ranking and content understanding. Stores improving alt text report 20-40% increases in image search traffic with commercial intent.

What are the most common alt text mistakes?

Filenames as alt text, “product image” on everything, starting with “Image of”, same alt for all gallery images, not updating alt on variant swap and keyword stuffing.

How do you add alt text in Shopify?

Products → select product → click image → enter alt text. For bulk: export to CSV, fill the “Image Alt Text” column, reimport. Apps like SEO Manager help with bulk operations.

Can AI generate product image alt text?

Yes. GPT-4V, Claude and Shopify Magic can generate descriptive alt text. Quality varies and human review is essential since AI can hallucinate details. AI-generated alt is much better than missing alt.