Ein Alternativtext beschreibt ein Bild für Menschen, die es nicht sehen können. Screenreader lesen ihn vor, Browser zeigen ihn an, wenn das Bild nicht lädt, und Suchmaschinen und KI-Assistenten nutzen ihn, um den Inhalt eines Bildes zu verstehen. Ein guter Alternativtext vermittelt, was das Bild an genau dieser Stelle aussagt. Wie das gelingt, zeigen wir mit Beispielen und einer einfachen Entscheidungshilfe.
Die Grundregel: Welche Aufgabe hat das Bild?
Derselbe Gegenstand kann je nach Zusammenhang einen ganz anderen Alternativtext brauchen. Ein Foto eines roten Sofas heißt im Onlineshop vielleicht „Dreisitzer-Sofa Lena in Rot, Samtbezug, mit schwarzen Holzfüßen“. Im Blogartikel über Farbtrends genügt „Rotes Samtsofa vor grüner Wand“. Fragen Sie sich deshalb immer: Was würde ich am Telefon sagen, wenn ich jemandem dieses Bild an dieser Stelle beschreiben müsste?
Entscheidungshilfe in fünf Fällen
| Art des Bildes | Was in den Alternativtext gehört | Beispiel |
|---|---|---|
| Informatives Bild: Foto, Illustration mit Aussage | Die Information, die das Bild an dieser Stelle vermittelt, in ein bis zwei kurzen Sätzen | „Team der Kanzlei vor dem Bürogebäude in der Friedrichstraße“ |
| Dekoratives Bild: Hintergrundmuster, Stimmungsbild ohne Aussage, Bild wiederholt den Text daneben | Nichts. Der Alternativtext bleibt leer, damit der Screenreader das Bild überspringt. | alt="" |
| Funktionales Bild: Bild als Link oder Schaltfläche, Symbol ohne Text | Was beim Klick passiert, nicht wie das Bild aussieht | Lupe: „Suchen“; Logo im Kopfbereich: „Startseite Firmenname“ |
| Bild mit Text: Grafik mit Schriftzug, Zitat, Werbebanner | Den Text aus dem Bild, wörtlich | „Herbstaktion: 20 % auf alle Gartenmöbel bis 30. November“ |
| Komplexes Bild: Diagramm, Infografik, Karte | Kurz, was es zeigt und die Kernaussage. Die vollständigen Daten zusätzlich im Text oder als Tabelle. | „Balkendiagramm der Bestellungen pro Quartal 2025, mit dem höchsten Wert im vierten Quartal. Die Zahlen stehen in der Tabelle unten.“ |
Gute und schlechte Alternativtexte im Vergleich
| Schlecht | Besser | Warum |
|---|---|---|
| „IMG_4711.jpg“ | „Monteur befestigt eine Rampe am Eingang eines Cafés“ | Dateinamen haben für Nutzende keine Bedeutung. |
| „Bild von einer Frau am Laptop“ | „Frau am Laptop vergrößert eine Website mit der Zoomfunktion“ | „Bild von“ sagt der Screenreader ohnehin an. Das Detail, auf das es ankommt, fehlte. |
| „Barrierefreie Website Berlin barrierefreies Webdesign WCAG BFSG“ | „Prüferin testet ein Formular mit der Tastatur“ | Suchbegriffe aneinanderzureihen hilft niemandem und gilt bei Suchmaschinen als Spam. |
| „Facebook-Logo“ (als Link) | „Facebook-Seite der Firma“ | Bei Links zählt das Ziel, nicht das Aussehen. |
| Ausführliche Beschreibung eines Hintergrundbildes | alt="" | Dekorative Bilder lenken nur ab, wenn sie vorgelesen werden. |
Sieben Regeln für gute Alternativtexte
- Kontext vor Vollständigkeit: Beschreiben Sie, was an dieser Stelle wichtig ist, nicht jedes Detail.
- Kurz halten: Meist reichen ein bis zwei Sätze. Längere Beschreibungen gehören in den sichtbaren Text oder eine Bildunterschrift.
- Kein „Bild von“ oder „Foto von“: Der Screenreader sagt bereits an, dass es sich um ein Bild handelt. Sinnvoll ist eine Angabe nur, wenn die Bildart selbst eine Information ist, etwa „Gemälde“ oder „Röntgenaufnahme“.
- Nicht doppeln: Steht dieselbe Information schon in der Bildunterschrift oder im Text daneben, ist das Bild dekorativ und bekommt einen leeren Alternativtext.
- Text im Bild abschreiben: Was als Schrift im Bild steht, muss auch im Alternativtext stehen. Besser noch: Text gar nicht erst als Bild einbinden.
- Satzzeichen nutzen: Ein Punkt am Ende sorgt für eine kurze Pause beim Vorlesen und macht das Zuhören angenehmer.
- Keine Suchbegriffe stopfen: Ein treffender Alternativtext enthält die passenden Begriffe von allein.
Alternativtexte in WordPress
Im Block-Editor wählen Sie das Bild aus und tragen den Text in der Seitenleiste unter „Alternativer Text“ ein. Für ein dekoratives Bild lassen Sie das Feld leer. Zwei Besonderheiten sollten Sie kennen:
- Mediathek und Beitrag sind getrennt: Der Alternativtext aus der Mediathek wird beim Einfügen in den Beitrag kopiert. Ändern Sie ihn später in der Mediathek, bleibt er in bereits veröffentlichten Beiträgen unverändert. Korrigieren Sie ihn deshalb im jeweiligen Bild-Block.
- Beitragsbilder: Für das Beitragsbild verwendet WordPress den Alternativtext aus der Mediathek. Pflegen Sie ihn dort, bevor Sie das Bild als Beitragsbild festlegen.
Und automatisch erzeugte Alternativtexte?
Werkzeuge mit künstlicher Intelligenz beschreiben Bilder inzwischen erstaunlich gut. Sie wissen aber nicht, warum ein Bild an einer bestimmten Stelle steht und welche Information es dort vermitteln soll. Als Vorschlag, den eine Person prüft und anpasst, sind sie eine echte Hilfe, zum Beispiel wenn Hunderte Produktbilder ohne Alternativtext nachgepflegt werden müssen. Ungeprüft übernommen entstehen dagegen genau die ungenauen Beschreibungen, die wir auch bei Barrierefreiheits-Overlays beobachten.
Häufige Fragen zu Alternativtexten
Wie lang darf ein Alternativtext sein?
Eine feste Grenze gibt es in den WCAG nicht. Bewährt haben sich ein bis zwei kurze Sätze. Manche Screenreader lassen sich in langen Alternativtexten nicht vor- und zurückbewegen, deshalb gehören ausführliche Beschreibungen besser in den sichtbaren Text.
Was ist der Unterschied zwischen Alternativtext und Bildtitel?
Der Alternativtext (alt-Attribut) ersetzt das Bild für Menschen, die es nicht sehen. Der Titel (title-Attribut) erscheint als Tooltip, wenn man mit der Maus über das Bild fährt, und wird von Screenreadern nicht zuverlässig vorgelesen. Für Barrierefreiheit zählt nur der Alternativtext.
Helfen Alternativtexte auch bei Google und KI-Suchen?
Ja. Google nutzt Alternativtexte, um Bilder zu verstehen und in der Bildersuche einzuordnen, und empfiehlt beschreibende Texte im Zusammenhang der Seite. Auch KI-Assistenten werten den Text einer Seite aus und erfassen über Alternativtexte, was auf Bildern zu sehen ist. Ein Text, der für Menschen gut ist, ist es auch für Maschinen.
Braucht jedes Bild einen Alternativtext?
Jedes Bild braucht ein alt-Attribut, aber nicht jedes einen Inhalt darin. Dekorative Bilder bekommen ein leeres Attribut (alt=""), damit Screenreader sie überspringen. Fehlt das Attribut ganz, lesen manche Screenreader stattdessen den Dateinamen vor.
Quellen
- W3C Web Accessibility Initiative: An alt Decision Tree (englisch)
- W3C: Understanding Success Criterion 1.1.1: Non-text Content (englisch)
- Google Search Central: Best Practices für Bilder
Viele Bilder ohne Alternativtext? Wir prüfen Ihre Website, zeigen, wo Alternativtexte fehlen oder nicht passen, und schulen Ihre Redaktion. Fehlende Alternativtexte und andere Barrieren beheben wir auf Wunsch direkt in Ihrer Website. Sprechen Sie uns an.