29. Oktober 2026

Alternativtext für Bilder schreiben: der Entscheidungsbaum des W3C

Ein Alternativtext ersetzt ein Bild für Menschen, die es nicht sehen können: Er kann per Sprachausgabe vorgelesen, als Text angezeigt oder in Braille umgewandelt werden. Bei einem HTML-Bild steht er im alt-Attribut des img-Elements. Die eigentliche Schwierigkeit beim Alternativtext-Schreiben ist nicht, wo er hingehört, sondern was er enthalten soll: eine Beschreibung, den Zweck eines Links, den Text im Bild oder gar nichts (leeres alt). Dafür bietet das W3C einen Entscheidungsbaum mit fünf Fragen, die der Reihe nach gestellt werden. Dieser Artikel führt Sie Schritt für Schritt hindurch, ergänzt ihn um Beispiele aus der W3C-Seite „Understanding 1.1.1“ und stellt die Fehler vor, die das W3C in seiner begleitenden Dokumentation zu den WCAG als Fehlschläge (Failures) des Erfolgskriteriums 1.1.1 „Nicht-Text-Inhalt“ aufführt.

Was die WCAG vom Alternativtext eines Bildes verlangen

Das Erfolgskriterium 1.1.1 „Nicht-Text-Inhalt“ gehört zur Stufe A. Es legt fest, dass jeder Nicht-Text-Inhalt, der dem Nutzer präsentiert wird, eine Textalternative hat, die den gleichen Zweck erfüllt – abgesehen von einigen festgelegten Situationen. Das Ziel fasst das W3C so zusammen: Nicht-Text-Informationen sollen mehr Menschen zugänglich sein.

Warum Text? Weil er über jeden Sinneskanal ausgegeben werden kann: visuell, auditiv oder taktil. Wer ein Foto nicht sehen kann, kann sich dessen Textalternative per Sprachausgabe vorlesen lassen; taubblinde Menschen können diesen Text in Braille lesen. Das W3C ergänzt, dass Textalternativen auch manchen Menschen helfen können, die Schwierigkeiten haben, die Bedeutung von Fotos, Zeichnungen, Diagrammen oder Animationen zu verstehen, und dass sie Nicht-Text-Inhalte durchsuchbar und wiederverwendbar machen.

Das Kriterium sieht Sonderfälle vor, die Ihnen auf einer Website begegnen können:

Steuerelemente und Eingaben (etwa ein Bild als Absende-Schaltfläche): Sie brauchen einen Namen, der ihren Zweck beschreibt.
Zeitbasierte Medien, Tests oder Übungen, die als Text ungültig wären, sowie Inhalte, die in erster Linie ein bestimmtes Sinneserlebnis schaffen sollen: Die Textalternative liefert mindestens eine beschreibende Kennzeichnung.
CAPTCHA: Die Textalternative benennt und beschreibt seinen Zweck, und es werden alternative CAPTCHA-Formen für andere Sinne angeboten, um unterschiedlichen Behinderungen gerecht zu werden.
Reine Dekoration, rein visuelle Formatierung oder Inhalte, die dem Nutzer nicht präsentiert werden: Sie müssen so umgesetzt sein, dass assistive Technologien sie ignorieren können.

Alternativtext für Bilder schreiben mit dem W3C-Entscheidungsbaum

Der Entscheidungsbaum des W3C beschreibt, wie das alt-Attribut des img-Elements in verschiedenen Situationen zu verwenden ist. Gehen Sie die Fragen der Reihe nach durch: Bei den ersten vier liefert ein „Ja“ Ihre Anweisung, ein „Nein“ führt zur nächsten Frage.

1. Enthält das Bild Text? Steht derselbe Text auch als echter Text in der Nähe oder dient er nur dem visuellen Effekt: leeres alt (dekoratives Bild). Hat der Text eine bestimmte Funktion, etwa als Icon: Das alt vermittelt diese Funktion (funktionales Bild). Ist der Text im Bild sonst nirgends vorhanden: Das alt gibt diesen Text wieder (Bild mit Text).
2. Wird das Bild in einem Link oder einer Schaltfläche verwendet, und wäre ohne das Bild schwer oder gar nicht zu verstehen, was der Link oder die Schaltfläche bewirkt? Wenn ja: Das alt nennt das Linkziel oder die ausgelöste Aktion (funktionales Bild).
3. Trägt das Bild zur Bedeutung der Seite oder des Kontexts bei? Bei einer einfachen Grafik oder einem Foto: eine kurze Beschreibung, die diese Bedeutung vermittelt (informatives Bild). Bei einem Diagramm oder komplexen Informationen: Die Information wird an anderer Stelle der Seite bereitgestellt (komplexes Bild). Zeigt es Inhalte, die echten Text in der Nähe wiederholen: leeres alt.
4. Ist das Bild rein dekorativ oder nicht für Nutzer bestimmt? Wenn ja: leeres alt (dekoratives Bild).
5. Ist Ihr Fall nicht aufgeführt oder unklar, welcher Text passt? Der Baum deckt nicht alle Fälle ab: Ziehen Sie das vollständige Bilder-Tutorial des W3C heran.

