How to write good alt text (with 15 before-and-after examples)

Alt text is the words a screen reader speaks in place of an image. It’s also what shows if an image fails to load, and what search engines read to work out what an image shows. Good alt text is short, specific, and written for this image on this page. Bad alt text is usually one of three things: missing, a file name, or a description of pixels that ignores why the image is there.

The problem is common. WebAIM’s 2026 analysis of the top one million home pages found missing alt text on 53.1% of them. On top of that, 10.8% of images that did have alt text had questionable or repetitive text such as “image”, “graphic”, a file name, or text identical to what sits next to it (WebAIM Million 2026).

This guide gives you a method you can apply in under a minute per image, then 15 worked examples.

The one question that decides everything

Ask: “What would I say about this image if I were reading the page aloud to someone over the phone?”

It makes you think about purpose, not appearance, which is what WCAG asks for. Success Criterion 1.1.1 says non-text content needs “a text alternative that serves the equivalent purpose” (W3C, Understanding SC 1.1.1). The key word is purpose.

In practice, the same photo can need different alt text on different pages. A photo of a red trail-running shoe:

• On the product page: “Red trail running shoe, side view showing the lugged rubber sole”
• In a blog post about a race: probably the runner and the moment, not the shoe
• As a link to the product from a category grid: the product name, because that’s where the link goes

A five-step method

1. Decide the image’s job. Is it informative (adds content), functional (a link or button), decorative (adds nothing a listener would miss), complex (a chart or diagram), or text (an image of words)? W3C’s alt decision tree walks through this in five questions.
2. If it’s decorative, use alt="". An empty alt (not a missing one) tells assistive technology to skip it. See our guide to decorative images.
3. If it’s functional, describe the action or destination. “Search”, “Acme home”, “Download the 2026 price list (PDF)”. See linked images and buttons.
4. If it’s informative, write the shortest phrase that carries the meaning. Lead with the important noun. Skip “image of” or “picture of”, because screen readers already announce that it’s an image.
5. If it’s complex, keep the alt short and put the detail in nearby text. See charts, graphs and infographics.

Rules of thumb (and where they come from)

• Don’t repeat nearby text. If the caption says “Our founder, Priya Shah, at the 2026 launch”, the image alt doesn’t need to say it again. Either describe what the caption doesn’t cover, or use alt="" if nothing is left. W3C’s decorative-image guidance covers images “identified and described by surrounding text” (W3C).
• Include text that’s in the image. If a banner says “Free shipping over €50”, the alt must say “Free shipping over €50” (W3C, Images of Text).
• Length: usually one short sentence. “125 characters” is a rule of thumb, not a WCAG requirement. Shopify recommends 125 or fewer and allows 512 (Shopify Help). If you need much more, the image is probably complex and needs a long description.
• Write like a sentence, with normal capitalisation and punctuation.
• Don’t stuff keywords. Google says to avoid “filling alt attributes with keywords” because it “results in a negative user experience and may cause your site to be seen as spam” (Google Search Central).
• Don’t guess at things you can’t see. Don’t name a person unless you know who it is and naming them is appropriate, and don’t assume gender, age or ethnicity unless it’s relevant and known.

15 before-and-after examples

Each example has the context, the bad version, a better version, and why.

1. Product photo (e-commerce) Context: Product page for a ceramic mug, main image. Before: alt="IMG_4471.jpg" After: alt="Matte sage-green ceramic mug, 350 ml, with a curved handle" Why: File names say nothing. The better version gives what a shopper would want to know from the photo: colour, finish, size cue, shape.

2. Second product photo (detail shot) Context: Same product, third image in the gallery. Before: alt="Matte sage-green ceramic mug, 350 ml, with a curved handle" (copied from image 1) After: alt="Close-up of the mug's unglazed base with the maker's stamp" Why: Each gallery image exists for a reason. Say what this one adds.

3. Team headshot on an About page Context: Grid of staff photos, each with a visible name and role underneath. Before: alt="headshot" After: alt="" Why: The name and role are already in text next to the photo, and “headshot” twenty times is just noise. (If the photo conveys something the text doesn’t, describe that.)

