Describing the image, including what it is

Who it is for and what it does

Alt text is read aloud by screen readers, shown when an image fails to load, and used by search engines. It is the image’s content for anybody who is not seeing it, and it is a normal part of delivering an image rather than an optional extra.

It is also frequently done badly, in a way that makes things worse rather than better.

The rule that decides the content

Describe the function, not the inventory.

Ask what the image is doing in its context, and write that. The same photograph gets different alt text depending on where it appears.

• On a product page: A terracotta jar of mango pickle, lid removed, on a wooden table.
• In an article about a family business: A woman in her sixties sealing jars of pickle in a courtyard.
• As a decorative background behind a headline: alt="": empty, so screen readers skip it.

That last case is the one people get wrong most often. Alt text on a purely decorative image is noise: the reader hears a description of something irrelevant between them and the content. An empty alt attribute is the correct, accessible answer for decoration.

Writing it

• Roughly 125 characters. Some screen readers truncate around there, and brevity is a kindness.
• Do not start with “Image of” or “Picture of”. The screen reader has already said it is an image.
• Lead with what matters. The subject first, context after.
• Include text that appears in the image. If a sign or a headline is part of the picture, it must be in the alt text or that information is unavailable.
• Do not stuff keywords. It degrades the experience for the people the attribute exists for, which is the whole point of it.

Should you say it is AI-generated?

Genuinely contested, and the honest answer is that it depends on whether the fact is relevant to understanding the image.

The case for including it: a person using a screen reader should have access to the same information a sighted person has. If the image is visibly stylised or labelled as generated on the page, withholding it from alt text creates an inequality.

The case against: alt text is for conveying content, and a provenance note consumes characters that could describe the picture. Provenance is better carried by a caption, a credit line or embedded metadata, all of which reach everyone.

The practical position most publishers have settled on:

• Put provenance in the caption or credit, where everybody gets it.
• Keep alt text for content, unless the fact that it is generated is part of what the image is communicating.
• Do include it where the image might be taken as documentary evidence: a news context, a person, a place, an event.

Whatever you choose, be consistent within a project, and write it down in the spec so the client’s team follows the same rule after you have gone.

The rest of accessibility

Alt text is one part. The others belong to the image itself.

Contrast, covered in the type lesson. 4.5:1 for normal text.

Do not put essential information only in an image. A price, an address, a date in a graphic is invisible to a screen reader and unsearchable. It belongs in the page text as well.

Avoid rapid flashing in anything animated: three flashes a second is the seizure threshold.

Do not rely on colour alone to convey meaning, since some readers will not distinguish the colours you chose.

The limitation

Alt text cannot carry what a complex image conveys. A detailed illustration, a chart, a photograph whose meaning is in its atmosphere: 125 characters will not do it, and pretending otherwise is a box-ticking exercise.

For those, the right answer is a longer description elsewhere on the page, or a caption doing real work, or text content that makes the image supplementary rather than load-bearing. An image carrying essential meaning that cannot be described is an accessibility problem in the design, not in the alt attribute, and no amount of careful writing in that field fixes it.