How to write alt text: rules, examples and honest AI help

Missing alternative text is the kind of violation every testing tool finds within seconds. That is exactly why it sits at the top of automated audit reports, in the scans run by Germany's accessibility authority just as in the test reports attached to legal complaints. The good news: hardly any violation is faster to fix, and the rules for good alt text fit on an index card. This guide lays them out with concrete good/bad examples, explains the context test most alt text fails, and answers honestly where AI tools help and where they miss. You can generate a first draft for a real image right here.

Why alt text gets flagged first

The foundation sits in WCAG 2.2: success criterion 1.1.1 “Non-text Content” requires a text alternative for every image, one that serves the same purpose as the image itself. The criterion is at level A, the lowest of the three conformance levels. Failing it means failing every WCAG conformance level, no matter how well the rest of the site is built.

Enforcement adds the pressure. Whether an image has an alt attribute is trivial for a machine to detect. In Germany, the market surveillance authority MLBF uses automated scans for its preliminary checks under the BFSG, the German accessibility act, and the WCAG test reports attached to some German warning letters (Abmahnung, a formal cease-and-desist demand) list exactly these machine-detectable findings. The European Accessibility Act applies the same logic EU-wide. If you sell to German or other EU consumers, missing alt text is the most visible part of the obligation: found first, argued away last.

Technically, alt text is an attribute on the img element in your HTML. A screen reader speaks it at the point where sighted visitors see the image. If the attribute is missing, many screen readers fall back to the file name, and the product photo becomes a spoken “IMG_4032.jpg”. Anyone who has heard that once in a screen reader demo does not forget it.

The ground rules: good alt text in seven points

The authoritative reference is the images tutorial by the W3C's Web Accessibility Initiative. Its core rules come down to seven points:

• Function before appearance: describe what the image does in this spot, not every visible detail. For a magnifier icon in a search field, “Search” is right, “magnifying glass on grey background” is not.
• Short and precise: one crisp sentence as a rule of thumb. Anything longer belongs in the surrounding text, not in the alt attribute.
• Drop “image of” and “photo of”: screen readers announce images as graphics anyway. “Photo of a red sneaker” wastes the first three words.
• Linked images describe the destination: if the logo leads to the homepage, the alt text is “To the homepage”, not “Logo”. The target counts, not the motif.
• Decorative images get empty alt text: alt="" makes screen readers skip the image entirely. How to draw that line is covered below.
• File names are not alt text: “header-final-v3.jpg” helps nobody, image search included.
• Complex graphics need more: a chart gets a short alt text with the core message plus a full description in the surrounding text or a data table.

The table shows what this looks like in practice. The five cases cover the most common image types, from product photo to chart:

The pattern behind all five rows: good alt text answers the question of what a sighted visitor takes away from the image at this spot. No more, no less. That is also why there is no alt text dictionary to look things up in: the answer depends on the page, not on the image.

The context test: one photo, three correct alt texts

The most common mistake when writing alt text is assuming an image has one fixed, objective description. It does not. The W3C tutorial makes context the deciding criterion: the same photo needs different alt text depending on the page, and sometimes none at all.

Take one photo: a woman with a headset at a desk. On the contact page of a support team it is pure illustration, so the alt text stays empty. In a blog post about the new head of support, the same photo is informative: “Anna Berger, head of customer support, at her desk”. And as a clickable tile leading to the support form, the alt text describes the destination: “To the support form”. Three pages, three correct answers, one image.

Decorative or informative? How to decide

Decorative images get empty alt text: alt="". That is not sloppiness, it is the correct markup. The screen reader then skips the image entirely, and nobody wastes time on filler. The difference to a missing attribute matters: without an alt attribute, many screen readers announce the image anyway, often with the file name. Empty means explicitly empty, not left out.

• Is the image linked or does it trigger an action? Then it always needs alt text naming the destination.
• Does the image show text, say a banner with a discount code? Then the complete text belongs in the alt text.
• Would removing the image lose information? Then it is informative and needs a description.
• Is the image's message already fully stated in the surrounding text? Then the image is usually decorative.
• Is it a mood photo, a pattern, a divider with no message of its own? Empty alt text, done.

Alt text in online shops: where it costs money

In online shops, alt text matters twice. Legally, because B2C shops selling to German consumers count as e-commerce services covered by the BFSG, the European Accessibility Act extends the same duty across the EU, and product images without alternative text are among the typical findings of automated audits. And commercially, because a blind customer without alt text simply does not know what they are buying: colour, cut and material often live only in the image, not in the product description.

In practice this means: the alt text of a product photo complements the product data instead of repeating it. If “Sneaker model Vento, white” already stands next to the image as a heading, the alt text describes what the image adds, say the side view with the red sole. With five gallery images of the same product, each alt text names its own perspective: close-up of the stitching, sole from below, worn on foot. The same sentence five times would help a screen reader user as much as the same photo five times helps a sighted one.

The SEO effect is real, but it is not a free pass: search engines use alt text to understand images, so good alternative text improves your chances in image search. Stuffing “buy sneakers cheap sneakers men sneakers white” into the alt attribute helps no user and is not accessibility, it is spam read aloud. Write the alt text for people. The search engine reads along and rewards exactly that.

When AI helps and when it misses

AI image recognition is good at what wears people down: it reliably recognises objects, produces a usable first sentence and does that for 500 product images as quickly as for five. For a shop with a catalogue that has grown over years, that is the difference between a weekend project and a quarter-long one.

What AI cannot do is context. It sees the photo, but not the page: it does not know whether the woman with the headset is decoration, the new head of support, or a link to a form. Exactly this lack of context is what Aktion Mensch, one of Germany's largest inclusion organisations, criticises about generalised, fully automatic tools, and the criticism is fair. It also applies to accessibility overlays that try to guess missing alt text at runtime.

The honest workflow therefore has three steps, and the middle one is not optional:

1. Generate an AI draft: load the image into the alt text generator and get a suggestion. That takes care of object recognition and the first wording.
2. Check against the page context: why is the image on this page? Is it decorative, informative or linked? Does the description match the function? A human answers these questions, not a model.
3. Adjust and adopt: add the function, cut the filler, and only then publish.

This explicitly includes our own generator. It produces drafts, not finished alt text, and we deliberately do not sell it as anything else. A tool that promises to handle alt text fully automatically, without a human look, promises something that does not work with today's technology.

Frequently asked questions about alt text

Alt text is that rare accessibility topic where effort and impact are on friendly terms: the rules fit on an index card, the gaps are quick to find and quick to close. Scan your site once, work through the list with an AI draft plus a context check, and include your PDF documents while you are at it. Your screen reader users will notice the difference on their first visit.