Was ist ein Alt-Text bei Bildern?

Der Alt-Text bei Bildern ist eine kurze Beschreibung, die Sie zum Bild hinterlegen. Sie steht nicht sichtbar im Bild selbst, sondern im sogenannten Alt-Attribut des HTML-Codes. Der Browser zeigt diesen Text immer dann, wenn das Bild nicht geladen werden kann, und Vorleseprogramme für blinde Menschen lesen ihn laut vor. So weiß jeder, was auf dem Bild zu sehen ist, auch ohne es selbst zu betrachten. Der Begriff Alt steht dabei für "alternativ", weil der Text als Ersatz für das Bild dient.

Was ist ein Alt-Text bei Bildern?: Foto mit Sprechblase und Schallwellen, Person mit Kopfhoerern, Barrierefreiheits-Icon

Wozu ein Alt-Text bei Bildern gut ist

Der Alt-Text erfüllt gleich mehrere Aufgaben, ohne dass ein Besucher davon etwas merkt. Er ist die Brücke zwischen einem Foto und allen, die es aus irgendeinem Grund nicht sehen können.

Menschen mit Sehbehinderung erfahren über die Sprachausgabe, was abgebildet ist.
Lädt ein Bild wegen einer langsamen Verbindung nicht, erscheint der Text an seiner Stelle.
Suchmaschinen verstehen über den Alt-Text, worum es bei dem Bild geht, da sie das Foto selbst nicht deuten können.
In einer Bildergalerie hilft eine saubere Beschreibung, dass einzelne Bilder über die Suche gefunden werden.
Fährt jemand mit der Maus über ein Bild, kann der hinterlegte Text in manchen Fällen als Hinweis erscheinen.

So formulieren Sie den Alt-Text bei Bildern

Beschreiben Sie schlicht, was auf dem Bild passiert, als würden Sie es jemandem am Telefon schildern. Bleiben Sie kurz, meist genügen fünf bis fünfzehn Wörter. Nennen Sie das Wesentliche und lassen Sie Nebensächliches weg. Wer zu lange Texte schreibt, ermüdet die Zuhörer der Sprachausgabe unnötig.

Vermeiden Sie Einleitungen wie "Bild von" oder "Foto zeigt", denn dass es sich um ein Bild handelt, ist bereits klar. Wiederholen Sie auch keine Stichwörter sinnlos, nur um bei Suchmaschinen besser dazustehen. Eine ehrliche Beschreibung wirkt besser als eine künstlich vollgestopfte. Achten Sie außerdem darauf, dass der Text wirklich zum Bild passt und nicht aus einer Vorlage stammt, die für ein anderes Foto gedacht war.

Beispiele aus der Praxis

An konkreten Fällen wird schnell deutlich, was funktioniert und was nicht. Die folgende Tabelle stellt schwache und gute Formulierungen gegenüber, damit Sie ein Gefühl für den richtigen Ton bekommen.

Bildinhalt	Schwacher Alt-Text	Guter Alt-Text
Roter Sportwagen vor einer Garage	auto	Roter Sportwagen vor einer offenen Garage
Hund spielt im Garten mit Ball	IMG_0421.jpg	Brauner Hund fängt einen gelben Ball im Garten
Logo der Firma im Seitenkopf	logo logo bild firma marke	Logo der Tischlerei Müller
Diagramm mit Umsatzzahlen	diagramm	Säulendiagramm der Monatsumsätze von Januar bis Juni

Wann ein Alt-Text bei Bildern entfallen darf

Nicht jedes Bild muss beschrieben werden. Rein schmückende Grafiken, die keine Information tragen, etwa eine dünne Trennlinie oder ein dekoratives Muster, kommen ohne Inhalt aus. In solchen Fällen setzt man ein leeres Alt-Attribut, also alt mit nichts dahinter. Dann überspringt das Vorleseprogramm das Bild, statt einen überflüssigen Hinweis vorzulesen. Wichtig ist nur, dass das Attribut vorhanden ist, denn fehlt es ganz, lesen manche Programme stattdessen den Dateinamen vor, und der ist selten hilfreich.

Kurze Merkhilfe

Fragen Sie sich vor jeder Beschreibung, ob das Bild etwas mitteilt oder nur hübsch aussieht. Trägt es Information, beschreiben Sie sie knapp und konkret. Ist es reine Deko, lassen Sie das Attribut leer. Mit dieser einfachen Unterscheidung treffen Sie fast immer die richtige Wahl. Pflegen Sie die Texte gleich beim Hochladen ein, dann sparen Sie sich später viel Arbeit, und Ihre Bildergalerie wird für alle Besucher zugänglicher und auch über Suchmaschinen leichter auffindbar.

Häufige Fragen

Beim Schreiben von Alt-Texten kommen schnell Fragen nach Länge, leerem Attribut und der Abgrenzung zum title-Attribut auf.

Wie lang sollte ein Alt-Text sein?

Meist genügen fünf bis fünfzehn Wörter, die das Wesentliche knapp schildern. Statt eines schwachen alt='auto' beschreibt man besser konkret, etwa <img src="..." alt="Roter Sportwagen vor einer offenen Garage">. Einleitungen wie 'Bild von' lässt man weg.

Was ist der Unterschied zwischen alt-Attribut und title-Attribut?

Das alt-Attribut ist der Ersatztext, den Screenreader vorlesen und der bei nicht geladenem Bild erscheint. Das title-Attribut zeigt sich in manchen Browsern nur als kleiner Hinweis beim Überfahren mit der Maus und ersetzt das alt-Attribut nicht.

Wann braucht ein Bild keinen Alt-Text?

Rein schmückende Grafiken ohne Information, etwa eine Trennlinie, kommen mit einem leeren Attribut aus, also alt="" ohne Inhalt. So überspringt der Screenreader das Bild. Wichtig ist nur, dass das Attribut vorhanden ist, sonst wird teils der Dateiname vorgelesen.