How to Write Good Alt Text for Images

Alt text is a short written description of an image, supplied through the HTML alt attribute. It does three jobs at once: a screen reader reads it aloud so blind and low-vision users know what the image conveys, a browser shows it when the image fails to load, and a search engine uses it to understand the image. Writing it well comes down to a simple rule: describe the image's purpose and meaning in context, concisely, without starting with "image of". Decorative images get an empty alt="", functional images are described by their action, and complex images get a short alt plus a longer description nearby. This guide covers each case with clear examples.

It builds on what web accessibility is and why it matters and pairs naturally with how to check if a website is accessible, since missing or poor alt text is one of the most common issues found in testing.

What alt text is and who uses it

The alt attribute lives on the img element and holds a text alternative for the image. Three audiences depend on it:

• Screen-reader users. Someone who cannot see the image hears the alt text instead. If an image carries information — a chart, a product photo, a meaningful illustration — and has no alt text, that information is simply lost to them. Providing a text alternative for non-text content is a WCAG Level A requirement, the most basic tier of the standard.
• Anyone when the image fails to load. On a slow connection, a broken link, or a data-saving setting, the browser shows the alt text in the image's place — so good alt text keeps a page usable even when its images do not arrive.
• Search engines and crawlers. Machines cannot see pictures; they read the alt text (and the surrounding context) to understand what an image depicts. That helps image search and adds relevance signals to the page.

Because all three audiences want the same thing — an accurate, concise description of what the image means — you can serve them all with a single well-written attribute. There is no tension between accessibility and SEO here; good alt text satisfies both.

The core rules of good alt text

A handful of principles cover the vast majority of cases:

1. Describe purpose and meaning, not pixels. Ask: why is this image here, and what would a sighted user take from it? Convey that. A photo of a smiling support agent on a contact page might be "A support agent wearing a headset" — but if its real purpose is purely decorative, it may need no description at all (see decorative images below).
2. Be concise. Aim for a phrase or a short sentence. Screen-reader users hear every word, so rambling alt text is tiring. Capture the essence, not every detail.
3. Do not start with "image of" or "picture of". The screen reader already says it is an image. Lead with the content. (Exception: when the medium matters — "Screenshot of...", "Diagram of...", "Painting of..." — naming it adds useful context.)
4. Context changes the right answer. The same image can need different alt text on different pages, because what it means depends on the surrounding content. Alt text is not a caption written in isolation; it serves the page it sits on.
5. Do not stuff keywords. Keyword-loaded alt text reads terribly aloud and helps no one; write naturally and accurately, and the SEO value follows.
6. Do not duplicate adjacent text. If a caption or heading right next to the image already conveys the same information, the image may be decorative in that context and can take an empty alt.

Alt text by image type

The single most useful skill is recognising what kind of image you are describing, because the right approach differs. This decision table covers the common cases:

Image type	What to do	Example
Informative (conveys meaning)	Concisely describe the content/meaning in context	alt="Bar chart showing sales doubling from 2024 to 2025" (with detail nearby)
Decorative (no information)	Empty alt so it is skipped	alt=""
Functional (link or button)	Describe the action, not the look	A magnifier icon button: alt="Search"; a logo linking home: alt="StackOptic home"
Text in an image (logo wordmark, banner)	Reproduce the text	A banner reading "50% off this week": alt="50% off this week"
Complex (chart, graph, infographic, map)	Short alt + longer description nearby or linked	alt="Line graph of monthly traffic" plus a text summary of the trend
Image of a person/product	Describe what matters for the context	Product page: alt="Blue running shoe, side view"

Informative images

These carry information the user needs. Describe what the image shows in a way that delivers the same understanding a sighted user gets. A photo illustrating a news story should describe the relevant scene; a product image should describe the product and any view or variant that matters. Keep it to the point — the goal is parity of understanding, not a full inventory of the picture.

Decorative images

Many images are purely aesthetic: background textures, dividers, generic stock photos sitting beside text that already says everything. These add nothing for a screen-reader user, so the best alt text is none at all in content terms — an empty attribute, alt="". This tells the screen reader to skip the image entirely. Two mistakes to avoid: do not omit the alt attribute completely (some screen readers will then announce the file name, which is gibberish like "IMG underscore 4821 dot jpg"), and do not write a description of a decorative image, which just clutters the experience. The discipline is to decide honestly whether an image informs or merely decorates.

