Alternativtexte, die etwas taugen

Ein Bild sagt mehr als tausend Worte – aber nur, wenn man es sehen kann. Für blinde und stark sehbehinderte Menschen, die Websites mit einem Screenreader nutzen, ist ein Bild ohne Beschreibung ein schwarzes Loch. Der Screenreader liest dann bestenfalls „Grafik“ vor, schlimmstenfalls einen kryptischen Dateinamen wie „IMG_4711_final_neu.jpg“. Die Lösung ist so alt wie das Web selbst: der Alternativtext, im Quelltext das alt-Attribut.

Alternativtexte gehören zu den einfachsten und zugleich wirksamsten Maßnahmen für Barrierefreiheit. Sie sind aber auch eine der häufigsten Fehlerquellen, weil sie entweder fehlen oder schlecht formuliert sind. Diese Lektion zeigt, wie gute Alternativtexte aussehen.

1. Wozu Alternativtexte dienen

Das entscheidende Wort in dieser Definition ist Zweck. Ein Alternativtext soll nicht beschreiben, was ein Bild zeigt, sondern was es an dieser Stelle leisten soll. Dasselbe Foto kann deshalb je nach Kontext unterschiedliche Alternativtexte brauchen: Auf der Team-Seite ist das Porträt eine Vorstellung der Person, als Link auf deren Profil ist es ein Wegweiser, und im Hintergrund eines Banners ist es vielleicht reine Dekoration.

2. Vier Fragen, vier Antworten

Mit vier Fragen lässt sich für fast jedes Bild der richtige Alternativtext finden. Das Muster orientiert sich an der Entscheidungshilfe, die das W3C für die WCAG veröffentlicht hat.

Abb. 2.1Entscheidungsweg für Alternativtexte

Dekorative Bilder – Ornamente, Hintergrundmuster, Trennlinien, Stimmungsbilder ohne Informationsgehalt – bekommen ein leeres alt-Attribut: alt="". Wichtig ist, dass das Attribut vorhanden, aber leer ist. Fehlt es ganz, lesen manche Screenreader den Dateinamen vor. Funktionale Bilder wie Logos als Link, Symbole in Knöpfen oder Lupen-Icons in der Suche beschreiben die Funktion: „Zur Startseite“, „Suchen“, „Warenkorb öffnen“. Bilder mit Text, etwa ein Banner mit Aktionsangebot, geben den Text wieder. Informative Bilder fassen die Kernaussage zusammen.

3. Üben Sie das Formulieren

4. Was einen guten Alternativtext ausmacht

Einige Faustregeln helfen im Alltag. Ein Alternativtext ist meist kürzer als ein Satz und selten länger als zwei. Er beginnt nicht mit „Bild von“ oder „Foto von“, denn der Screenreader kündigt das Bild ohnehin an. Er wiederholt nicht den Text, der direkt daneben steht. Und er nennt, was für das Verständnis wichtig ist – bei einem Produktfoto etwa Farbe und Variante, wenn diese sich von anderen unterscheiden.

5. Alternativtexte im Arbeitsalltag

In den meisten Content-Management-Systemen lässt sich der Alternativtext beim Hochladen eines Bildes eintragen. Das Problem: Er wird dann einmal für die Mediathek festgelegt und überall verwendet, obwohl derselbe Kontext nicht überall gilt. Bei wichtigen Bildern lohnt es sich deshalb, den Alternativtext im konkreten Beitrag zu prüfen. Außerdem gilt: Alternativtexte gehören zur Redaktion, nicht zur Technik. Wer ein Bild auswählt, weiß am besten, wozu es dient, und sollte den Text schreiben.

KI-Werkzeuge können Alternativtexte vorschlagen und sind dabei inzwischen erstaunlich gut. Sie beschreiben aber, was zu sehen ist, nicht wozu das Bild auf dieser Seite dient. Ein Vorschlag ist deshalb ein guter Anfang, ersetzt aber nicht den Blick auf den Kontext. Und bei Diagrammen und Infografiken reicht auch der beste Alternativtext oft nicht aus: Hier gehören die wichtigsten Zahlen zusätzlich in den Text oder in eine Tabelle, damit alle Nutzer an die Information kommen.

