Sign in
Back to insights
A person writing the word elephant on a label beneath one photograph, on a wall of otherwise unlabelled black and white photographs.

Alt Text Examples: 25 Before and After Rewrites

9 min read

Most advice on alt text stops at “be descriptive”. True, and almost useless. Here are 25 rewrites instead: the weak version, the better version, and one line on what changed.

Here is the whole idea in one example.

1Coat on a plain background, product page hero

Before
alt="coat"
After
alt="Navy wool overcoat with notch lapels, worn open"

Accurate and useless. The rewrite names the things a shopper is deciding between, which is the purpose the photograph is serving.

That is the rule underneath all 25. Alt text serves what the picture is for, not what it looks like. Everything below is that idea applied to a different photograph.

Four rules, and that is all of them

From the W3C’s alt decision tree, the most practical thing published on the subject.

  • It carries information? Describe it briefly. W3C: “a brief description of the image in a way that conveys that meaning”
  • It is a link or a button? Say where it goes, not what it looks like. W3C: “communicate the destination of the link or action taken”
  • It is a picture of text? Put the text in the alt, if that text appears nowhere else on the page.
  • It is decoration? Leave it empty: alt="". Same if the words beside it already say the same thing.

One more. Do not start with “image of” or “picture of”. The W3C is blunt about it: “Usually, there’s no need to include words like ’image’, ’icon’, or ’picture’ in the alt text.” A screen reader already says it is an image. Saying it again just makes the listener wait.

Product photography

2Second gallery shot of the same coat, from behind

Before
alt="Navy wool overcoat with notch lapels, worn open"
After
alt="The same coat from behind, showing a single centre vent"

Repeating one alt across a gallery tells a screen reader user that nothing changed. Say what this particular shot adds.

3Colour swatch, one of five selectable options

Before
alt="colour"
After
alt="Oatmeal herringbone"

This is a control, not a picture. The alt names the choice being made.

4Boots, alt written for search engines

Before
alt="womens shoes women shoes ladies shoes buy shoes online cheap shoes"
After
alt="Tan leather ankle boots with a block heel"

This is the exact pattern Google names as spam, and read aloud it is unbearable. The rewrite is shorter and describes more.

5Styling shot, model in a linen shirt

Before
alt="model"
After
alt="Linen shirt worn untucked with the sleeves rolled"

The photograph exists to show how the piece is worn, so the alt describes the styling rather than the person.

6Mug on a product listing, alt left as the filename

Before
alt="IMG_2841"
After
alt="Speckled stoneware mug in slate grey"

A camera filename is not a description. It is also a hint that nobody has looked at this page in a while.

Food and drink

7Finished dish on a recipe page

Before
alt="food"
After
alt="Bowl of ramen with a soft-boiled egg, spring onion and nori"

Name the components. That is the information a reader wants from the photograph, and what makes it findable.

8The same photograph, directly above a caption that already describes it

Before
alt="Bowl of ramen with a soft-boiled egg, spring onion and nori"
After
alt=""

Redundant with adjacent text, so the decision tree says empty. Otherwise the description is announced twice in a row.

9Process shot in a numbered recipe step

Before
alt="step 3"
After
alt="Dough folded into thirds on a floured surface"

The step number is already in the text beside it. The picture is there to show the technique, so describe the technique.

10Restaurant interior on an about page

Before
alt="restaurant"
After
alt="Dining room with green leather booths and pendant lights over the bar"

The specifics are the point. Someone deciding whether to book wants to know what the room feels like.

Furniture and interiors

11Sofa on a category listing

Before
alt="sofa for sale"
After
alt="Three-seat sofa in pale grey bouclé with tapered oak legs"

“For sale” describes the page, not the picture. Material, colour and leg style are what distinguish this sofa from the next one.

12Dimensions diagram, an image with measurements printed on it

Before
alt="dimensions"
After
alt="Sofa dimensions: 210cm wide, 90cm deep, 78cm tall"

An image of text, and the measurements appear nowhere else on the page, so the alt has to carry them.

13Room set showing the sofa in context

Before
alt="living room"
After
alt="The sofa in a living room with a jute rug and a low walnut coffee table"

Room sets exist to show scale and styling. The alt should say what it is styled with.

14Macro detail of the upholstery

Before
alt="close up"
After
alt="Close-up of the bouclé weave and the piped seam along the cushion edge"

Close-up of what? Detail shots are the ones where a vague alt wastes the most, because the detail is the entire content.

People and headshots

15Headshot on a team page, name in a heading beside it

Before
alt="photo of a person"
After
alt=""

The name is already there in text. Adding it again in the alt means hearing it twice, and “photo of” is the padding the W3C says to drop.

16Headshot with no accompanying text, in a testimonial block

Before
alt="testimonial"
After
alt="Amara Okafor, Head of Operations at Bellweather"

Here the photograph is the only place the person is identified, so the alt has to do the identifying.

17Headshot that is itself a link to a full biography

Before
alt="Amara Okafor"
After
alt="Amara Okafor, full biography"