Functional images

When an image is a control — an icon that acts as a button, a logo that links to the home page, a magnifying glass that submits a search — the alt text should describe the action or destination, not the appearance. A user does not need to know it is "a magnifying-glass icon"; they need to know the button searches. So alt="Search", alt="StackOptic home", alt="Open menu". If the icon button also has visible text or an accessible name from elsewhere, the image itself may take an empty alt to avoid duplication. The test is what a user needs to operate the control.

Text within images

If an image contains text that matters — a logo wordmark, a promotional banner, a quote graphic — the alt text should reproduce that text so it is not lost. alt="50% off everything this weekend". As a broader principle, real text is almost always better than text baked into an image (it scales, it is selectable, it is translatable, and it is inherently accessible), so use images-of-text sparingly — but when you do, capture the words in the alt.

Complex images

Charts, graphs, diagrams, infographics and maps carry more meaning than a short attribute can hold. The pattern is a short alt that names the image, plus a fuller description elsewhere — in the surrounding text, a caption, an adjacent data table, or a linked long description. For example, alt="Line graph of monthly organic traffic" in the attribute, and then a sentence or table nearby that conveys the actual trend ("Traffic rose steadily from 10,000 in January to 28,000 in June"). For data visualisations, an accessible data table is often the best long description, because it gives screen-reader users the underlying numbers directly.

Good versus bad examples

Seeing the contrast makes the rules concrete. Consider a product photo of a blue running shoe on a product page:

• Bad: alt="image" — useless; conveys nothing.
• Bad: alt="IMG_2931.jpg" — a file name; meaningless noise.
• Bad: alt="shoe shoes running shoes buy shoes best shoes blue shoe footwear" — keyword stuffing; reads horribly and helps no one.
• Bad: alt="A beautiful, stylish, premium athletic shoe photographed in a studio with soft lighting against a seamless white backdrop, shown at a three-quarter angle to highlight its sleek silhouette" — far too long; exhausting to hear.
• Good: alt="Blue running shoe, side view" — concise, accurate, conveys what matters for a product page.

Or a decorative swirl in a page header:

• Bad: alt="decorative swirl graphic in the header area of the page" — describes a decoration that adds nothing.
• Good: alt="" — correctly skipped.

The pattern is consistent: lead with meaning, keep it short, match the image type.

Alt text and SEO

Because search engines cannot see images, alt text is one of their main ways to understand them, which helps with image search and contributes relevance to the page. But the SEO advice and the accessibility advice are the same advice: write accurate, natural, concise descriptions. There is no separate "SEO alt text" worth writing — keyword-stuffed attributes read badly to a screen reader and are discounted by search engines anyway. If you want the broader picture of how descriptive, semantic markup helps machines parse a page, our guide on how to check if your site is ready for AI search covers the machine-readability angle, and how to optimize images for the web covers the file-and-format side that sits alongside alt text.

Common alt-text mistakes

To summarise the pitfalls: leaving the attribute off entirely (the file name gets read out), using a file name or "image" as the text, starting with "image of", stuffing keywords, describing decorative images instead of using alt="", writing the same thing as an adjacent caption, and cramming a complex chart's full meaning into the attribute instead of providing a proper long description. Each is easy to fix once you have spotted it, and automated tools will flag missing attributes — though only a human can judge whether the text you wrote is actually meaningful, which is why alt text is reviewed during manual accessibility testing.

The bottom line

Good alt text describes an image's purpose and meaning in context, concisely, without "image of", and tailored to the image's type: informative images get a meaningful description, decorative images get an empty alt="", functional images are described by their action, images of text reproduce the text, and complex images get a short alt plus a fuller description nearby. Write for the user first, accurately and naturally, and the SEO benefit comes free. It is a small, high-leverage habit — one of the most common accessibility failures and one of the easiest to get right. For the wider context, see what web accessibility is and why it matters and what WCAG is.

Want to find images missing alt text on any URL, alongside a full WCAG, SEO and performance check? Analyse any URL with StackOptic — one report, free, no sign-up.