How to write alt text, with examples for online stores

Alt text is a short written alternative for an image. Screen readers read it aloud, and browsers show it when an image doesn’t load. Good alt text says what the image means on that page, in as few words as possible. Purely decorative images get an empty alt="" so screen readers skip them.

What does WCAG say about alt text?

Alt text is how most images meet 1.1.1 Non-text Content, a Level A success criterion. It says: “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose”, with a few listed exceptions.

Two of those situations come up on almost every site:

• Controls: if an image is a button or link, it needs a name that describes its purpose.
• Decoration: if an image is pure decoration, it must be “implemented in a way that it can be ignored by assistive technology.”

The key words are “equivalent purpose”. Alt text isn’t a caption or a list of everything in the picture. It’s whatever a person would miss if they couldn’t see the image.

What kind of image is it?

W3C’s images tutorial sorts images into a few types. Decide which one you have before you write anything.

Type	Example	What the alt text should do
Informative	A product photo, a photo of your shop	Describe the information the image adds
Decorative	A background texture, a divider, a mood photo next to text that says the same thing	Be empty: alt=""
Functional	A logo that links home, a magnifying glass search button	Describe the action or destination
Complex	A chart, a size guide diagram	Give a short alt plus a longer description nearby
Image of text	A banner that says “Free shipping over $50”	Contain the same words as the image

Informative images

Write the essential information the image conveys. W3C suggests imagining that you’re reading the page aloud over the phone to someone who needs to understand it. What would you say about the image?

Decorative images

Use an empty alt attribute, with no space between the quotes. Don’t leave the attribute out: some screen readers then announce the file name instead.

<!-- Decorative: screen readers skip it -->
<img src="leaf-divider.svg" alt="" />

<!-- Missing alt: some screen readers announce the file name -->
<img src="leaf-divider.svg" />

Purely decorative images can also go in CSS as a background image, which keeps them out of the content altogether.

Functional images

When an image is the only content of a link or button, the alt text names what happens when someone selects it, not what the image looks like. W3C’s example is a printer icon whose alt text is “Print this page”, not “printer”.

<a href="/">
  <img src="logo.svg" alt="Northwind Outfitters home" />
</a>

<button type="submit">
  <img src="magnifier.svg" alt="Search" />
</button>

Complex images

Charts, diagrams and maps carry more than a short phrase can hold. Use a two-part alternative: a short alt that identifies the image, and a full description in the page.

<figure>
  <img
    src="returns-by-month.png"
    alt="Bar chart of returns by month, described below"
  />
  <figcaption>
    Returns fell every month from January to June, from 120 to 45.
    The full figures are in the table below.
  </figcaption>
</figure>

If the chart shows data, a real HTML table of the numbers next to it is often the most useful long description.

Images of text

If an image contains words, its alt text should contain the same words. Better still, use real text. 1.4.5 Images of Text (Level AA) asks you to use text rather than images of text when the technology can achieve the same look, with exceptions for text that can be customized and for presentation that’s essential. Logos count as essential. Real text can be resized, restyled and translated, and it stays sharp when people zoom in.

How do I write good alt text?

A few rules cover most cases:

• Write for the context. The same photo can need different alt text on different pages. A photo of a mountain might be “Rocky Mountain trail at sunrise” on a travel blog and simply “Hiking trips” when it’s a link to your hiking collection.
• Be concise. W3C’s advice is “the most concise description possible of the image’s purpose.” Put the most important information first.
• Skip “image of” and “picture of”. Screen readers already announce that it’s an image.
• Don’t repeat nearby text. If the caption or heading next to the image says the same thing, the image may be decorative.
• Don’t stuff keywords. Alt text is for people. A list of search terms makes the page harder to use.

Here’s the difference in practice:

Weak alt text	Better alt text	Why
IMG_4821.jpg	Founder Maya packing orders in our Leeds studio	File names tell people nothing
Image of a woman smiling	Customer wearing the wool beanie in charcoal	Says what’s relevant to the page
Shoes shoes running shoes best running shoes	Blue trail running shoe, side view, with a chunky lugged sole	Describes, rather than repeating keywords
Click here	Read our sizing guide	For a linked image, name the destination

