Ein Alt-Text ist die Textbeschreibung eines Bildes, die im Quelltext steht und normalerweise unsichtbar bleibt. Screenreader lesen ihn blinden und sehbehinderten Menschen vor. Er erscheint, wenn ein Bild nicht geladen werden kann. Und Suchmaschinen nutzen ihn, um zu verstehen, was das Bild zeigt.
Fast jedes Redaktionssystem hat dafür ein eigenes Feld. Trotzdem bleibt es oft leer oder wird mit dem Dateinamen gefüllt. Dabei ist ein guter Alt-Text in einer halben Minute geschrieben, wenn man weiß, worauf es ankommt.
Die wichtigste Frage
Bevor Sie einen Alt-Text schreiben, fragen Sie sich: Was soll dieses Bild an dieser Stelle vermitteln? Stellen Sie sich vor, Sie lesen jemandem die Seite am Telefon vor. Was würden Sie über das Bild sagen, damit die Person nichts Wichtiges verpasst?
Dieselbe Aufnahme kann je nach Zusammenhang einen anderen Alt-Text brauchen. Ein Foto Ihres Teams auf der Über-uns-Seite beschreibt die Menschen. Dasselbe Foto in einem Artikel über das neue Büro beschreibt eher die Räume.
Beispiele aus dem Alltag
Produktbild im Shop
- Schwach: „Schuh“
- Besser: „Wanderschuh in Dunkelgrün mit brauner Sohle, seitliche Ansicht“
Im Shop ist das Bild ein Teil der Produktinformation. Farbe, Material und Ansicht sind für die Kaufentscheidung relevant.
Foto auf einer Leistungsseite
- Schwach: „Badezimmer Sanierung Bochum Fliesen modern günstig“
- Besser: „Saniertes Badezimmer mit bodengleicher Dusche und großformatigen grauen Fliesen“
Das erste Beispiel ist eine Sammlung von Suchbegriffen und für Screenreader-Nutzer ärgerlich. Das zweite beschreibt, was zu sehen ist, und enthält trotzdem die relevanten Begriffe.
Bild mit Text darin
Enthält ein Bild Text, etwa ein Banner mit einer Aktion, gehört dieser Text in den Alt-Text. Sonst erfahren Screenreader-Nutzer nie, dass es zum Beispiel einen Rabatt gibt. Besser ist es ohnehin, wichtige Texte nicht als Bild, sondern als echten Text auf die Seite zu bringen.
Logo
Bei einem Logo genügt in der Regel der Name des Unternehmens. Ist das Logo gleichzeitig ein Link zur Startseite, beschreibt der Alt-Text das Ziel, also etwa „Startseite Firmenname“.
Bild als Link oder Knopf
Ist ein Bild verlinkt und steht kein weiterer Text daneben, beschreibt der Alt-Text, was beim Klick passiert. Ein Lupen-Symbol im Suchfeld bekommt also „Suchen“, nicht „Lupe“.
Dekorative Bilder
Nicht jedes Bild trägt Information. Hintergrundmuster, Trennlinien, Stimmungsbilder ohne Bezug zum Inhalt oder Symbole neben einem Text, der bereits alles sagt, sind dekorativ. Diese Bilder bekommen ein leeres alt-Attribut: alt="". Der Screenreader überspringt sie dann.
Wichtig ist der Unterschied zwischen leerem und fehlendem Attribut. Fehlt es ganz, lesen manche Programme den Dateinamen vor. „IMG unterstrich 4711 Punkt JPG“ hilft niemandem.
Diagramme und komplexe Grafiken
Ein Diagramm lässt sich nicht in einem kurzen Alt-Text erklären. Hier hilft eine zweistufige Lösung: Der Alt-Text nennt kurz, was das Diagramm zeigt, etwa „Balkendiagramm der Anfragen pro Monat im Jahr 2025“. Die wichtigsten Aussagen stehen dann im Fließtext daneben oder in einer Tabelle unter dem Diagramm. Davon profitieren übrigens alle Leser, nicht nur Screenreader-Nutzer.
Häufige Fehler
- „Bild von …“ oder „Foto von …“ am Anfang. Screenreader kündigen ohnehin an, dass ein Bild folgt.
- Der Dateiname als Alt-Text. Häufig bei automatischen Uploads.
- Derselbe Alt-Text für alle Bilder einer Galerie. Jedes Bild zeigt etwas anderes.
- Wiederholung der Bildunterschrift. Steht direkt darunter schon eine Beschreibung, muss der Alt-Text sie nicht wiederholen. Er kann ergänzen, was die Unterschrift nicht sagt.
- Suchbegriffe statt Beschreibung. Das hilft niemandem und kann von Suchmaschinen sogar als Manipulationsversuch gewertet werden.
- Zu viel Interpretation. „Glückliche Kundin“ ist eine Deutung. „Frau lächelt beim Blick in den Spiegel nach dem Haarschnitt“ beschreibt, was zu sehen ist.
Was Google dazu sagt
Google empfiehlt in seinen Hinweisen zu Bildern aussagekräftige Alt-Texte, die den Inhalt des Bildes beschreiben und zum Zusammenhang der Seite passen. Ausdrücklich abgeraten wird davon, Alt-Texte mit Suchbegriffen vollzustopfen. Die Empfehlungen für Barrierefreiheit und für Suchmaschinen weisen hier also in dieselbe Richtung.
Dateinamen und Bildunterschriften
Neben dem Alt-Text helfen zwei weitere Angaben, ein Bild einzuordnen. Der Dateiname sollte beschreiben, was zu sehen ist, etwa badezimmer-bodengleiche-dusche.jpg statt IMG_4711.jpg. Das hilft Suchmaschinen ein wenig und erleichtert Ihnen selbst die Verwaltung der Mediathek.
Die Bildunterschrift ist für alle sichtbar und wird erstaunlich oft gelesen. Sie eignet sich für Informationen, die über die reine Beschreibung hinausgehen: wo ein Foto entstanden ist, welches Projekt es zeigt oder was die Grafik aussagt. Alt-Text und Bildunterschrift ergänzen sich, statt sich zu wiederholen.
Alt-Texte in der Praxis
Damit Alt-Texte nicht vergessen werden, sollten sie Teil des normalen Ablaufs sein. Drei einfache Regeln helfen:
- Beim Hochladen schreiben. Wer das Bild auswählt, weiß am besten, warum es dort steht.
- Bestehende Bilder nachziehen. Beginnen Sie mit den wichtigsten Seiten: Startseite, Leistungen, Produktseiten.
- Stichproben machen. Viele Browser und Prüfwerkzeuge zeigen fehlende Alt-Texte an. Einmal im Quartal einen Blick darauf zu werfen, reicht oft.
KI-Werkzeuge können erste Vorschläge für Alt-Texte machen. Prüfen Sie diese aber immer. Eine KI weiß nicht, warum Sie gerade dieses Bild an diese Stelle gesetzt haben. Für KI-Texte auf der Firmenwebsite gilt dasselbe Prinzip.
Gute Alt-Texte sind ein kleiner, aber wichtiger Baustein einer barrierefreien Website. Für Onlineshops, die unter das Barrierefreiheitsstärkungsgesetz fallen, gehören Textalternativen für Bilder zu den Anforderungen. Wir achten bei jedem Projekt darauf und überprüfen bestehende Websites auf Wunsch. Mehr dazu unter Webdesign. Wie Bilder und Texte zusammen bei Google wirken, beschreiben wir unter SEO und KI-Sichtbarkeit.