Ein positiver Nebeneffekt: Gute Alternativtexte helfen auch in der Bildersuche. Suchmaschinen können Bilder nicht so verstehen wie Menschen und stützen sich stark auf Alternativtexte und umgebenden Text. Wer seine Bilder für Screenreader beschreibt, wird deshalb oft auch bei der Bildersuche besser gefunden.

6. Sonderfälle: Grafiken, Symbole, Bildergalerien

Einige Fälle begegnen in der Praxis immer wieder und verdienen einen eigenen Blick. Symbole ohne Text, etwa ein Telefonhörer neben der Telefonnummer oder ein Brief neben der E-Mail-Adresse, sind meist dekorativ, weil der Text daneben die Information bereits trägt. Steht ein Symbol dagegen allein in einem Knopf, etwa ein Zahnrad für die Einstellungen oder ein X zum Schließen, braucht es einen zugänglichen Namen. Bei Icons, die als SVG oder Schriftart eingebunden sind, geschieht das nicht über das alt-Attribut, sondern über eine unsichtbare Beschriftung oder das Attribut aria-label. Hier sind Redaktion und Entwicklung gemeinsam gefragt.

Bildergalerien auf Referenzseiten zeigen oft zwanzig Fotos desselben Projekts. Nicht jedes braucht eine ausführliche Beschreibung, aber jedes sollte sich von den anderen unterscheiden: „Café von außen mit Terrasse“, „Theke mit Kuchenauswahl“, „Leseecke am Fenster“. Zwanzig Mal „Referenzprojekt Müller“ hilft niemandem. Porträts im Team-Bereich nennen den Namen und gegebenenfalls die Funktion, sofern diese nicht ohnehin daneben steht. Eine Beschreibung des Aussehens ist nur sinnvoll, wenn sie für den Zweck der Seite relevant ist.

Screenshots in Anleitungen sind ein Sonderfall, weil sie oft die eigentliche Information enthalten: welcher Knopf zu drücken ist, wo ein Menüpunkt liegt. Hier gehört die Anweisung in den Fließtext, der Screenshot ergänzt sie nur. Texte in Bildern schließlich sollten die Ausnahme bleiben. Ein Banner mit einem Angebot ist als echter Text über einem Hintergrundbild besser aufgehoben, weil er sich vergrößern, übersetzen und vorlesen lässt. Ist Text im Bild unvermeidbar, etwa bei einem Logo, gibt der Alternativtext ihn wieder.

Wer diese Fälle einmal durchdacht hat, braucht für einen neuen Alternativtext meist nur Sekunden. Viele Redaktionen legen dafür eine kurze interne Richtlinie mit Beispielen aus dem eigenen Bestand an, damit alle nach denselben Regeln arbeiten. Das ist besonders hilfreich, wenn mehrere Personen Inhalte pflegen oder Texte von Agenturen zugeliefert werden. Eine Stichprobe von zehn Bildern pro Quartal zeigt schnell, ob die Regeln im Alltag ankommen.

Ein Praxisbeispiel zeigt, wie schnell sich der Aufwand lohnt. Ein Handwerksbetrieb mit rund achtzig Bildern auf der Website hatte fast überall den Dateinamen als Alternativtext stehen, weil das Content-Management-System ihn automatisch übernommen hatte. Die Überarbeitung dauerte an einem Nachmittag etwa drei Stunden: dekorative Bilder bekamen ein leeres Attribut, Referenzfotos eine kurze Beschreibung des Projekts, Symbole in Knöpfen einen Namen. Danach meldete der automatische Check keine Fehler mehr in diesem Bereich, und mehrere Referenzbilder tauchten erstmals in der Bildersuche auf. Wichtig war vor allem die Regel für die Zukunft: Wer ein Bild hochlädt, schreibt den Alternativtext sofort, statt ihn auf später zu verschieben.

Stand: September 2026. Kursmaterial der Klarwerk Akademie – vermittelt Grundlagen und ersetzt keine Rechtsberatung oder vollständige Prüfung nach WCAG und EN 301 549.