How to write alt text

Once it’s clear what alt text is, the real work begins: phrasing it well. The good news — it follows a few clear principles you can internalize in minutes. This guide is part of our Alt Text & SEO guide and shows, step by step, how to turn an image into accurate alt text.

1. The core principle: the guiding question

Before thinking about rules, one single question gets almost any alt text right:

That question forces you to think about the image’s purpose rather than just its appearance. A product photo should sell the product → describe the product. A photo in a how-to should show an action → describe the action. A decorative pattern contributes nothing → it needs no description. The text follows almost automatically from the purpose.

2. Step 1: What kind of image is it?

The most important step comes before the first word: sort the image into one of four categories. This logic comes from the official W3C recommendations and answers most edge cases automatically.

1. Informative — the image conveys information (product photo, photo in an article, chart). → Write descriptive alt text.
2. Functional — the image is a link or button (magnifier = search, a logo linking to the homepage). → Describe the action or destination, not the appearance: alt="Search".
3. Decorative — the image adds no information (divider, background, ornament). → Empty alt="".
4. Complex — the image holds lots of data (infographic, detailed chart). → Short key message in the alt text, detail next to it in text/table.

This classification alone prevents the most common mistakes — like describing decorative images or capturing functional images only visually.

The classification with an example

Imagine a page with four images — here’s how the classification would look:

• Product photo of the ankle boot → informative → alt="Red leather ankle boot with block heel, side view"
• Magnifier icon in the search bar → functional → alt="Search"
• Curved divider between paragraphs → decorative → alt=""
• Infographic on material properties → complex → short alt text + detail as text/table

Four images, four different treatments — all flowing automatically from the category. When in doubt, never start with writing, start with the classification.

3. Step 2: The rules for descriptive alt text

For informative images — the majority on the web — these rules apply:

Describe content and function, not the format

What is shown, and why is it here? „AVIF file of a shoe“ is worthless. „Red leather ankle boot, side view“ captures the content.

Most important first

Screen-reader users hear the start first and often stop; truncated text keeps only the start too. Put the central detail up front: „Red ankle boot …“ rather than „Side view of a shoe in the color red …“.

Keep it short — usually under 125 characters

That’s long enough for a precise description and short enough that common screen readers don’t cut it off. If the space isn’t enough, that’s a sign the detail belongs elsewhere (see complex images).

No „image of“ or „photo of“

Screen readers already announce that it’s an image. „Image of a red ankle boot“ wastes the first, most important words.

Natural language — one keyword, if it fits

Work your main keyword in at most once, naturally. A keyword chain („shoe boot red buy cheap“) is a spam signal for Google and a torment for screen readers.

Context decides

The same image can deserve different alt text depending on the page — more on that shortly.

Writing style & tone

Alt text is factual description, not advertising. Skip superlatives and marketing phrases („beautiful, high-quality premium ankle boot“) and stay concrete and neutral. The best alt text sounds almost boring — which is exactly what screen-reader users and search engines want. Write in the language of the page (German alt text on the German page) and avoid abbreviations that sound odd read aloud.

4. Getting length and detail right

„Under 125 characters“ is a rule of thumb, not a rigid limit. The principle behind it: as much as necessary, as little as possible.

• Simple image (product photo, portrait): one precise sentence.
• Image with text (banner, graphic with a message): include the important text — alt="Voucher: 15% with code FRESH15".
• Complex graphic (chart): short key message in the alt text, full data in body text or — better — a real HTML table.

Why the table is better: text „locked“ inside an image file can be neither read by screen readers nor indexed by Google. A table next to it solves both at once.

5. How context changes the alt text

One and the same photo can deserve different alt text on different pages — because the purpose differs. Example: a photo of a runner lacing her shoe.

Both are correct — they just emphasize the relevant aspect. So always ask: what is this page about?

6. Before/after: improving alt text

The fastest way to learn is the concrete case. Four typical weak alt texts — and how to fix them:

The pattern is always the same: from a file name or keyword list to a concrete, natural sentence with the most important part first.

7. Special cases

Product images

Name the product type and the distinguishing attributes customers search for: color, material, variant, angle. Order: the purchase-deciding part first. „Leather ankle boot, red, block heel, side view“ is more robust than „Side view of a red shoe.“ Each variant and each gallery view gets its own text. More in the guide Alt text for e-commerce.

Logos

Name the identity rather than describing the appearance: alt="AutoAlt.ai logo". A linked logo (e.g. to the homepage) stays functional — the alt text still names the brand, not „homepage.“

Icons & buttons

Describe the action, not the shape: alt="Shopping cart", alt="Search", alt="Menu". If an icon has visible text with the same meaning next to it, the icon can be decorative (alt="") to avoid duplication.

Charts & infographics

Short key message as alt text, detail next to it: alt="Bar chart: organic traffic +40% after adding alt text" — the individual values then in text or a table.

Images with embedded text

If an image contains important text, that text must go in the alt text. Better still: don’t render important text as an image at all, but as real HTML text.

Linked images

If an image is also a link and there is no accompanying link text, the alt text must describe the destination of the function — not just the subject. A product image linking to the product page describes the product (which is also the destination). An arrow icon leading to the next page gets alt="Next page", not alt="Arrow".

Decorative images

Empty alt="". No description, no space between the quotation marks, and never omit the attribute.

Abstract or unclear images

Some images show nothing concrete — an abstract pattern, a mood shot, a gradient. Ask about the purpose here too: if the image carries meaning for the page (e.g. as a symbolic illustration of a topic), describe that meaning briefly. If it’s pure aesthetics, it’s decorative → alt="". When in doubt: describe what a sighted user would understand as the image’s message, not every visual detail.

8. Common edge cases

• Several near-identical images (gallery): each view describes its difference — „close-up of the sole,“ „worn from behind“ — instead of the same text everywhere.
• Screenshot: describe what the screenshot shows („dashboard with revenue curve and filter bar“), not the word „screenshot.“
• Decorative but mood-setting (e.g. a hero photo): if it carries meaning for the page, describe it briefly; if it’s pure filler, alt="".
• Image next to identical text: if the caption already says everything, the alt text can be shorter or the image treated as decorative — avoid duplication.
• Emoji or symbol as an image: describe the meaning, not the character.

9. A repeatable workflow

With many images you don’t need a flash of inspiration per image, but a process a team can apply consistently:

1. Classify: informative, functional, decorative or complex?
2. Clarify the purpose: what is this page about?
3. Describe: one natural sentence, most important first, under ~125 characters.
4. Check: the three questions — nothing important missed? Core at the start? Sounds natural read aloud?
5. Stay consistent: a naming and style convention across the team so quality doesn’t drift.

One last tip for teams: define two or three model examples for your store’s typical image types and document them. That way everyone writes in the same style, and new team members are up to speed in minutes — keeping quality constant across the whole catalog.

10. Common mistakes when writing

• Keyword stuffing — strung-together search terms instead of a sentence.
• File name as alt text — alt="IMG_4821" helps no one.
• Identical text on many images — gives Google no reason to rank any one of them.
• Describing the decorative or, conversely, setting the informative to alt="".
• Writing an essay — anything beyond a sentence or two belongs in the caption or body text.
• Naming format/resolution — „PNG, 1200×800“ interests no one.

Many examples of well-written alt text by image type and industry are collected in the guide Alt text examples.

11. Frequently asked questions