Shop problem: customers who use screen readers often can’t tell which product or variant a photo shows — that leads to wrong orders, frustrated shoppers and extra support work. Fixing product-image alt text is a quick, high-value shop tidy-up: pick one important product page and update the main image alt to a short, factual phrase (product name or model + one distinguishing attribute visible in the photo). Also change purely decorative artwork to alt="" and make any linked image describe its destination. These simple fixes help shoppers who use assistive tech and make an image’s purpose clearer to search engines — write for people, not robots.
Contents
Why alt text matters
Alt text primarily exists for people who can’t see images — screen readers read it so shoppers know what a photo shows or what a linked image will do. The W3C explains when an image is purely decorative and why those images should use an empty alt attribute so assistive tech skips them: W3C: Decorative images. Google’s guidance says alt is the most important attribute for image metadata, but search engines also use page context and image analysis — and explicitly warns against keyword stuffing: Google: Images and metadata. WordPress accessibility guidance follows the same practical rules for editors and themes: WordPress: Alt text best practices.
Quick rules
- Keep alt short and factual: product name/model + one distinguishing attribute visible in the image (colour, size, material, or view).
- For variant thumbnails, include the product name and the variant label (for example, “— navy”).
- If an image is a link or button, alt should describe the destination or action (for example, “Open Workshop Pro 1200 product page”).
- Mark purely decorative images with
alt=""(or use CSS for background decoration) so assistive tech ignores them. - Don’t stuff keywords or try to “guarantee” search rankings — alt helps machines and people understand images, but it’s only one signal among many.
Decision table (copy this)
Image role
Main product photo
What to write in alt: Product name/model + one short distinguishing attribute (e.g. colour or view)
Why: Helps a non‑sighted shopper confirm the item and variant shown.
Variant thumbnail
What to write in alt: Product name/model + variant label (e.g. “— navy”)
Why: Identifies the variant without relying on visual layout alone.
Image used as a link/control
What to write in alt: Describe the destination or action (e.g. “View full gallery for Traveller Backpack”)
Why: Screen‑reader users need the link target or control result, not just the appearance.
Informational graphic (chart/spec)
What to write in alt: Concise alt pointing to nearby full data or caption; full numbers belong in visible text
Why: Alt should signal the information; long data should be accessible in page text or a linked long description.
Decorative artwork
What to write in alt: alt=""
Why: Tells assistive tech to skip the image; prefer CSS backgrounds when the image adds no content.
Copyable templates
Workshop Pro 1200 — oak worktop, front view
Traveller Backpack 15" — navy, front pocket visible
Load-capacity chart — see caption for numeric values
STRONG mobil værktøjsvogn — lockable castors (variant)Audit checklist (copyable)
Audit date: [YYYY-MM-DD] Product URL: [paste live URL]
Main image alt now: [paste current alt]
Is main image decorative? [yes/no]
If not decorative:
- Does alt include product name/model? [yes/no]
- Does alt include one short distinguishing attribute? [yes/no]
Variant thumbnails: do alts indicate variant? [yes/no]
Linked images/buttons: do alts describe destination/action? [yes/no]
Decorative images: are they alt="" or implemented via CSS? [yes/no]
Spec charts: full data moved to caption/page text? [yes/no]
Quick test: screen reader (VoiceOver/NVDA) — result: [pass/fail]
Change made: [new alt / alt="" / added caption]
Next batch: [estimate pages and date]Links and next steps
Do this now: pick one high-traffic product page, set the main image alt to the product name plus one short identifying detail (or set decorative images to alt=""), update any linked images so their alts describe the destination. Example: on a timber workbench product set the main image alt to “Workshop Pro 1200 — oak worktop, front view” so a non‑sighted shopper can confirm both model and visible finish, then open the page with a screen reader (VoiceOver, NVDA or mobile equivalent) and record the result on the audit checklist above.
If you’d like a short refresher on creating usable product images or on wording product options that customers actually understand, see these related guides: Create shop images with AI and WooCommerce variation option names and defaults.
Fix one high-traffic product page: set the main image alt to “Product name — one visible attribute” (or alt=”” for decorative images), update linked-image alts, then test with VoiceOver or NVDA and log the result on the audit checklist.