How do I write alt text for product photos?

On a product page, alt text should describe what a shopper needs to know to buy. Think about what someone in the store would see by picking the item up.

• Color and pattern: “Sage green”, “navy with white pinstripes”.
• Material and texture, when the photo shows it: “brushed brass”, “chunky ribbed knit”.
• The view or detail each photo adds: front, back, side, close-up, inside.
• Scale or fit, when the photo shows it: “shown on a 5 ft 9 in model”, “next to a coffee mug for size”.

Each photo in a gallery adds something different, so each alt text should too. For a linen shirt:

1. Sage green linen shirt, front view, with coconut buttons and a chest pocket.
2. Back view showing the curved hem.
3. Close-up of the woven linen texture.
4. Model wearing the shirt untucked with rolled sleeves.

Avoid repeating the product title on every image. The title is already on the page. Use the alt text to add what the photo shows.

How do I add alt text in Shopify?

Product images

1. In your Shopify admin, go to Products and select the product.
2. Select the image (media item) you want to describe.
3. Select Add alt text, type your alt text, and save.

Shopify accepts up to 512 characters and recommends 125 or fewer. If the media editor offers suggested alt text, read it and rewrite it with the details your shoppers care about before you accept it.

Images in your theme

Banner, slideshow and other section images are set in the theme editor. Go to Online Store › Themes, select Edit theme, then select the section with the image. Look for the edit option on the image to add alt text, and save your changes. The exact labels can vary between themes.

Your theme decides how alt text is written into the page. After you add it, check one product page with a screen reader, or inspect the image in your browser’s developer tools, to confirm it’s there.

What can automated tools check?

Automated checkers, including Google Lighthouse, are good at one part of this job: finding images with no alt attribute at all. That’s worth fixing first.

They can’t tell whether alt text is any good. Many tools will pass alt="image", alt="DSC_0042" or a list of keywords, because the attribute exists. Some flag obvious problems such as file names, but none can judge whether the words fit the image. It can’t decide whether an image is decorative or informative either. W3C notes that this is a judgment only the author can make. It also can’t check that a linked image describes its destination, or that the words in a banner match its alt text.

Plan a manual review: go through your key pages, read each image’s alt text without looking at the image, and ask whether you’d miss anything.

Related guides

• The Shopify accessibility checklist
• What is WCAG 2.2?
• WCAG color contrast requirements, including text over images

Frequently asked questions

How long should alt text be?

As short as it can be while still conveying what the image is for. Often that's a short phrase or one sentence. Shopify accepts up to 512 characters for product media alt text and recommends 125 or fewer.

Should alt text start with 'image of' or 'picture of'?

Usually not. Screen readers already announce that there's an image, so those words add nothing. Start with the information that matters.

When should alt text be empty?

When an image is purely decorative or repeats what the text next to it already says. Use an empty alt attribute (alt with nothing between the quotes, not even a space) so screen readers skip it. Don't leave out the alt attribute entirely, because some screen readers then read the file name.

Does WCAG require alt text?

Yes. Success criterion 1.1.1 Non-text Content, Level A, requires a text alternative that serves the equivalent purpose for non-text content such as images, and requires purely decorative images to be ignorable by assistive technology.

Can a tool write alt text for me?

Some tools, including Shopify's media editor, can suggest alt text for images that don't have any. Treat a suggestion as a draft. Only you know why the image is on the page and what a shopper needs to learn from it.

Sources

• Understanding Success Criterion 1.1.1: Non-text Content
• Understanding Success Criterion 1.4.5: Images of Text
• W3C WAI: Images Tutorial
• W3C WAI: Decorative Images
• W3C WAI: Functional Images
• W3C WAI: Complex Images
• W3C WAI: Images of Text
• W3C WAI: Tips and Tricks for images
• Shopify Help Center: Adding alt text to product media
• Shopify Help Center: Adding alternative text to your theme images