4. Linked logo in the site header Context: Logo links to the homepage. Before: alt="logo" After: alt="Northwind Coffee home" Why: It’s a link, so the alt is the link text. W3C’s example for a linked logo is “W3C home” (W3C, Functional Images).

5. Search icon button Context: Magnifying-glass icon inside a <button> with no visible text. Before: alt="magnifying glass" After: alt="Search" Why: Describe the action, not the drawing. W3C uses “search” rather than “magnifying lens” (W3C).

6. Social media icon links in the footer Context: Three icons linking to the company’s profiles. Before: alt="" on all three After: alt="Northwind Coffee on Instagram", and likewise for the others Why: An empty alt on the only content of a link leaves an empty link. WebAIM found 45% of images missing alt text were linked images, “resulting in links that were not descriptive” (WebAIM Million 2026).

7. Blog hero image (mood only) Context: Stock photo of a desk with a laptop above an article about invoicing. Before: alt="laptop desk office work business productivity invoice software" After: alt="" Why: It’s ambience, and the keyword list is the stuffing Google warns against.

8. Promotional banner with text Context: Homepage banner image reading “Autumn sale: 20% off all knitwear until 31 October”. Before: alt="autumn sale banner" After: alt="Autumn sale: 20% off all knitwear until 31 October" Why: The words are the content. Better still, use real HTML text over a background image.

9. Bar chart in a report Context: Chart showing quarterly revenue, with the numbers not repeated in the text. Before: alt="chart" After: alt="Bar chart: quarterly revenue rose from €120k in Q1 to €210k in Q4. Full figures in the table below." plus a data table on the page Why: Short alt gives the takeaway and says where the detail is. W3C calls this a two-part text alternative (W3C, Complex Images).

10. Screenshot in a how-to article Context: Step 3 of a tutorial showing where a setting lives. Before: alt="screenshot" After: alt="Settings page with the 'Export as CSV' button in the top-right corner" Why: Describe what the reader needs from the screenshot to follow the step, not every element on screen.

11. Recipe step photo Context: Photo for “Fold the egg whites into the batter until no streaks remain.” Before: alt="baking" After: alt="Spatula folding white foam into chocolate batter, a few pale streaks still visible" Why: It shows the state the cook is aiming for, which helps everyone, not only screen reader users.

12. Map Context: Embedded static map image on a contact page. Before: alt="map" After: alt="Map showing our shop on Rue Oberkampf, two minutes' walk from Parmentier metro station" Why: Give the information the map exists to convey. And make sure the full address is also in text on the page.

13. Artwork in an online gallery Context: A painting for sale; the title and artist are in the caption. Before: alt="painting" After: alt="Loose watercolour of a harbour at dusk, orange sky reflected in still water, three small boats in silhouette" Why: For art, the visual content is the point. Describe subject, palette and mood. The caption already covers title and artist.

14. Decorative divider Context: A wavy line image between sections. Before: alt="wavy line divider graphic" After: alt="" (or better, a CSS background) Why: Pure decoration. W3C lists “borders, spacers, and corners” as typical decorative cases (W3C).

15. Real-estate listing photo Context: Fourth image in a flat listing. Before: alt="Apartment for sale Lyon 3 bedroom balcony cheap" After: alt="Living room with two tall windows, oak floor and a door to the south-facing balcony" Why: Describes what a buyer is looking for in that particular room. The listing title already does the keywords.

A quick self-check before you publish

• Would a listener miss anything important if they only heard the alt? If yes, add it.
• Would they hear anything twice? If yes, cut it or use alt="".
• Is it a link or button? Then does the alt say where it goes or what it does?
• Does the image contain words? Then are those words in the alt?
• Is it a chart, diagram or map? Then is the full information somewhere in text?

Where AI fits

AI can draft alt text quickly, but treat it as a first draft. James Madison University calls it “an assistive drafting tool, not the final authority” (JMU). Altpass gives the model the page title, the nearest heading and any link destination, suggests alt="" for likely decorative images, and you approve every suggestion. Alt text is also only one accessibility requirement among many. It doesn’t make a site “compliant” on its own.

Check your own pages

Want to see how your site measures up? Run the free Altpass checker on any page. It lists images with missing, empty or weak alt text and gives the page a score, with no signup. Then fix the worst offenders first: linked images and product photos.

Updated 2026-10-07