Informative, funktionale und komplexe Bilder: Beispiele

Die Beispiele auf der Seite „Understanding 1.1.1“ zeigen, dass ein guter Alternativtext vom Kontext abhängt, nicht nur davon, was das Bild darstellt. Die zitierten Alternativen sind aus dem Englischen übersetzt, bei kurzen Texten mit dem Original in Klammern.

Ein Bild, zwei Alternativen. Ein Bild der Weltkugel verlinkt auf einer Reise-Website auf den Bereich für internationale Reisen; seine Alternative lautet „Internationale Reisen“ (International Travel). Dasselbe Bild hat als Link auf der Website einer Universität die Alternative „Internationale Standorte“ (International Campuses). Wenn das Bild einen Link erst verständlich macht, zählt das Ziel. Ebenso hat das Vorschaubild der Titelseite einer Zeitung, das auf die Startseite der „Smallville Times“ führt, einfach die Alternative „Smallville Times“.

Ein Foto, zwei Detailstufen. In einer Nachricht über einen internationalen Gipfel hat das Foto zweier führender Politiker beim Händeschütteln die Alternative „Präsident X von Land X schüttelt Premierminister Y von Land Y die Hand“. Auf einer Website, die die Feinheiten diplomatischer Beziehungen erläutert, erhält dasselbe Foto eine genauere erste Alternative mit Datum („… am 2. Januar 2009“), ergänzt durch eine Beschreibung des Raums, der Gesichtsausdrücke und der übrigen anwesenden Personen. Diese Beschreibung kann auf derselben Seite stehen oder in einer separaten Datei, die über einen Link oder einen anderen standardisierten programmatischen Mechanismus mit dem Bild verknüpft ist.

Ein Datendiagramm. Für ein Balkendiagramm, das die Verkäufe in Juni, Juli und August vergleicht, lautet die kurze Bezeichnung „Abbildung 1 – Verkäufe im Juni, Juli und August“ (Figure one - Sales in June, July and August). Eine längere Beschreibung nennt den Diagrammtyp und fasst Daten, Trends und Folgerungen auf hoher Ebene zusammen, vergleichbar mit dem, was das Diagramm zeigt; wo möglich und praktikabel, werden die Daten selbst in einer Tabelle bereitgestellt.

Ein interaktives Bild. Für einen anklickbaren Gebäudegrundriss, der zur Seite jedes Raums führt, beschreibt die kurze Alternative das Bild und seinen interaktiven Zweck: „Gebäudegrundriss. Wählen Sie einen Raum für weitere Informationen.“ (Building floor plan. Select a room for more information.)

Dekorative Bilder: wann ein leeres alt richtig ist

Mancher Nicht-Text-Inhalt ist nicht dafür gedacht, vom Nutzer gesehen oder verstanden zu werden. Das W3C nennt als Beispiele transparente Bilder, mit denen Text verschoben wird, ein unsichtbares Bild zur Erfassung von Nutzungsstatistiken oder einen dekorativen Schnörkel in einer Ecke, der keine Information vermittelt. Solche Bilder sollen nicht beschrieben, aber auch nicht unmarkiert gelassen werden.

Alternativtext auf solchen Elementen lenkt Screenreader-Nutzer nur vom Inhalt ab. Werden sie dagegen gar nicht markiert, rätseln diese Nutzer, was ihnen entgangen sein könnte – obwohl ihnen nichts entgangen ist. Das Kriterium verlangt daher, sie so umzusetzen, dass assistive Technologien sie ignorieren können; zu den Techniken, die das W3C für diesen Fall aufführt, gehören ein leeres alt ohne title-Attribut am img-Element oder das Einbinden des dekorativen Bildes per CSS. Achtung: Informationen dürfen nie ausschließlich über ein CSS-Hintergrundbild vermittelt werden; das ist ein dokumentierter Fehlschlag des Kriteriums (F3).

Typische Fehler beim Alternativtext, dokumentiert als Failures

Auf seiner Seite „Understanding 1.1.1“ führt das W3C Fehlschläge des Kriteriums auf. Das sind die schlechten Beispiele, nach denen Sie bei einer Prüfung Ihrer Bilder suchen sollten:

