The complete guide to alt text

Alt text is the text alternative for an image, set in the alt attribute of an <img> tag. It has been part of HTML since HTML4 in 1997. It is not optional decoration for developers who care about accessibility — it is the only thing standing between an image and total invisibility for a meaningful share of the people looking at your page.

Who alt text actually serves

In rough order of how directly they depend on it:

Screen reader users. A screen reader cannot see the image. If there is no alt text, it either announces the filename verbatim — "IMG dash four four seven one dot jpg" — or, for a decorative image marked correctly, says nothing at all and moves on. Good alt text is the difference between a blind or low-vision visitor understanding your product photo and being read a string of digits.

People on slow or metered connections. Before an image loads — or if it fails to load — the browser shows the alt text in its place. On a poor connection, alt text is what a sighted visitor reads while waiting, or instead of the image entirely.

Search engines. Search crawlers cannot see pixels either. Alt text is one of the signals they use to understand what an image shows, which is why "good for SEO" and "good for a blind visitor" mostly point the same direction — with one exception, covered below, where they don't: keyword stuffing helps neither and Google has said as much.

Four kinds of image, one decision tree

Before writing anything, decide which of these four categories the image falls into. The category determines the rule, not the other way round.

1. Informative — the image conveys content

Product photos, portraits, screenshots, standalone photographs in an article. Describe what the image shows, in enough detail to serve the same purpose it serves for a sighted visitor. Nothing more.

Before: <img src="boot.jpg" alt="image">

After: <img src="boot.jpg" alt="Red leather ankle boot with side zip, size 8">

2. Decorative — the image conveys nothing

Divider lines, background flourishes, stock photography used purely for visual rhythm next to text that already says everything. These get an empty alt="" — not omitted, not a description, empty. That empty attribute is a deliberate instruction to screen readers to skip the image silently. Leaving it off entirely, or filling it with a description of a swirl nobody needs to hear about, forces a screen reader user to sit through noise.

Before: <img src="swirl-divider.png" alt="decorative swirl line divider">

After: <img src="swirl-divider.png" alt="">

3. Functional — the image is a control

Icons wrapped in a link or button: a cart icon, a search glass, a hamburger menu, a social icon that links out. Here the alt text describes the action or destination, never the appearance of the icon. Nobody needs to know it's a magnifying glass; they need to know it opens search.

Before: <a href="/cart"><img src="cart-icon.svg" alt="shopping cart icon"></a>

After: <a href="/cart"><img src="cart-icon.svg" alt="View cart"></a>

4. Complex — the image can't be summarised in a sentence

Charts, diagrams, infographics, screenshots of dense UI. A single short alt attribute can't carry a bar chart's worth of data, and trying to cram it all in produces alt text nobody can use. The pattern is a short, functional alt attribute plus the full detail in visible text nearby, tied together with aria-describedby so assistive tech knows where to find it.

Before: <img src="q3-revenue-chart.png" alt="chart">

After:

<img src="q3-revenue-chart.png" alt="Bar chart: Q3 revenue by region" aria-describedby="q3-chart-desc">
<p id="q3-chart-desc">Q3 revenue by region: North America $4.2M, Europe $2.8M, APAC $1.1M — North America up 12% on Q2, APAC flat.</p>

The rules, in plain terms

• Describe function, not appearance. For a control, say what it does. For a photo, say what a sighted person would take away from it in context — not every visual detail.
• Never start with "image of" or "picture of". Screen readers already announce that an image is present before reading the alt text. Saying it again wastes the first three words of every single image on your site.
• Keep it roughly under 125 characters where you can. This isn't a hard technical limit, but some screen readers truncate long alt text, and long-windedness is usually a sign the description has drifted into detail nobody needs. Complex images are the exception — that's what the paired long description is for.
• Include any text that appears in the image. If a banner graphic says "50% off this weekend", a sighted visitor sees that offer; a screen reader user should hear it too. That text belongs in the alt attribute, not just in the pixels.
• Never duplicate an adjacent caption. If a visible <figcaption> already reads "The author on the summit ridge, 2019", giving the image the same text as its alt attribute means a screen reader user hears it twice in a row. Either set alt="" and let the caption do the work, or write alt text that adds something the caption doesn't.

Alt text for the hard cases

Product photos

Answer the question a shopper would ask over the phone: colour, material, style, and whatever actually distinguishes this item from the one next to it. Skip camera angle, studio lighting, and background — none of that is why someone is looking at a product photo.

Before: alt="product photo"

After: alt="Navy wool peacoat, double-breasted, hip length"

Charts and graphs

Treat as a complex image: a short alt attribute naming the chart type and the headline takeaway, with the full data set in an adjacent table or paragraph. Don't try to encode every data point into the alt attribute itself — that produces a wall of text a screen reader has to read straight through with no way to skim, and it's worse than the short version.

