Alternativtexte schreiben: Regeln, Beispiele und was KI kann

Ein guter Alternativtext beschreibt nicht, was auf einem Bild zu sehen ist, sondern was das Bild für die Seite bedeutet. Ein Foto von einem Huhn kann auf der Website eines Bio-Hofs für Freilandhaltung stehen und in einem Kochblog für ein Rezept. Der Alternativtext ist das, was ein Screenreader vorliest, wenn jemand das Bild nicht sehen kann. Er steht im Code und ist ein Pflichtbestandteil barrierefreier Websites nach WCAG 2.2, Kriterium 1.1.1. Die Regeln dafür passen auf eine Seite, das W3C hat sie in einem Entscheidungsbaum zusammengefasst. Das Schwierigste daran ist nicht das Schreiben, sondern die Entscheidung, welche Art Bild man vor sich hat.

Die Regeln in fünf Fällen

Das W3C unterscheidet Bilder nach ihrer Aufgabe:

1. Informative Bilder tragen eine Aussage. Der Alternativtext gibt diese Aussage kurz wieder.
2. Dekorative Bilder sind Schmuck ohne Information. Sie bekommen einen leeren Alternativtext, damit Screenreader sie überspringen.
3. Funktionale Bilder sind Links oder Knöpfe, etwa eine Lupe im Suchfeld. Der Alternativtext beschreibt die Funktion, also „Suchen“, nicht das Aussehen.
4. Bilder von Text, etwa ein Schriftzug als Grafik. Der Alternativtext enthält denselben Text.
5. Komplexe Bilder wie Diagramme oder Ablaufgrafiken. Ein kurzer Alternativtext sagt, was es ist, die ausführliche Information steht im Text der Seite.

Eine feste Längenbegrenzung nennt das W3C nicht. Die oft zitierten 125 Zeichen stammen nicht aus den Richtlinien. Meist reicht ein Satz.

Was einen guten Alternativtext ausmacht

• Der Zusammenhang zählt. Dasselbe Bild kann auf zwei Seiten zwei verschiedene Alternativtexte brauchen.
• Kein „Bild von“. Screenreader sagen ohnehin an, dass ein Bild folgt.
• Keine Schlüsselwörter stapeln. Ein Alternativtext ist kein Platz für Suchmaschinenoptimierung.
• Das Wichtigste zuerst. Wer zuhört, entscheidet nach wenigen Wörtern, ob es weitergeht.
• Besondere Bildarten kennzeichnen. Auf dieser Website beginnen Alternativtexte von Bildschirmfotos mit „Screenshot:“ und von KI-Bildern in Referenzen mit „KI-Bild:“. So wissen auch Menschen, die das Bild nicht sehen, woran sie sind.

Testen Sie sich selbst

Die Bilder stammen aus echten Projekten auf dieser Website. Welcher Alternativtext passt jeweils am besten?

Mitmachen

Welcher Alternativtext passt?

Fünf Fälle, drei mit Bild. Achten Sie jeweils auf den Zusammenhang.

1. Fall 1 von 5Website eines Bio-Hofs, Abschnitt über die Haltung der Tiere.

   

   „Huhn“„Bild von einem Huhn, Huhn, Bio, Hof, Eier kaufen, Freiland“„Braune Henne im Freilauf vor dem Hofgebäude“
2. Fall 2 von 5Vorher-Nachher bei einem Bilderbuch-Start-up: das Foto, aus dem das Buch entsteht.

   

   „Foto: ein grünes Plüsch-Krokodil liegt auf einem Holzboden“„Kuscheltier“Leerer Alternativtext, das Bild ist ja nur ein Beispiel
3. Fall 3 von 5Bericht über ein Meetup, das erste Bild unter der Überschrift.

   

   „IMG_4711.jpg“„Begrüßung durch Sebastian Kaiser, Stefan Gartner und Stefan Antonelli vor der Folie ‚KI im Einzelhandel‘“„Foto vom Event, das zeigt, wie toll der Abend war“
4. Fall 4 von 5Ein Lupen-Symbol ist der einzige Inhalt des Suchknopfs.

   „Lupe“„Suchen“Leerer Alternativtext
5. Fall 5 von 5Eine dekorative Wellenlinie trennt zwei Abschnitte.

   Leerer Alternativtext„Wellenlinie“„Dekoratives Element in Grün“

Was KI dabei kann und was nicht

Sprachmodelle beschreiben Bilder inzwischen recht zuverlässig. Für Websites mit Hunderten Produktbildern ist das eine echte Hilfe: Die KI liefert einen ersten Entwurf, ein Mensch prüft und passt an.

Was die KI nicht weiß: wofür das Bild auf dieser Seite steht. Sie kann nicht entscheiden, ob ein Bild dekorativ ist oder eine Aussage trägt, und sie beschreibt einen Suchknopf als Lupe. Das W3C hat zu KI-generierten Alternativtexten keine eigene Empfehlung veröffentlicht. Es bleibt bei der Grundregel: Wer die Seite verantwortet, entscheidet über den Zweck eines Bildes. KI-Entwürfe sind deshalb ein Anfang, kein Ergebnis.

Wo die Regeln an Grenzen stoßen

Manche Bilder lassen sich nicht in einem Satz beschreiben: ein Organigramm, eine Infografik, ein Bauplan. Dann gehört die Information in den Text der Seite, etwa als Liste, und der Alternativtext verweist darauf. Und bei Kunstwerken oder Fotografie als Produkt ist die Beschreibung selbst Teil des Angebots. Dort lohnt es sich, mehr Mühe zu investieren.

So fangen Sie an

Öffnen Sie Ihre Startseite mit dem kostenlosen Prüfwerkzeug WAVE und schauen Sie sich alle Alternativtexte an. Fragen Sie sich bei jedem Bild: Was soll es hier sagen? Den ausführlichen Entscheidungsbaum finden Sie beim W3C (öffnet in neuem Tab). Wie die übrigen Anforderungen aussehen, erklärt der Artikel WCAG 2.2 verständlich.

Wenn Sie Ihre Website prüfen lassen möchten: Ich biete Schnellchecks und Audits nach WCAG 2.2 an.