Alternativtexte: was ein Bild sagt, wenn es niemand sieht

Ein Alternativtext ist der Text, der an die Stelle eines Bildes tritt, wenn jemand das Bild nicht sehen kann — vorgelesen vom Screenreader, ausgegeben auf der Braillezeile oder angezeigt, wenn das Bild nicht lädt. Er gehört in das alt-Attribut des Bildes. Was hineingehört, hängt nicht vom Bild ab, sondern davon, was es auf der Seite leistet: ein Bild, das Information trägt, bekommt eine kurze Beschreibung dieser Information, ein verlinktes Bild das Linkziel, ein reines Schmuckbild ein leeres alt="". Der häufigste Fehler ist nicht der fehlende Text, sondern der falsche — überall irgendetwas hineinzuschreiben.

Worum es geht

Das alt-Attribut steht direkt im Bild-Tag:

<img src="hund.jpg" alt="Kleiner Hund, dem das eigene Fell über ein Auge fällt">

Das Erfolgskriterium 1.1.1 der WCAG, Stufe A, verlangt es: Jeder Nicht-Text-Inhalt braucht eine Textalternative, die denselben Zweck erfüllt. Reine Dekoration muss so eingebunden sein, dass assistive Technik sie überspringen kann. Das W3C nennt, wer davon profitiert:

• Screenreader-Nutzer, denen der Text vorgelesen oder als Braille ausgegeben wird.
• Nutzer von Sprachsteuerung, die einen Bild-Button per Sprachbefehl ansprechen.
• Mobile Nutzer, die Bilder abschalten, um Datenvolumen zu sparen.
• Suchmaschinen, die den Bildinhalt sonst schlechter einordnen können.

Die Textalternative bestimmt der Autor, abhängig von Verwendung, Zusammenhang und Inhalt — so formuliert es das W3C selbst. Es gibt keinen Text, der zu einem Bild gehört. Es gibt nur einen, der zu einem Bild an einer bestimmten Stelle gehört.

Die Entscheidung vor dem Text

Bevor du schreibst, ordne das Bild ein. Das W3C unterscheidet in seinem Bilder-Tutorial unter anderem:

Art	Beispiel	Was ins alt gehört
Informativ	Produktfoto, Porträt, einfache Grafik	kurze Beschreibung der Information
Dekorativ	Hintergrundmuster, Trennlinie, Stimmungsbild	nichts: alt=""
Funktional	Logo als Link, Lupe als Suchbutton	das Ziel oder die Aktion, nicht das Aussehen
Bild mit Text	Grafik mit einem Slogan	der Text aus dem Bild
Komplex	Diagramm, Infografik, Bauplan	kurzer Text plus ausführliche Beschreibung auf der Seite

Der Entscheidungsbaum des W3C

Das W3C hat dafür einen Entscheidungsbaum. Er ist praktischer als jede Faustregel. Geh die Fragen in dieser Reihenfolge durch:

1. Enthält das Bild Text?

• Der Text steht daneben auch als echter Text → alt=""
• Der Text ist nur ein optischer Effekt → alt=""
• Der Text hat eine Funktion, etwa als Symbol → die Funktion beschreiben
• Der Text kommt sonst nirgends vor → den Text aus dem Bild ins alt

2. Steckt das Bild in einem Link oder Button, dessen Zweck ohne das Bild unklar wäre? → Linkziel oder Aktion beschreiben.

3. Trägt das Bild zur Bedeutung der Seite bei?

• Einfache Grafik oder Foto → kurze Beschreibung der Bedeutung
• Diagramm oder komplexe Information → die Information zusätzlich auf der Seite ausgeben
• Wiederholt nur, was daneben als Text steht → alt=""

4. Ist das Bild rein dekorativ? → alt=""

Wenn du danach noch unsicher bist, helfen die vier Fragen aus der WCAG-Technik G94:

1. Warum steht dieses Bild hier?
2. Welche Information zeigt es?
3. Welchen Zweck erfüllt es?
4. Wenn ich das Bild nicht verwenden könnte — mit welchen Worten würde ich dieselbe Funktion oder Information vermitteln?

Die vierte Frage ist die nützlichste. Sie bringt dich weg vom Beschreiben und hin zum Übersetzen.

Wie ein guter Alternativtext aussieht

Knapp, aber genau. WebAIM formuliert es so: Inhalt und Funktion so knapp wie möglich, ohne an Genauigkeit zu verlieren. Eine feste Zeichengrenze gibt es nicht.

Ohne „Bild von" oder „Foto von". Dass es ein Bild ist, sagt der Screenreader ohnehin an.

Ohne Ausschmückung. „Zwei Handwerker montieren ein Fenster" ist besser als „Motiviertes Team bei der Arbeit an einem hochwertigen Fenster". Beschreib, was zu sehen ist und was es bedeutet — keine Werbung.

Bei verlinkten Bildern: das Ziel, nicht das Aussehen. Das W3C schreibt, der Text solle die Aktion vermitteln, die ausgelöst wird, nicht das Bild beschreiben. Sein eigenes Beispiel: Das W3C-Logo, das zur Startseite führt, hat den Alternativtext „W3C home".