A functional image. The alt communicates where the link goes, which a bare name does not.

18Small author avatar next to a byline

Before
alt="author avatar"
After
alt=""

Decorative, and the byline is right beside it. Announcing the avatar adds nothing but a pause.

Screenshots and interface images

19Product screenshot on a marketing page

Before
alt="screenshot"
After
alt="Dashboard with 24 images queued and three already renamed"

Describe what the screenshot demonstrates. That it is a screenshot is the least interesting thing about it.

20Screenshot of an error message in a help article

Before
alt="error"
After
alt="Error message: this file is larger than the 25MB limit"

An image of text, and the whole reason someone searched for this page is that exact wording. It has to be in the alt.

21Settings panel in a tutorial step, alt listing everything visible

Before
alt="settings screen with options for export format quality resize metadata and naming"
After
alt="Export settings with Format set to WebP"

Describing every visible control buries the one thing this step is about. Alt text should be the most concise description of the image's purpose.

22Icon-only button in a toolbar

Before
alt="bin icon"
After
alt="Delete"

Functional, so the alt is the action, not the picture. Nobody needs to know which pictogram was chosen.

Logos, charts and decoration

23Company logo in the header, linking to the home page

Before
alt="logo"
After
alt="Bellweather, home"

Another functional image. It is a link, so the alt says where it goes.

24Bar chart in an article

Before
alt="chart"
After
alt="Bar chart: images are the largest resource on the median desktop page at 1,058 KB, ahead of JavaScript at 697 KB"

Give the finding, not the format. A chart whose alt says “chart” has been removed from the article for anyone not looking at it.

25Decorative flourish between sections

Before
alt="decorative swirl"
After
alt=""

If it is decorative, say nothing. Announcing decoration is the clearest case of alt text making a page worse.

Where the rule comes from

WCAG Success Criterion 1.1.1 is the requirement most accessibility legislation points at. It asks for a text alternative that serves “the equivalent purpose”. Purpose, not appearance. If the photograph is there so a shopper can judge a fabric, the alt text has to help them judge the fabric.

Search is a side effect, not the point. Google says it uses alt text “along with computer vision algorithms and the contents of the page to understand the subject matter of the image”. We covered what that is worth in what actually affects your Google rankings.

Write for the person and the search benefit follows. Write for the search engine and you get the thing Google names as spam: “Avoid filling alt attributes with keywords (also known as keyword stuffing).”

The 125 character limit is a myth

You will have read that alt text must stay under 125 characters because screen readers cut it off. They do not, and WCAG sets no character limit at all.

The number traces back to testing of how JAWS, the most used screen reader on Windows, handles long alt text. What that testing found was splitting, not truncation. The accessibility engineer Eric Eggert repeated it in February 2022 and found that JAWS “will split up the alternative text into multiple graphics with shorter alternative text”, and put the correction plainly: “Screen readers do not just hide the rest of the text.”

Earlier still, on the WebAIM discussion list in February 2016, Jared Smith described testing it to destruction: “I once did an experiment on this and copied the Declaration of Independence into an alt attribute many thousands of times...it just kept going.”

So keep it short, but for the right reason. A listener cannot skim, cannot pause partway and cannot re-read a sentence. Every rewrite above is short because of that, not because something would have chopped it.

One note on our own sourcing, because it matters. The test page most often cited for the 125 figure, on Terrill Thompson’s site, now returns a 404, so we could not read it. Both quotations above are from sources that are still live and still dated, by named people who did the testing themselves.

A short checklist

  • Ask what the image is for on this page, then write the alternative that serves that purpose
  • Decorative or already described by nearby text: empty alt="", every time
  • Link or button: describe the destination or the action
  • Text in the image: put the text in the alt
  • Drop “image of” and “photo of”. The screen reader has already said so
  • No two images in a gallery should share the same alt text
  • Short because listening is slow, not because of a character limit that does not exist

Questions people ask

Does every image need alt text?

Every image needs an alt attribute. Not every image needs words in it. Decorative and redundant images take an empty one, which tells assistive technology to skip past rather than guess.

Is missing alt worse than bad alt?

Missing is worse in one specific way. With no attribute at all, some screen readers fall back to reading the filename aloud, so DSC_0042.JPG gets spelled out. That is the worst of both.

Should alt text include the product name?

Only where it is not already in text next to the image. On a product page the name is usually in the heading directly above, so repeating it means hearing it twice before getting to anything new.

Can I generate alt text automatically?

As a first draft, yes, and it beats an empty field on a thousand-image catalogue. It cannot know what a given image is doing on a given page, which is the thing the standard actually asks about, so it needs a human pass. That is why every suggestion in Resiqo is editable before you export rather than applied for you.

Sources: W3C, Understanding SC 1.1.1 Non-text Content, and the WAI images tutorial, alt decision tree and tips; Google Search Central, image SEO best practices; Eric Eggert, “There is no character limit for alt text”, 19 February 2022; WebAIM discussion list, February 2016. The Terrill Thompson test page usually cited for the 125 character figure was checked and returns a 404, so it is not relied on above.