How to Write Image Alt Text That Actually Helps
The most-cited failure in ADA complaints, and the one most often "fixed" in a way that makes things worse.
Why this one is worth getting right
Missing alt text is the most frequently cited accessibility failure in ADA website complaints, and the most common finding of every scanner ever run. It is also the cheapest to fix — it is typing — which is a strange combination that tells you something about how little attention it usually gets.
The reason it keeps getting cited is that the failure is total. A screen reader user hitting an unlabeled product image does not get a degraded experience; they get nothing, or they get IMG_4471 dot jpg, which is worse than nothing because now they have to wonder whether it mattered.
The only question that matters
Before writing anything, ask: if this image vanished, what would be lost?
- Information would be lost → describe the information.
- Nothing would be lost →
alt="". - A destination or action would be lost (the image is a link or button) → describe where it goes or what it does, not what it looks like.
That is the whole method. Most bad alt text comes from describing the picture when the job was to replace it.
The same image, four contexts
Take one photograph: a woman in a lab coat holding a tablet.
| Where it appears | Correct alt text | Why |
|---|---|---|
| Decorative banner on a homepage | alt="" | It sets a mood. No information is lost if it goes. |
| Staff directory entry | "Dr Sarah Chen, Chief of Cardiology" | The identity is the information. What she is wearing is not. |
| Article about tablet use in hospitals | "A clinician reviewing patient notes on a tablet at a bedside" | Here the activity is the point, so describe the activity. |
| Linked thumbnail to a case study | "Case study: digitizing ward rounds at Mercy General" | It is a link. Describe the destination, not the photo. |
Four correct answers for one file. This is exactly why bulk-generated alt text does not work: the image did not change, the job did.
Phrases to delete on sight
- “Image of…”, “Photo of…”, “Graphic of…”— the screen reader already announced “image”. You are making the user hear it twice.
- The filename — hero-banner-v3-final.png is not a description. This is what happens automatically when the attribute is missing entirely.
- Keyword lists — “dentist dentist near me emergency dentist London teeth whitening”. It reads as gibberish aloud and search engines discount it anyway.
- “Click here” on a linked image — describe the destination.
- Duplicating adjacent text — if the caption underneath already says it, the alt should be empty. Otherwise it is announced twice in a row.
The cases people actually get stuck on
Icons next to text
A trash icon inside a button labeled “Delete” needs alt="" or aria-hidden="true". The button already has a name. An icon-only button with no visible label needs the name on the button itself, not on the image inside it — that is criterion 4.1.2, and it is the second most cited failure after alt text.
Charts and graphs
The alt text is not “bar chart of quarterly revenue”. That tells the user a chart exists and nothing else. Give the takeaway in the alt — “Revenue grew from $1.2M to $4.8M between Q1 and Q4 2025” — and put the underlying figures in a real data table nearby, which also happens to be better for everyone reading on a phone.
Logos
The alt text is the company name. If the logo links home, alt="MyMind Studio home” is better than alt="logo". Nobody needs to know it is a logo.
CSS background images
They have no alt attribute, so they are invisible to assistive technology entirely. That is fine for decoration and a bug for anything meaningful. If an image carries information, it belongs in an <img> tag.
Images inside links, alongside text
If a card links to an article and contains both a thumbnail and the headline, the thumbnail gets alt="". The link already has an accessible name from the headline. Two descriptions of one destination is noise.
How to check what you have
- Run the scan — it lists every image missing an alt attribute, with its location, and generates a starting description for each.
- Read every generated one. This is not optional. The scanner can see the image; it cannot see why you chose it.
- Sweep for the anti-patterns above — search your templates for
alt="image,alt="photoandalt="logo". - Fix the template, not the page. If product thumbnails are wrong, they are wrong in one component and right in every one of ten thousand pages after a single edit.
The bottom line
Alt text is the cheapest accessibility work there is and the most frequently litigated. Ask what would be lost if the image disappeared, write that, leave decoration empty, and never let a machine publish a description you have not read.
Frequently asked questions
Should every image have alt text?
Every image needs an alt attribute. Not every image needs words in it. If the image carries information, describe the information. If it is purely decorative — a background texture, a divider, an icon sitting next to a label that already says the same thing — use alt="" so assistive technology skips it silently. A missing attribute and an empty attribute are different things: the first makes a screen reader read out the filename.
How long should alt text be?
Long enough to convey the same information, which is usually a short sentence. There is no character limit in the specification. If you genuinely need a paragraph — a chart, a diagram, an infographic — put the full description in the page text or a linked page and keep the alt short, pointing at it. Nobody wants to listen to 300 words with no way to pause.
Is alt text good for SEO?
Yes, genuinely, and it is one of the few places accessibility and search overlap cleanly. Search engines use alt text to understand images, and it is what surfaces them in image search. Writing it for a crawler rather than a person is how you end up with keyword-stuffed alt text that helps neither.
What about images of text?
Avoid them where you can, because they blur when zoomed and cannot be restyled by a user who needs a different font or contrast. Where you cannot avoid them — a logo, a screenshot — the alt text must contain the same text that appears in the image. If a promotional banner says "20% off everything until Sunday", that exact sentence is the alt text.
Can AI write my alt text?
It can draft it, and it will confidently get context wrong. Image recognition describes what is in the frame. Alt text has to convey what the image is doing on that page, which depends on the surrounding content and on why you put it there. Use generated descriptions as a starting point and read every one — a wrong description is worse than an empty one, because the user has no way to know they are being misinformed.
Keep reading
- ADA Website Compliance, Explained Without the Legalese — There is no federal web rulebook, yet thousands of suits get filed every year. Here is what is actually being enforced, and against whom.
- WCAG 2.2 Level AA in Plain English — The spec is written for standards bodies. This is the same requirements written for whoever has to go and change the site.
- Why Accessibility Overlay Widgets Do Not Work — One line of JavaScript, compliance solved. Except the lawsuit numbers went up, and the FTC fined the biggest vendor $1M.
Nothing here is legal advice. Accessibility obligations vary by jurisdiction and by how a site is used. If you have received a demand letter, talk to a lawyer.