Suchbegriffe nur, wo sie natürlich passen. Dazu mehr im nächsten Abschnitt.

Was Google mit dem Alternativtext macht

Google nutzt den Alternativtext zusammen mit Bilderkennung und dem Inhalt der Seite, um zu verstehen, was ein Bild zeigt. Bei einem verlinkten Bild dient er außerdem als Ankertext des Links.

Google warnt ausdrücklich davor, das alt mit Suchbegriffen vollzustopfen: Das verschlechtert die Nutzererfahrung und kann dazu führen, dass die Seite als Spam eingestuft wird. Googles eigenes Beispiel zeigt die Abstufung:

• schlecht: eine lange Kette aus Hunderassen und „Welpenfutter günstig"
• besser: alt="puppy"
• am besten: alt="Dalmatian puppy playing fetch"

Zwei weitere Punkte aus derselben Anleitung: Kurze, sprechende Dateinamen helfen (schwarzes-kaetzchen.jpg statt IMG00023.JPG), und Bilder, die per CSS als Hintergrund eingebunden sind, indexiert Google nicht. Für Schmuck ist das egal. Für ein Produktfoto nicht.

Die gute Nachricht: Was für Screenreader richtig ist, ist auch für Google richtig. Man schreibt nicht zwei Fassungen.

Wann das Feld leer bleiben muss

Das ist die Hälfte, die regelmäßig falsch gemacht wird. Ein dekoratives Bild bekommt das alt-Attribut, aber ohne Inhalt:

<img src="muster.jpg" alt="">

Zwei Anführungszeichen direkt hintereinander. Das ist die Anweisung an assistive Technik: überspringen. Die WCAG begründen das so: Textalternativen an solchen Elementen lenken Screenreader-Nutzer nur vom Inhalt ab.

alt ganz wegzulassen ist etwas anderes. Das W3C schreibt, dass manche Screenreader dann den Dateinamen vorlesen — und IMG-20240517-final-v2.jpg ist schlechter als jede Beschreibung.

Ein title-Attribut gehört an dekorative Bilder ebenfalls nicht. Die WCAG-Technik H67 heißt wörtlich: leerer Alternativtext und kein title für Bilder, die assistive Technik ignorieren soll.

Noch sauberer ist CSS. W3C und WebAIM empfehlen, rein dekorative Bilder wo möglich als CSS-Hintergrund einzubinden. Dann stehen sie gar nicht erst im Inhalt. Wo das nicht geht — etwa weil der Seitenbaukasten nur Bild-Elemente kennt —, ist das leere alt der richtige Weg.

Der Sonderfall: Bild im Link.

• Der Link hat schon einen Text → alt="". Der Screenreader liest den Linktext, das Bild bleibt stumm.
• Der Link hat keinen Text → das alt muss den Link tragen. Das Logo, das zur Startseite führt, bekommt alt="Musterbetrieb Startseite", nicht alt="Logo".

Der zweite Fall ist der häufigste echte Fehler in diesem Bereich. WebAIM bringt es auf den Punkt: Wenn ein Bild der einzige Inhalt eines Links ist, ist der Alternativtext alles, was der Screenreader hat.

Das title-Attribut ist keine Lösung

title erzeugt einen kleinen Kasten, der erscheint, wenn die Maus auf dem Bild ruht. MDN schreibt dazu klar: Man soll nicht davon ausgehen, dass jemand ihn je sieht — wer nur Tastatur oder Touchscreen nutzt, sieht ihn nicht.

Daraus folgt:

• title ist kein Ersatz für alt.
• title soll den Alternativtext nicht wiederholen — manche Screenreader lesen sonst denselben Text zweimal.
• Für eine Bildunterschrift gibt es <figure> und <figcaption>, nicht title.
• Was wichtig ist, gehört sichtbar auf die Seite.

Wenn ein Satz nicht reicht

Bei Diagrammen, Infografiken und Bauplänen ist der Alternativtext überfordert. Ein Balkendiagramm mit zwölf Werten lässt sich nicht in einen Satz übersetzen.

Das frühere longdesc-Attribut ist im HTML-Standard als veraltet geführt. Das W3C beschreibt heute diese Wege:

• Die Information auf der Seite ausgeben: ein Absatz unter dem Diagramm, der die Aussage zusammenfasst, oder eine Tabelle mit den Werten — am besten mit <figure> und <figcaption> zusammengehalten.
• Ein Link direkt neben dem Bild auf eine Seite mit der ausführlichen Beschreibung.
• aria-describedby auf einen Text an anderer Stelle der Seite. Das W3C weist auf die Grenze hin: Der verknüpfte Text wird als ein einziger Absatz vorgelesen, Überschriften und Tabellen darin gehen verloren.

Der erste Weg ist fast immer der beste. Er versteckt nichts, hilft jedem, der das Diagramm nicht auf Anhieb versteht, und macht die Zahlen als echten Text auffindbar.

Wie du das selbst prüfst

