Alternativtext (Alt-Text)

Der Alt-Text (alternative Text) ist eine kurze, präzise und aussagekräftige Textbeschreibung, die Bilder und visuelle Inhalte auf Webseiten beschreibt. Er dient vor allem Nutzer:innen mit Sehbehinderungen, die Screenreader verwenden, um Inhalte und Kontext der Webseite vollständig erfassen zu können.

Alt-Texte sind ein zentraler Bestandteil barrierefreier Webgestaltung und zugleich ein relevanter Faktor für Suchmaschinenoptimierung (SEO). Denn Suchmaschinen wie Google können Bildinhalte ohne Alt-Text nicht vollständig erfassen. Alt-Texte helfen Suchmaschinen somit, Inhalte zu indexieren, zu verstehen und in den Bildersuchergebnissen sichtbar zu machen.

Warum ist der Alt-Text so wichtig?

Alt-Texte erfüllen drei wesentliche Funktionen:

Barrierefreiheit:
Nutzer:innen mit Sehbehinderungen oder blinde Nutzer:innen, die Screenreader verwenden, können durch Alt-Texte erfahren, welche Inhalte durch ein Bild dargestellt werden. Ohne Alt-Texte bleiben Bilder für diese Nutzergruppe unsichtbar und unverständlich.
SEO-Vorteile:
Suchmaschinen nutzen Alt-Texte, um den Inhalt und die Relevanz eines Bildes zu verstehen. Aussagekräftige Alt-Texte verbessern daher die Auffindbarkeit von Bildern in der Google-Bildersuche und unterstützen das allgemeine Ranking der Webseite.
Ausfallsicherheit:
Sollte ein Bild einmal nicht geladen werden können (z. B. aufgrund technischer Fehler oder langsamer Internetverbindung), bietet der Alt-Text eine sinnvolle, textliche Alternative.

Wie sieht ein guter Alt-Text aus?

Ein guter Alt-Text ist klar, kurz, prägnant und beschreibt möglichst genau und anschaulich, was auf dem jeweiligen Bild dargestellt wird. Einige Best Practices für aussagekräftige Alt-Texte:

Präzise Beschreibung:
Alt-Texte sollten genau das vermitteln, was auf dem Bild zu sehen ist. Sie sollten nicht zu allgemein, aber auch nicht unnötig detailliert sein.
Länge beachten:
Idealerweise umfasst ein Alt-Text nicht mehr als etwa 100–125 Zeichen. So ist gewährleistet, dass Nutzer:innen über Screenreader nicht mit zu langen Beschreibungen überfordert werden.
Keyword sinnvoll integrieren:
Falls relevant, können wichtige Keywords im Alt-Text eingebunden werden. Diese Integration sollte aber natürlich und nicht zu erzwungen wirken.
Keine unnötigen Informationen:
Verzichte auf überflüssige Phrasen wie „Bild von…“ oder „Foto zeigt…“, da Screenreader solche Angaben automatisch ergänzen.

Beispiele für gute und schlechte Alt-Texte:

Beispielbild: Ein lächelnder Mann, der an einem Schreibtisch sitzt und auf einem Laptop arbeitet.

Schlechter Alt-Text:
„Mann am Laptop“ (zu allgemein, wenig aussagekräftig)
Guter Alt-Text:
„Lächelnder Mann arbeitet konzentriert an einem Laptop im Büro“ (klar, detailliert und kontextbezogen)

Wann sollte ein Alt-Text leer bleiben?

Ein Alt-Text kann und sollte leer (alt="") bleiben, wenn das Bild rein dekorativen Zwecken dient und keinerlei relevante Informationen transportiert. Screenreader ignorieren dekorative Bilder mit leerem Alt-Text, was Nutzer:innen eine bessere Orientierung bietet und sie nicht mit unwichtigen Informationen belastet.

Typische Fehler bei Alt-Texten:

Obwohl die Bedeutung von Alt-Texten allgemein anerkannt ist, gibt es häufige Fehler, die du vermeiden solltest:

Fehlender Alt-Text:
Das völlige Fehlen eines Alt-Texts macht Bilder für Nutzer:innen assistiver Technologien unzugänglich und erschwert Suchmaschinen das Verständnis der Inhalte.
Keyword-Stuffing:
Alt-Texte sollten nicht künstlich mit Keywords vollgestopft werden. Dies verschlechtert die Nutzererfahrung und kann von Suchmaschinen sogar negativ bewertet werden.
Zu allgemeine oder irrelevante Beschreibungen:
Alt-Texte, die nicht präzise oder aussagekräftig genug sind, bieten Nutzer:innen keine Hilfe und sind für SEO ineffektiv.

Empfehlungen zur optimalen Nutzung von Alt-Texten:

Um optimale Alt-Texte zu erstellen und einzusetzen, beachte folgende Empfehlungen:

Kontext beachten:
Formuliere den Alt-Text immer mit Bezug zum Kontext, in dem das Bild eingebunden ist. Der Alt-Text sollte die Aussage oder Botschaft der jeweiligen Webseite widerspiegeln.
Regelmäßige Überprüfung:
Führe regelmäßige Accessibility-Audits durch, um sicherzustellen, dass alle relevanten Bilder über sinnvolle und korrekte Alt-Texte verfügen.
Schulung von Redakteur:innen und Content-Manager:innen:
Sensibilisiere dein Team dafür, aussagekräftige Alt-Texte stets mitzudenken und bei der Content-Erstellung konsequent umzusetzen.