Logos

The alt text is the brand or company name — nothing more. Not "logo of", not a description of the mark's shape and colour.

Before: alt="GotAlt logo image, green wordmark on white background"

After: alt="GotAlt"

Icons that are links

Same rule as any functional image: describe the destination or action, not the icon shape. A hamburger icon that opens the nav gets alt="Menu"; a magnifying glass that opens a search field gets alt="Search". If the icon sits next to visible text that already says "Menu" or "Search", the icon itself should usually be alt="" so it isn't announced twice.

Background images

CSS background-image has no alt attribute at all — it's a purely presentational mechanism, and assistive tech ignores it by design. If a background image is carrying real content (a hero image with the only copy of a phrase, a photo that's actually the point of the section), that's a sign it shouldn't be a CSS background in the first place. Either move it to a real <img> with proper alt text, or make sure the information it carries also exists as visible, readable text on the page.

Infographics

The entire value of an infographic is in the text and data laid out inside it — which means it needs the full complex-image treatment: a short alt attribute describing the topic, and every fact the graphic contains transcribed as ordinary text nearby. There is no way to compress a well-designed infographic into 125 characters and keep it useful, so don't try.

Memes

Treat as informative images. Describe the image and, critically, transcribe any caption text baked into the picture — the caption is usually the entire joke, and it's invisible to a screen reader unless it's in the alt attribute.

Common failure modes — with real examples

Filename as alt text

alt="DSC08217.jpg" or alt="untitled-2-final-v3.png". This happens when a CMS auto-fills the alt attribute from the uploaded filename and nobody goes back to replace it. A screen reader reads the filename aloud, character by character in the worst cases — meaningless noise where a description should be.

Keyword stuffing

alt="running shoes buy running shoes cheap running shoes for men best running shoes 2026". Written for a search algorithm, not a person. It doesn't work for SEO — Google has explicitly warned against it — and for a screen reader user it's actively worse than no alt text, because they have to sit through it before reaching the next thing on the page.

Describing the wrong image

alt="Black leather wallet" on a product photo that actually shows a blue canvas tote. This is the failure mode that's easiest to introduce at scale and hardest to catch by reading HTML: it happens during bulk imports, templated product pages, or a copy-paste from a similar listing that never got updated. Every checker that reads your markup will see a perfectly formed, reasonably-worded alt attribute and pass it — because reading markup can't tell you the words are wrong. That gap is specifically what our free alt text checker is built to close: it downloads the actual image file and asks a vision model whether the description is true of what's in the picture, not just present in the HTML.

Over-description

Alt text that runs to several hundred characters narrating lighting, camera angle, and background detail for what's a simple product thumbnail — with the one useful fact buried in the last sentence. More words are not more accessible. If a description takes thirty seconds to read aloud before reaching the point, it has failed the person listening to it just as thoroughly as an empty attribute would.

AI-generated alt text: a draft, not an answer

Tools that generate alt text automatically — including our own free alt text generator — are a genuinely useful way to get a first pass on a large batch of images fast. They are not a finished answer, and treating the output as final is how "describing the wrong image" and "over-description" sneak back in through a different door.

Vision models can misread text embedded in an image, miss context that only makes sense alongside the surrounding page copy (is this the "before" or "after" photo in a pair?), or describe something with more confidence than the description actually deserves. We've built our own alt text checker to err toward saying nothing rather than flagging a false positive — a wrong accusation wastes your time and costs us your trust — and the same caution applies in reverse to anything AI-generated: readWhatever wrote it, read every line back against the actual image before you publish it. Treat the model as a fast first draft, and you as the editor.

How to audit what you already have

A useful audit works in this order:

• Find images with no alt attribute at all. Browser extensions like WAVE or axe DevTools will surface this instantly, for free — that's a genuinely good first pass and there's no reason to pay for it.
• Check that decorative images have alt="", not a description and not a leftover filename.
• Verify the remaining alt text is actually true of the image. This is the step presence-checkers can't do, because it means opening the file rather than reading the HTML around it — which is exactly what our alt text checker does for the first six described images on any page, free, no signup.
• Check functional images describe the action, not the icon. A linked icon with alt text describing its shape rather than what clicking it does is a common miss even on otherwise well-built sites.
• Re-check after every bulk import. Wrong-image and filename failures cluster around product feed syncs, CMS migrations, and templated pages far more than hand-written content — that's where a second pass earns its keep.

Automated tools of any kind — ours included — can only cover part of this. Karl Groves' widely-cited estimate is that automated testing "can definitively test for approximately 25–29% of best practices for WCAG 2.0" and "cannot test for approximately 40%" (source). Verifying that alt text is true, rather than merely present, closes a specific and common part of that gap — but no automated check replaces a human occasionally reading the alt text against the picture.