Alt text

Alt text is the written description attached to an image in the page code. It is read aloud by screen readers, displayed in place of the picture when the picture does not load, and used by search engines as one of the few clues about what an image contains. Most visitors never see it, which is exactly why it gets forgotten.

In short

• A short written stand-in for the image, in the page code.
• Read aloud to people using screen readers.
• Shown when the image fails to load, which happens on a weak connection.
• Decorative images should carry an empty one, deliberately.

Who is actually reading it

Four audiences depend on it, and only one of them is a search engine.

• People using a screen reader. The description is announced in place of the image, and a missing one is often replaced by the file name.
• Anyone on a poor connection. Images give up before text does. On mobile data outside the city, alt text is what remains on the screen.
• Email recipients. Many mail applications hold images back until the reader asks for them, which is why an email template built as one large picture arrives blank.
• Search engines. It is the main written signal about a picture, and it feeds image search.

The first two are the reason the attribute exists. The last one is the reason it usually gets written, which is how it ends up full of search terms and empty of description.

What to write

Describe what the image shows, in the context of the page it is on. That last part is the whole craft.

The same photograph of a team standing outside a building needs different descriptions on different pages. On a contact page, the useful description is the front of the premises so somebody can recognise it. On an about page, it is the people. Nobody needs both, and the version that helps depends on why the image is there at all.

Skip openings like “image of” or “photo of”. A screen reader already announces that it is an image, so those words are heard twice. Keep it to a sentence. Write it the way you would describe the picture to somebody standing beside you on the phone, and stop when you have said the useful part. This is the same instinct that makes good anchor text work: describe the thing, not the mechanism.

When to leave it empty

An empty alt attribute is a real decision with a real effect, and it is the part almost everybody gets wrong.

Decorative images, background textures, dividers, a shape behind a heading, and icons sitting next to text that already says the same thing, should have an alt attribute present and empty. That tells a screen reader to pass over it in silence. Missing entirely is different: the software then assumes the image matters and reads whatever it can find.

So the rule is not that every image needs words. It is that every image needs a choice between a description and a deliberate silence, and pages that skip the choice are noisier to listen to than pages with no images at all. Getting this right is unglamorous user experience work of the kind that never shows up in a design review.

Text trapped inside a picture

The most expensive alt text mistake is not bad wording. It is putting words in an image and expecting them to count.

Opening hours drawn into a graphic, a list of services set as a poster, a promotion written across a photograph: none of that text exists as far as a search engine, a screen reader or a translation tool is concerned. It is a picture of words. Alt text can rescue the meaning, and only if somebody writes the same information into the attribute, which rarely happens on a graphic exported for social and dropped onto a page.

Real text is also the only version that on-page SEO can work with, since a search engine reads the words on the page and not the words in the artwork. The better habit is to keep important words as real text and let the image support them, which is a graphic design decision more than a technical one. Where a graphic really is the right format, write the alt text at the moment you place the image, while you still remember what it says. Adding descriptions to two hundred images later is a job nobody finishes, and it is the reason so many sites carry an image audit that has been open for a year.

Where alt text goes missing

Sites rarely fail at this deliberately. They fail in four predictable places, and knowing them is faster than auditing every image.

• Page builders. Images dropped into a layout module often have no field for a description on the surface, so nobody fills one in.
• Media libraries. Some systems attach one description to the file itself, which is then reused everywhere the image appears, however different the context.
• Product photos. Store images imported from a supplier arrive with either nothing or the supplier’s own file names.
• Social graphics. Artwork made for a feed and reused on a page, carrying words in the picture and no description behind it.

The habit that fixes all four is the same: write the description when you place the image, in the sentence you would have used to explain it to a colleague. It takes seconds at that moment and it is a project later.

Words you will hear

• Alt attribute. The correct name. Alt tag is common and technically wrong, since it is an attribute of the image tag.
• Decorative image. One that carries no information, and should have an empty alt attribute.
• Screen reader. Software that reads a page aloud, used by people with limited or no vision.
• Title attribute. The tooltip on hover. A different attribute, poorly supported on phones, and no substitute.
• File name. The name of the image file itself, often read aloud when alt text is missing.