Accessible alt text for Shopify product images describes the visible content of the image in a way that conveys the same purpose to a screen reader user as a sighted user gets from seeing it. Under WCAG 2.2 success criterion 1.1.1, every non-decorative image needs a text alternative. For product images, keep alt text under 125 characters, lead with the product type, include defining attributes (color, material, size variant), and skip phrases like "image of" or "photo showing". Decorative images get alt="", not "decorative".
WCAG 2.2 success criterion 1.1.1 (Non-text Content) is a Level A requirement, the most basic conformance level. It states that all non-text content has a text alternative that serves the equivalent purpose, with exceptions for decoration, formatting, and CAPTCHA.
The phrase that matters is "equivalent purpose." A product image on a product detail page serves the purpose of showing the user what they are about to buy. The alt text must do the same job for a screen reader user. A product image in a lifestyle banner serves the purpose of setting mood or context. The alt text serves that purpose instead.
Same image, different page, different alt text. This is why automated alt text generators consistently underperform humans: they describe the pixels, not the purpose.
The single most common alt text mistake I see on Shopify stores is treating every image as needing description. Decorative images need empty alt (alt=""), and tagging them with descriptions creates noise that pushes screen reader users away from the content that matters.
| Image type |
Treatment |
Example |
| Primary product photo |
Descriptive alt |
Black leather Chelsea boots, side view |
| Product gallery image showing detail |
Descriptive alt |
Black leather Chelsea boots, close-up of stitched welt |
| Variant swatch (color or material) |
Descriptive alt |
Navy variant |
| Lifestyle banner with no text |
Descriptive alt |
Person wearing the boots walking on cobblestones |
| Decorative divider, pattern, or texture |
Empty alt |
alt="" |
| Image of a button (rare in modern themes) |
Alt = button purpose |
Add to cart |
| Background image set via CSS |
No alt attribute needed |
Handled by CSS, not HTML |
| Image with adjacent caption that already says it |
Empty alt |
alt="" (caption does the work) |
The Shopify product image field in admin is the primary place merchants control alt text. When you upload an image, the "alt text" field is where you write the descriptive version. If left blank, the theme renders the image with no alt attribute or with the file name as alt, both of which fail 1.1.1.
There is no formal WCAG limit on alt text length. The 125-character convention is widely cited in accessibility writing (it also matches the limit imposed by some social platforms) and is a useful working budget: it forces the writer to describe purpose, not every visible detail, which is what a screen reader user wants on a product page.
For product images, this is plenty. A descriptive alt for a Shopify product almost never needs more than 80 characters. If you need more, you probably need a long description (aria-describedby referencing a separate text block on the page) and a short alt.
Examples by image type:
- Studio packshot of a single product: 30 to 60 characters
- Detail crop showing a feature: 40 to 80 characters
- Lifestyle image with multiple elements: 60 to 120 characters
- Infographic with data: too long for alt, use
aria-describedby
Here are the patterns I use when bulk-writing alt text for Shopify stores.
Format: {Color} {material} {product type}
Example: Forest green wool crewneck sweater
Why it works: leads with the most-searched attribute (color), names the material (which matters for purchase decision), ends with the product type. Mirrors how a sighted user processes a product image.
Format: {Color} {product type}, {view or detail}
Example: Forest green wool sweater, rear view showing ribbed hem
Format: {Person or context} {action} {product type}, {setting}
Example: Person reading on a couch wearing the green sweater, autumn afternoon light
This style suits brands where the lifestyle context is part of the brand promise. Skip it for pure product utility shots.
Format: {Variant name}
Example: Forest green
Variant swatches are interactive elements. The alt should match the variant name, not describe the swatch's appearance. The user is selecting a variant, not reading a description.
Format: {Collection or campaign name}, {list of visible products if short}
Example: Autumn knitwear collection, three sweaters and a wool coat
Three phrases I remove from alt text on every store I audit:
- "Image of" or "photo of": The screen reader announces "graphic" or "image" before the alt text. Adding "image of" is duplicate.
- "Click to view": The image is in a clickable wrapper. The alt describes the image, the surrounding link describes the action. Conflating them confuses navigation.
- SKU or product code in the alt: Useful for inventory, useless for purchase decisions. Move SKU to a separate field, not the alt.
Stores with more than 500 SKUs cannot write alt text manually for every image. Here are three patterns that scale.
Update your product image rendering Liquid to fall back to a constructed alt if no manual alt exists:
{% assign img_alt = image.alt | default: product.title %}
<img src="{{ image | image_url }}" alt="{{ img_alt }}" />
This gives every image a baseline alt of the product title. Not ideal, but better than empty or filename-based alt.
If your products have consistent metafields (color, material, style), build a template in your theme:
{% assign attr_color = product.metafields.specs.color %}
{% assign attr_material = product.metafields.specs.material %}
{% assign computed_alt = attr_color | append: ' ' | append: attr_material | append: ' ' | append: product.type %}
<img src="{{ image | image_url }}" alt="{{ image.alt | default: computed_alt }}" />
This requires metafields to be populated, but produces structured alt text at scale.
AI vision models can generate plausible alt text. They should not ship without human review for primary product images, but they are useful for two cases: catching missing alt as a baseline, and proposing alt text the merchant edits in admin. AccessifyAI uses this pattern in our alt-text fix flow. The AI proposes the alt, the merchant approves or edits, and the approved alt writes back to the Shopify product image field. The change is a real edit to your product data, not a runtime injection. See it on the Shopify App Store.
Four patterns account for most alt-text failures we see in Shopify stores:
- Filename as alt: Themes that fall back to
image.src or the file basename. The user hears IMG_4521-final-v2-cropped.jpg. This is worse than no alt because the screen reader will not announce a graphic if alt is missing.
- Same alt on every image of a product: Stores that paste the same alt onto 8 gallery images of one product. The user hears
Forest green wool sweater eight times in a row.
- Stock photo brand watermark in alt:
Forest green wool sweater Getty Images (the alt was scraped from the stock photo provider).
- Truncated meta description as alt: A pattern in some apps that pull from SEO meta. The alt reads like a product page summary, not an image description.
The fastest manual check is to navigate your storefront with images turned off. Chrome devtools: open the Network tab, filter to Img, right-click, "Block request domain" on your CDN. Reload the page. Whatever you can still understand is what a screen reader user gets. Whatever you cannot understand has missing or weak alt.
For a structured audit, axe DevTools and Lighthouse will flag images missing alt. Neither tool can evaluate whether existing alt is good, only whether alt is present.
For more on broader WCAG conformance on Shopify, see our WCAG 2.2 Shopify themes breakdown.
Yes. Alt text follows the language of the page. If you publish in English, French, and German, your alt text needs translations in each locale. Shopify Markets supports localized alt text via the GraphQL Admin API or apps like Translate & Adapt.
Alt text is one of many signals search engines use. Google's John Mueller has confirmed multiple times that alt text contributes to image search and provides context for the surrounding page content. Writing alt for accessibility produces SEO-friendly alt as a side effect. Writing alt for SEO produces accessibility-poor alt that crams keywords.
alt is an attribute on the <img> element specifically. aria-label is a broader ARIA attribute that can be applied to many element types. For images, prefer alt. Use aria-label for interactive elements that have no visible text (icon-only buttons, for example).
Yes. Use alt="". The empty string signals to the screen reader to skip the image. Omitting the attribute entirely (<img src="..."> with no alt) is a failure of WCAG 1.1.1 because the screen reader cannot determine intent.
Animated content needs a text alternative that describes what the animation conveys. For a product GIF showing a watch face cycling through complications, alt might be Watch face showing the chronograph, world time, and moon phase displays in sequence. For autoplay videos, you also need controls to pause (WCAG 2.2.2).
No. Shopify does not auto-generate alt text. Some Shopify apps offer auto-generation, with varying quality. The product admin has a manual alt text field on every image upload.