Image alt text (or alternative text) is the written description of an image on a webpage. Screen readers voice it for shoppers who can’t see the image, and browsers display it in place of the image when the file fails to load.
Alt text makes content more accessible for people with disabilities, and it improves search engine optimization (SEO). According to Google, it’s the most important attribute for telling search engines what an image shows, which means that a description that makes a product photo accessible can also help it surface in image search results.
This guide covers what image alt text is, why it matters for accessibility and search, and how to write and add it across your store. You’ll also get a good-versus-bad example table and a checklist to run before you publish.
What is image alt text?
Image alt text is a short text description that conveys an image’s content or function. It provides meaning in the instances when users can’t see the image itself.
In an online store, alt text communicates the purpose of product photos, lifestyle shots, banners, and icons. It allows shoppers using screen readers to know whether they’re hearing about a product, a promotion, or a button, which is why it’s a core part of web accessibility.
Alt text, alt tags, and alt attributes
The three terms are different, but related:
- Alt text (alternative text): The description you write.
- Alt attribute: The part of an image’s HTML that holds the alt text.
- Alt tag: The phrase is a common misnomer for the alt attribute on the <img> tag, HTML has no <alt> element.
Here’s where the text lives in the code:
<img src="silk-pillowcase.jpg" alt="Silver silk pillowcase resting on a made bed">
When an SEO or accessibility tool flags a “missing alt tag,” treat it as a prompt to review the image rather than a command to fill every field. What the image needs depends on the job it does, which the W3C’s alt decision tree breaks into three cases:
- Descriptive alt text. The image carries information a reader would lose without it, like a product’s color, a size chart’s numbers, or text set inside a banner. Write that information into the alt text.
- Functional text. The image does a job rather than showing something, like a logo that links to your homepage or an icon that triggers an action. Describe the destination or action, not how it looks.
- An empty alt attribute. The image only adds visual polish or repeats text that’s already nearby. Leave the attribute empty (alt="") so screen readers skip it.
When an image doesn’t fit neatly, picture it failing to load: if a shopper would lose something useful, it needs a description; if nothing of value is missing, it can stay empty.
Why image alt text matters
Alt text plays an important role in accessibility, user experience, and search.
Accessibility
People with visual impairments often navigate the web with a screen reader, which voices the alt text for each image. Without it, a person who’s blind may have no way of knowing what an image contains, because a screen reader can’t read it. Missing or empty alt text leaves those visitors without the context everyone else gets.
A 2026 WebAIM report found that more than one in four images on popular home pages have missing, questionable, or repetitive alternative text. Linked images were a frequent offender: one out of every four linked images was missing alt text, leaving screen reader users with a link but no idea where it might lead.
Writing alt text is one way you can foster an accessible store and accessible marketing, and work toward an ADA-compliant website.
User experience
Alt text is also helpful when images won’t load. As noted by Mozilla, alt text appears in place of an image when a browser doesn’t display it because of network errors, content blocking, or link rot (the tendency of hyperlinks to decay over time).
On a weak mobile connection, a product page with good alt text still tells the visitor what each missing image was meant to show, rather than displaying a broken-image icon. That way the page is still functional when images fail, which factors into website usability and the UX signals tied to search.
Image SEO
Alt text helps search engines understand an image and can improve its eligibility for relevant image results. Google uses alt text as important metadata to work out an image’s subject, so descriptive text can qualify a product photo to appear in image search results.
Google’s guidance is to include keywords only when they describe the image, and to avoid stuffing the alt attribute with terms. Treat alt text as one piece of a wider image SEO and product page SEO approach.
Image alt text examples for ecommerce
- Product photos
- Lifestyle photos and texture details
- Logos, icons, and linked images
- Infographics, size charts, and images of text
- Decorative and background images
The right alt text depends on what an image is and where it sits on the page. An image might need one description when it’s selling a product, and another when it’s acting as a link.
When you invest in product photography, you want to make sure those images actually reach all of your visitors. Tique Chandler, founder of Chandler Honey, knew she needed strong visuals in order to sell her product. “If people weren’t going to be able to taste [it] themselves, they needed to eat with their eyes,” says Tique on an episode of Shopify Masters. Alt text is how that visual work reaches shoppers who can’t see the photo.
Here’s how weaker and stronger alt text compare across common store images:
| Image context | Weak alt text | Strong alt text | Why the stronger version works |
|---|---|---|---|
| Product photo on a product page | “shirt” | “Men’s navy and white floral Hawaiian short-sleeve button-down shirt” | Names the product type, color, pattern, and cut a shopper would search for |
| Lifestyle photo showing texture | “pillowcase” | “Hand pulling on a silver silk pillowcase to show its sheen and drape” | Describes the tactile quality the photo conveys |
| Logo in the site header | “logo” | “Chandler Honey logo” | Names the brand |
| Image used as a link | “arrow” | “Shop the bedding collection” | Describes where the link goes |
| Infographic or size chart | “chart” | “Size chart: US women’s sizes 4 to 16 with bust, waist, and hip measurements in inches” | Names the chart type and the data it carries |
| Image of text, such as a sale banner | “banner” | “Summer sale: 20% off sitewide through July 31” | Screen readers can’t read text in an image, so you’ll want to repeat it |
| Decorative background graphic | “swirl graphic” | empty alt attribute (alt="") |
A decorative image carries no information, so it should be skipped |
Product photos
For a product photo, consider what the shopper might be evaluating: type, color, material, and any defining feature.
Skip the camera details and the background. A description like “navy floral Hawaiian shirt” tells a screen reader user and a search engine what’s for sale, while “shirt on a white background” tells neither anything useful.
Lifestyle photos and texture details
Lifestyle photos often exist to show a quality a shopper can’t feel through a screen, so the alt text should name that quality.
Elle Liu, founder and CEO of Eucalypso, leans on close-up images for exactly this.
“We do a lot of closeup shots so you can actually see the ripples of the fabric as it moves in a picture, and the videos are amazing because you get to see how silky it is,” she says on an episode of Shopify Masters.
Alt text that mentions sheen, drape, or weave delivers that detail to people who can’t see the image.
Logos, icons, and linked images
Logos are never decorative, so they should always include the brand name as their alt text rather than the word “logo.”
For functional icons and linked images, describe the action or the destination, not the shape. An arrow that opens the next product should say “View next product,” not “right arrow,” so a screen reader user knows what will happen if they click.
Infographics, size charts, and images of text
For an infographic, size chart, or graph, name the type and summarize the data it shows.
Section508.gov suggests opening with the format, like “bar chart” or “size chart,” then describing the trend or key figures, and linking to a full data table beneath the image when the detail runs long. If an image contains text, such as a sale banner, include that text word for word, since a screen reader can’t read text that’s part of an image.
Decorative and background images
Purely decorative images, like a background swirl or a divider, don’t have any information a shopper needs.
You can assign these empty alt text so that assistive technology skips them. The next section covers how an empty alt attribute differs from a missing one.
How to write effective alt text
- Be specific but concise
- Avoid duplicative text
- Use keywords naturally
- Leave decorative images empty
- Write for the image’s context
Effective alt text describes an image’s purpose in context, not every visual detail. Because the same image can play different roles on different pages, the best description might change with placement.
The suggestions below come from federal accessibility guidelines and Google’s image documentation.
Be specific but concise
Keep alt text short and focused on the meaning of the image. Section508.gov suggests communicating the same information the image conveys, referring to the relevant content rather than how the image looks, and leaving out extra detail.
The description should read quickly when screen readers voice it aloud. Shopify’s Help Center caps the product alt text field at 512 characters and lists 125 or fewer as the recommended length.
Avoid duplicative text
If an image repeats information already in the surrounding text, don’t force screen readers to hear it twice by restating it in the alt text. When an infographic’s takeaways appear in the body copy, describe what the infographic is rather than retyping every figure.
Use keywords naturally
Work keywords in only where they describe the image, such as product type, color, material, model name, or use case.
A natural description like “wide-brimmed dark brown canvas sun hat” carries the terms shoppers search for. Cramming in unrelated terms is keyword stuffing. Google treats it as a spam signal, and it works against you in keyword density terms.
Leave decorative images empty
An empty alt attribute is not the same as a missing one, and the difference matters. An empty attribute (alt="") intentionally tells assistive technology to skip a decorative image.
A missing attribute gives no guidance at all, and some screen readers respond by reading the image’s file name aloud. So decorative images should get a deliberate alt="".
Write for the image’s context
The same image might need different alt text depending on where it appears.
For example, a photo of a sneaker on a product page should describe the shoe’s color and style, while the same photo used as a link to a category should describe where the link leads. Before writing, ask yourself what job the image does on this page, then describe that.
How to add image alt text
You can add alt text wherever you manage your store’s images: in product media, in the theme editor, or directly in HTML.
How to add image alt text in Shopify

