Alt text examples: ten images, ten finished alt attributes

Ten images from one page, each with the attribute already written and the reason it took that shape. The value depends on the job the image does, not on how it looks, so the prompt assigns a kind first and writes second. Decorative images end up empty on purpose.

The worked example

Run with the page “a product page for a stand mixer on a kitchen equipment shop” and these ten images:

1. The mixer front on, plain background
2. Close up of the speed dial
3. The shop logo in the header, links to the homepage
4. A small green tick before the words “free delivery over £50”
5. The mixer on a kitchen worktop with somebody kneading dough
6. A chart of bowl capacity across the three models in the range
7. A patterned strip between two sections
8. The magnifying glass inside the search button
9. A screenshot of a five star review with the reviewer’s name
10. A cutaway diagram of the planetary mixing action

#	Kind	Attribute	Chars
1	INFORMATIVE	alt="Cream stand mixer with the bowl locked in and the flat beater fitted"	66
2	INFORMATIVE	alt="Speed dial numbered 1 to 10, with a fold setting below 1"	54
3	FUNCTIONAL	alt="Kitchen Supply Co home"	22
4	DECORATIVE	alt=""	0
5	INFORMATIVE	alt="The mixer on a worktop kneading dough with the hook, hands resting beside it"	74
6	TEXT	alt="Bowl capacity: Mini 3.3 litres, Classic 4.8 litres, Pro 6.9 litres"	64
7	DECORATIVE	alt=""	0
8	FUNCTIONAL	alt="Search"	6
9	TEXT	alt="Five stars. It has not moved off the counter since it arrived. Priya R, verified buyer"	84
10	INFORMATIVE	alt="Cutaway of the beater spinning one way while the arm carries it the other"	71

REASSIGNED

• 3, from decorative to functional. You described it as the header logo. It links to the homepage, so it is the only content of a link and has to describe the destination rather than the brand.
• 4, from informative to decorative. The green tick sits immediately before the words “free delivery over £50”. The sentence already carries it, so describing the tick announces the same fact twice.

NEEDS A CAPTION

• 10. The planetary action is the reason this mixer costs what it does and 71 characters is a summary of it. Suggested caption: “The beater spins on its own axis while the arm carries it around the bowl, so it reaches the whole bowl without being scraped down.”

The two rows that were not what they looked like

Everything interesting in that output is in the REASSIGNED list, and both entries are the same mistake pointing in opposite directions.

The logo was described. A logo in a header is almost always inside an anchor, which makes it the label for a link rather than a picture of a brand. alt="Kitchen Supply Co logo" is the version most sites ship, and it announces the word “logo” to somebody who is trying to work out where the link goes.

The tick was described too. An icon sitting next to text that already says the thing is the clearest decorative case there is, and it is the one bulk alt-text passes get wrong most often, because a script that fills every empty attribute cannot tell that the sentence beside it is doing the work.

Both are cheap to fix and neither shows up in a count of how many images have attributes, which is why a page can pass an image check and still read badly.

Checking what you pasted

Run the finished page through the image alt checker. It reports which images carry the attribute and how coverage looks across the page, which is the half of this you cannot eyeball once a page has thirty images on it.

The rules behind the four kinds, including where the empty-versus-missing distinction comes from in the HTML specification, are in the long version. This page is the artefact; that one is the reasoning.

You are writing the alt attribute for every image on one web page. Output the
table first, with no preamble.

For each image I list, output one row of a markdown table with four columns:
the number I gave it, the kind you assigned, the finished attribute written
out in full as alt="...", and the character count of the value.

Assign every image exactly one kind before you write the value, because the
correct value differs by kind:

- INFORMATIVE. It carries something the surrounding text does not. Describe
  the information, not the picture.
- DECORATIVE. A reader who never saw it would lose nothing. The value is an
  empty string. Never describe it.
- FUNCTIONAL. It is a link or a button. Describe what happens when it is
  activated, not what the glyph looks like.
- TEXT. The image is text: a logo, a quote card, a screenshot of a table.
  The value is that text.

Rules for every value:

1. 125 characters or fewer. If the information will not fit, that image needs
   a caption and the attribute is the short version.
2. Never open with "image of", "photo of", "picture of", "graphic of",
   "illustration of". It is already announced as an image.
3. Never include a filename or a file extension.
4. If a caption sits directly under the image, do not repeat it. It gets read
   out twice.
5. If the image is the entire content of a link, FUNCTIONAL wins over every
   other kind. Describe the destination.
6. No keyword stuffing. If a word would not appear in the sentence a person
   would say out loud while pointing at the image, it does not go in.
7. If I have not told you enough to describe an image truthfully, write
   alt="[NEEDS DETAIL: what you would need to know]". Never invent what is in
   a picture you have not seen.

Then, under the table, two short lists.

REASSIGNED
Any image where the kind you assigned is not the kind my description implied,
and one line on why. This is the list I actually read.

NEEDS A CAPTION
Any image whose information does not fit in 125 characters, with the one
sentence that should sit near it on the page.

What the page is: [PAGE]
The images: [IMAGES]