Das alt-Attribut oder die Textalternative bei img-, area- und input-Elementen vom Typ image weglassen (F65).
Texte als Alternative verwenden, die keine sind, etwa Dateinamen oder Platzhaltertext (F30).
Einem Bild, das ignoriert werden soll, ein nicht leeres alt wie alt="spacer" oder alt="image" geben (F39).
Dekorative Bilder in HTML nicht so auszeichnen, dass assistive Technologien sie ignorieren können (F38).
Informationen ausschließlich über CSS-Hintergrundbilder vermitteln (F3).
In der Textalternative Informationen auslassen, die durch Farbunterschiede im Bild vermittelt werden (F13).
Die Textalternative nicht aktualisieren, wenn sich der Nicht-Text-Inhalt ändert (F20).
ASCII-Art oder textähnliche Zeichen zur Darstellung von Text ohne Textalternative verwenden (F72, F71).
Eine Langbeschreibung bereitstellen, die nicht den gleichen Zweck erfüllt oder die nicht die gleichen Informationen wie das Bild enthält (F67).

So prüfen Sie die Alternativtexte Ihrer Bilder

Wenden Sie für jedes Bild einer Seite den Entscheidungsbaum an und gleichen Sie das Ergebnis mit den obigen Fehlschlägen ab. Konkret: Suchen Sie Bilder ohne alt-Attribut, Bilder mit einem Dateinamen als alt und dekorative Bilder, die beschrieben wurden; prüfen Sie dann Bilder in Links und Schaltflächen darauf, ob die Alternative das Ziel oder die Aktion nennt. Prüfen Sie bei Diagrammen, ob es eine Langbeschreibung gibt – auf der Seite oder an einer anderen Stelle, die über einen direkt neben dem Bild platzierten Link erreichbar ist – und, wo möglich, eine Datentabelle.

Das W3C weist außerdem darauf hin, dass die Textalternative der Sprache des ursprünglichen Inhalts entsprechen sollte, normalerweise der Standardsprache der Seite. Beginnen Sie mit einem kostenlosen Test Ihrer Website bei Conformly und aktivieren Sie anschließend die kontinuierliche Überwachung, um neu veröffentlichte Bilder ohne Alternativtext zu erkennen.

Häufige Fragen

Wie schreibt man einen guten Alternativtext für ein Bild?

Folgen Sie der Reihenfolge des W3C-Entscheidungsbaums. Enthält das Bild Text, der sonst nirgends steht, übernehmen Sie diesen Text. Steht es in einem Link oder einer Schaltfläche und wäre ohne das Bild nicht zu verstehen, was diese bewirken, beschreiben Sie Ziel oder Aktion. Trägt es Bedeutung und ist es eine einfache Grafik oder ein Foto, geben Sie eine kurze Beschreibung, die diese Bedeutung im Kontext vermittelt; ist es ein Diagramm oder eine komplexe Information, stellen Sie diese Information an anderer Stelle der Seite bereit; wiederholt es nur echten Text in der Nähe, lassen Sie das alt leer. Ist es rein dekorativ, lassen Sie das alt ebenfalls leer.

Wann muss das alt-Attribut leer sein?

Laut W3C-Entscheidungsbaum: wenn der Text im Bild auch als echter Text in der Nähe steht, wenn dieser Text nur dem visuellen Effekt dient, wenn das Bild Inhalte wiederholt, die als echter Text in der Nähe stehen, und wenn das Bild rein dekorativ oder nicht für Nutzer bestimmt ist.

Darf man das alt-Attribut bei dekorativen Bildern weglassen?

Nein. Das alt-Attribut bei einem img-Element wegzulassen, ist ein dokumentierter Fehlschlag des Kriteriums 1.1.1 (F65). Ein dekoratives Bild muss so markiert werden, dass assistive Technologien es ignorieren, zum Beispiel mit leerem alt und ohne title-Attribut, oder per CSS eingebunden werden.

Welcher Alternativtext gehört zu einem Diagramm oder komplexen Bild?

Eine kurze Alternative, die das Diagramm benennt, ergänzt durch eine Langbeschreibung, die den Diagrammtyp nennt und Daten, Trends und Folgerungen vergleichbar mit dem Diagramm zusammenfasst – an anderer Stelle der Seite oder an einem Ort, der über einen Link direkt neben dem Bild erreichbar ist. Stellen Sie die Daten wo möglich in einer Tabelle bereit.

Kann der Dateiname als Alternativtext dienen?

Nein. Einen Dateinamen oder Platzhaltertext als Alternative zu verwenden, ist ein dokumentierter Fehlschlag des Kriteriums 1.1.1 (F30), ebenso ein alt wie „image“ oder „spacer“ bei einem Bild, das ignoriert werden soll (F39).

Weiterlesen bei Conformly

Quellen

Dieser Artikel stützt sich auf die am Seitenende genannten offiziellen Quellen.