How to Write Good Alt Text (With Real Before and After Examples)
By Junaid Aslam. 3 min read. Updated .
Alt text is the short description you attach to an image using the alt attribute. Screen readers read it aloud to people who can't see the picture. Browsers show it when an image fails to load. Search engines use it to understand what the image is about.
Most alt text out there is either missing or useless: image1.jpg, photo, or a pile of keywords. A useful description is short work once you know what to aim for.
The one question to ask
If someone couldn't see this image, what would they need to know to get the same thing out of the page? Write that information. Skip a full inventory of every pixel.
That's why the same photo can need different alt text on different pages. A picture of a coffee cup on a café's menu page might read 'Flat white in a blue ceramic cup'. On a blog post about desk setups, the same picture might be 'Coffee cup next to a laptop on a standing desk'. Context decides.
Rules that cover most cases
- Skip 'image of' and 'photo of'. Screen readers already announce that it's an image. Start with the content.
- Be specific, not poetic. 'Golden retriever catching a frisbee mid-air on a beach' beats 'dog'.
- Keep it short. There's no official limit, but many teams aim for under about 125 characters because some screen readers handle long strings awkwardly. If you need more, put a fuller description in the page text.
- Include text that appears in the image. If a banner says 'Sale ends Friday', your alt text should say so.
- Don't stuff keywords. Search engines are good at spotting it, and it makes the experience worse for the people alt text exists for.
- Don't repeat the caption. If the text right next to the image already says what it shows, a long alt just makes a screen reader say it twice.
Before and after
| Situation | Weak alt text | Better alt text |
|---|---|---|
| Product photo | shoes | White leather low-top sneakers with a gum rubber sole, side view |
| Team photo on an About page | team photo | Five members of the support team standing outside the office entrance |
| Screenshot in a tutorial | screenshot | Settings menu with the Privacy tab selected and Location Services switched off |
| Chart in a report | chart | Line chart: monthly signups rose from 400 in January to 1,250 in June |
| Icon-only button | magnifying glass | Search |
When to leave alt empty on purpose
Some images are purely decorative: a divider line, a background flourish, a stock photo that adds mood but no information. For those, use an empty attribute: alt="". That tells screen readers to skip the image entirely. This is not the same as leaving alt off. A missing attribute makes some screen readers read out the file name, which is worse than silence.
Images that do something
If an image is a link or a button, the alt text should describe what happens when you activate it, not what the picture looks like. A logo that links to your homepage should say 'Instant Tools home', not 'blue lightning bolt'. An icon-only 'download' button needs the word 'Download' in its label.
Charts, diagrams and other complex images
A single sentence can't carry all the data in a chart. Give the alt text the main takeaway, and put the full information nearby as real text or a table. A screen reader user can then read the numbers directly, and search engines can read them too. This also helps everyone who finds charts hard to parse.
Accessibility first, search second
Alt text is part of the Web Content Accessibility Guidelines (success criterion 1.1.1, Non-text Content). Missing alt text is among the most common accessibility errors found on the web, and it's one of the easiest to fix. Good alt text can also help your images show up for the right searches in image search. That is a side effect. The main job is still to describe the image for people who can't see it.
Using a generator without producing junk
Automatic tools can draft alt text quickly, which helps when you've got 200 images to work through. The Alt Text Generator does that. Treat the output as a first draft. Read it against the rules above, then fix anything that misses the point of the image on your page. A tool sees what's in the picture. You know why it's on the page.
If your main goal is screen reader users, the WCAG-focused alt text tool writes its descriptions with that audience in mind.