Bilder ausschalten. In den Browsereinstellungen lässt sich das Laden von Bildern abschalten. Seite neu laden: Was du jetzt liest, ist ungefähr das, was ein Screenreader-Nutzer hört.

Die WAVE-Erweiterung. Das kostenlose Werkzeug von WebAIM für Chrome, Firefox und Edge markiert Bilder ohne alt, mit leerem alt und verdächtige Fälle direkt auf der Seite. Ein guter erster Durchgang.

Der Logo-Test. Öffne mit Strg+U den Quelltext deiner Startseite und such das Logo in der Kopfzeile. Steht in seinem alt „Logo" oder gar nichts, obwohl es zur Startseite verlinkt, hast du deinen ersten Fund.

Vorlesen lassen. NVDA ist ein kostenloser Screenreader für Windows. Geh deine Startseite damit einmal per Tastatur durch. Die ersten Minuten sind verwirrend, danach hörst du sofort, welche Bilder unbrauchbar beschriftet sind.

Die WordPress-Mediathek — mit einem Haken. In der Mediathek hat jedes Bild ein Feld für den Alternativtext. Dieser Text wird aber beim Einfügen in den Beitrag kopiert. Änderst du ihn später in der Mediathek, bleibt das bereits eingefügte Bild beim alten Text. Das hat auch einen guten Grund: Dasselbe Bild kann an zwei Stellen verschiedene Aufgaben haben. Prüf und korrigier den Text deshalb dort, wo das Bild steht — im Block.

Was zu tun ist

1. Fang bei den verlinkten Bildern an. Logo, Teaser-Kacheln, Bildlinks in Übersichten. Dort macht ein falscher Alternativtext einen Link unbenutzbar — das wiegt schwerer als ein unbeschriebenes Stimmungsbild.
2. Dann die Informationsgrafiken. Diagramme bekommen einen kurzen Text plus die ausführliche Aussage auf der Seite.
3. Dann die informativen Fotos: kurz, genau, ohne „Bild von" und ohne Stichwortketten.
4. Zum Schluss die Schmuckbilder auf leeres alt setzen — oder in CSS verschieben.
5. Prüf mit WAVE und einmal mit NVDA nach.

Zu KI-erzeugten Vorschlägen: Werkzeuge, die ein Bild automatisch beschreiben, sind ein brauchbarer Startpunkt. Sie beschreiben aber, was zu sehen ist — nicht, welche Aufgabe das Bild an genau dieser Stelle hat. Ob ein Bild dekorativ ist oder ein Link, weiß das Werkzeug nicht. Nachlesen und kürzen ist Pflicht.

Und eine Erwartung geraderücken: Alternativtexte sind kein Projekt, das man einmal abschließt. Jedes neue Bild braucht die Entscheidung erneut. Wenn du oder deine Mitarbeiter Inhalte pflegen, gehört sie in die Routine — beim Einfügen, nicht irgendwann später.

Quellen

• W3C WAI, Images Tutorial — Bildarten, wer von Textalternativen profitiert, der Text hängt von Verwendung und Zusammenhang ab: w3.org
• W3C WAI, An alt Decision Tree — die Fragen und Ergebnisse des Entscheidungsbaums: w3.org
• W3C WAI, Decorative Images — leeres alt, Dateiname bei fehlendem alt, CSS-Hintergrund, Technik H67: w3.org
• W3C WAI, Functional Images — Aktion statt Aussehen, das Beispiel „W3C home": w3.org
• W3C WAI, Complex Images — Beschreibung auf der Seite, Link, figure, aria-describedby und seine Grenze: w3.org
• W3C, Understanding WCAG 2.2: Non-text Content — Erfolgskriterium 1.1.1, Stufe A, Umgang mit Dekoration: w3.org
• W3C, WCAG-Technik G94 — die vier Fragen für kurze Textalternativen: w3.org
• WHATWG, HTML Standard: Obsolete features — longdesc am img ist veraltet: html.spec.whatwg.org
• MDN, The Image Embed element — title als Tooltip, nicht für Tastatur und Touch, kein Ersatz für alt, leeres alt: developer.mozilla.org
• WebAIM, Alternative Text — knapp ohne Genauigkeitsverlust, kein „Bild von", Bild als einziger Linkinhalt, CSS für Dekoration: webaim.org
• Google Search Central, Google Images best practices — Nutzung des Alternativtexts, Ankertext, Keyword-Stuffing als möglicher Spam, Dateinamen, CSS-Bilder nicht indexiert: developers.google.com
• WebAIM, WAVE Browser Extensions — kostenlos für Chrome, Firefox und Edge: wave.webaim.org
• NV Access, NVDA herunterladen — kostenlos, für Windows 10 und neuer: nvaccess.org
• WordPress Trac, Ticket 47456 — der Mediathek-Text wird automatisch als Alternativtext in den Beitrag übernommen, obwohl er vom Zusammenhang abhängt: core.trac.wordpress.org
• Image Source Control, Fix missing ALT texts in WordPress — Mediathek und Beitrag sind nicht synchron, der Text wird beim Einfügen übernommen: imagesourcecontrol.com