Alt text best practices: how to write image descriptions that work

What alt text is for

Alt text is a short text alternative in the image's alt attribute. Screen readers read it aloud, it shows when an image fails to load, and search engines use it to understand an image. WCAG 1.1.1 (Non-text Content, Level A) requires a text alternative that serves the same purpose as the image.

Four kinds of image, four answers

Do and avoid

• Describe purpose first. Ask what a sighted visitor learns from the image and say that.
• Be brief. WCAG sets no character limit; a short phrase or sentence is usually enough.
• Skip "image of" or "photo of". Assistive technology already announces an image.
• Do not stuff keywords. Descriptive text helps search engines, but a list of keywords is useless to a listener and can look like spam. Google's image guidance recommends useful, descriptive alt text.
• Include text that appears in the image. If a banner says "Free shipping over $50", the alt should say so.
• Do not repeat nearby text. If the caption already describes the photo, a short alt or empty alt may be enough.

Before and after

<!-- Before: missing, filename and vague alt text -->
<img src="IMG_2041.jpg">
<img src="IMG_2041.jpg" alt="IMG_2041.jpg">
<img src="shoe.jpg" alt="shoe">

<!-- After -->
<img src="shoe.jpg" alt="Navy canvas sneaker with white sole, side view">
<img src="divider.svg" alt="">
<a href="/cart"><img src="cart.svg" alt="View cart"></a>

For online stores

Write alt text for every product image: color, material, angle and anything that helps a buyer choose. For a gallery, describe each view differently (front, back, detail). Use the platform's media or alt-text field: see the Shopify store guide, Wix, Squarespace and WordPress guides.

Who uses alt text

Alternative text is read aloud by screen readers, shown when an image does not load, used by braille displays and read by search engines. People who are blind or have low vision depend on it to understand pages. People on slow connections see it while an image loads. A page whose images have good descriptions is simply better for everyone who cannot see them at that moment.

Worked examples

A simple decision process

1. Does the image carry information or lead somewhere? If not, it is decorative, and the alternative text should be empty.
2. Is the information already in the nearby text? If so, a short description or an empty one may be enough.
3. Does it show a function? Describe the function, such as "Search" or "Close".
4. Is it a chart, map or diagram? Give a short description and put the full detail in the text near the image or in a table.
5. Does it contain text? Include that text in the description, and avoid putting essential text in images.

Writing style

• Be concise, usually under 125 characters, but do not cut off meaning to hit a number.
• Do not start with "image of" or "picture of". Screen readers already announce an image.
• Include what a sighted person would notice and need, such as color, shape or visible text.
• Match the language and tone of the page.
• Do not keyword-stuff. Alternative text is for people first; useful descriptions also suit search engines. See accessibility and SEO.

Special cases

• Images of text: use real text instead where possible. If you must use an image, the alternative text should repeat the words.
• Complex images: use a short alt plus a longer description on the page.
• Image links: describe where the link goes.
• Photos of people: describe what is relevant to the content, such as role or activity, not guesses about identity or characteristics.
• Background images in CSS: these have no alt text, so they should only be decorative.
• Automated alt text from AI tools: treat it as a draft and edit it. Generic descriptions can be wrong or unhelpful.

Checking a whole store

On a store with many products, work in batches. Start with the best-selling products and the images used on the home page and collections. Set a convention for product images, for example "[Product name], [color], [view]". Add alternative text when you upload, not as a cleanup project afterwards. Export your image list if your platform allows it, and review it in a spreadsheet. For platform tips see the Shopify guide.

Alt text on different kinds of pages

Context changes the answer

The same photo can need different descriptions in different places. A photograph of a lighthouse in a travel article might be described by its location and weather, in a product catalogue of framed prints by the size and frame, and in a company history page by the building's role in the story. Before writing alternative text, ask what the image is doing on this page for this reader.

Reviewing your alt text

1. Read all the alternative text on a page without looking at the images. Does the page still make sense?
2. Look for file names such as IMG_2043.jpg and fix them.
3. Look for repetition. If every product image has the same description, shoppers cannot tell them apart.
4. Look for text that repeats the caption beside the image. If the caption already says it, the alternative text can be shorter or empty.
5. Check that decorative images have an empty alt, not a missing one.

Alt text, captions and long descriptions

These three are different tools. Alternative text replaces the image for someone who cannot see it. A caption is visible to everyone and adds context. A long description is used for complex images, such as a detailed chart, and can be a paragraph or a table on the page. If you provide a caption that fully describes the image, the alternative text can be brief. If the image is a chart, give the main finding in the alt text and the data in a table below.

Common mistakes

• Leaving the alt attribute out entirely. Screen readers may read the file name instead.
• Writing "image of" or "photo of" before every description.
• Stuffing keywords, such as "cheap shoes buy shoes best shoes online".
• Describing decorative images, which creates noise.
• Using the same alt text for every product image.
• Trusting an automatic generator without reading the result.

A worked example: a small shop's product catalogue

A candle shop has 60 products and each has four photos. The owner decides to write alternative text for the main photo of each product first, since it appears on collection pages, then for the others as time allows. She uses a pattern: scent name, type of candle, color and a notable detail. So "Cedar and Sage soy candle in a matte black tin, lid off" for the main image and "Cedar and Sage soy candle, burning, on a wooden table" for a lifestyle shot. The second image adds nothing the shopper needs, so she marks it decorative.

It takes an afternoon to write the first batch. Afterwards, she adds the habit to her upload routine, and the catalogue stays tidy. A shopper with a screen reader can now tell the products apart, and the shop's image search results are clearer as a side effect.

Quick reference for common situations

Your questions about alt text

• Is it fine to leave the alt empty for every image to save time? No. Meaningful images need a description. Empty alt belongs only on decorative images.
• Should I describe people's appearance? Describe what is relevant to the reader. If a team photo is on an About page, naming the people and the setting is useful. Avoid guessing identity, age or other characteristics that cannot be known from the image.
• What about stock photos that only set a mood? If they add nothing, treat them as decorative. If they set an important tone, a short description is fine.
• Do SVG icons need alt text? They need a name if they are meaningful and should be hidden from assistive technology if they are decorative.
• What is the best way to review hundreds of images? Export the list of image file names and alt values, sort by empty or repeated values and fix the highest-traffic pages first.

A simple template for product alt text

For product images, a pattern saves time and improves consistency: product name, key attribute, view. Examples are "Merino wool scarf, charcoal, folded" and "Merino wool scarf, charcoal, worn with a coat". Put the most useful details first, because screen reader users often skip long text. Review a sample monthly to make sure the descriptions still match the products as your catalogue changes.

Training your team

If several people add images to your site, give them a one-page guide: when to write a description, when to leave it empty, how long it should be and two or three examples from your own site. Review a few new pages a month and give friendly feedback. A short habit practiced by the whole team beats a big cleanup done once.

Good alternative text is a small act of care. It tells a person who cannot see an image what they would otherwise miss, and it takes only a few seconds once it becomes a habit.

What a scanner checks, and what you add

A scanner can find images with no alt attribute. It cannot judge whether the words are useful, so check these by eye or with a screen reader. Alt text written by AI tools needs the same review. See what scanners find best.