To add alt text to a product image in the Shopify admin:
- From your Shopify admin, go to Products.
- Click the name of the product you want to edit.
- Click a product media item to open its preview page.
- Click the alt text field and enter your description. The media editor might suggest alt text for images where alt text isn’t already filled in.
- Click Save, then use the Exit button to exit the preview.
How to add alt text to theme images
Images that live in your theme, like homepage banners and section graphics, get their alt text in the theme editor. Shopify’s theme accessibility guidance walks through the process:
- In the theme editor sidebar, click the section with the image.
- Click Edit below the image, enter the alt text, and save. (Pair this with appropriate image sizes so banners load fast and describe well.)
How to add alt text in HTML
If you’re editing raw HTML, the alt text goes in the alt attribute inside the <img> tag:
<img src="sun-hat.jpg" alt="Wide-brimmed dark brown canvas sun hat">
Use a plain, descriptive value, and use an empty attribute (alt="") for decorative images you want screen readers to skip.
Should you use an alt text generator?
An alt text generator uses artificial intelligence (AI) to draft descriptions, which can help when you’re managing a large catalog or backfilling images in bulk.
Mikey Moran, CEO of Private Label, appreciates the time-saving that comes with an alt text generator. “If you’ve set up a store and you have thousands of images, you have to add the alt text, because it’s important not just for SEO but for accessibility,” he says. “If we get to the point where it can view the photo and start adding that alt text in bulk, that can save you so much time.”
As with any AI-generated content, it’s important to review and edit the AI output for accuracy and tone of voice. James Madison University’s accessibility guidance treats AI alt text as a drafting tool rather than the final authority. An AI model usually sees only the pixels, so it can miss why an image was included, mislabel objects or people, or produce descriptions that are too long or too vague.
Before publishing AI-generated alt text, check that it captures the image’s purpose in context, names products correctly, and is concise. Consider manually writing alt text for hero images, brand-critical photos, and anything where an inaccurate description would mislead a shopper.
If you’re interested in trying out a generator, check out the selection of alt text apps in the Shopify App Store that offer AI-assisted and bulk options.
Image alt text checklist
Before you publish a page, you’ll want to confirm:
- Every meaningful image has alt text (product photos, lifestyle shots, banners, icons, and logos)
- Each description reflects the image’s purpose where it appears
- Descriptions are concise and skip “image of” or “photo of,” which screen readers add on their own
- Any text inside an image is repeated word for word, and charts or infographics are summarized
- Purely decorative images use an empty alt attribute (alt="") so screen readers skip them
- Keywords appear only where they describe the image, with no keyword stuffing
- Any AI-generated descriptions have been reviewed for accuracy and context
For Shopify stores, check alt text across product media, collection images, theme banners, icons, logos, and blog images, and review any AI-generated descriptions before publishing.
Image alt text FAQ
What is the alt text of an image?
Alt text, short for “alternative text,” is a brief description of an image stored in the alt attribute of its HTML. Screen readers voice it for people who can’t see the image, browsers show it when the image can’t load, and search engines use it to understand the image’s subject.
How do I write alt text for an image?
Describe the image’s purpose in plain, specific language, and keep it short. Name what matters to the reader, such as a product’s type, color, and material, and skip “image of.” Repeat any text inside the image word for word, and give purely decorative images an empty alt attribute so screen readers skip them.
What is the standard alt text for images?
There’s no single standard string. The accepted practice is a concise alternative text that conveys the same information as the image and fits its context, with keywords included only where they genuinely describe the image. Decorative images are the exception: their standard treatment is an empty alt attribute (alt="") that tells screen readers to skip them.
Is image alt text important for SEO?
Yes. Google uses alt text as metadata to understand an image and decide where it can appear in image results. Descriptive, accurate alt text helps your product images surface for relevant searches, while keyword stuffing can hurt you. It matters for accessibility, too.
What is the difference between alt text and image description?
A visible image description or caption appears on the page and adds context for everyone, often beyond what the image alone shows. Alt text usually isn’t visible: screen reader users hear it, and sighted users see it only if the image fails to load.




