Was ist das Alt-Attribut?

Alt ist ein Attribut des <img>-Elements in HTML, seit den ersten Versionen der Spezifikation vorhanden. Seine Aufgabe ist es, eine textliche Alternative zum visuellen Inhalt zu liefern: Wo das Bild nicht wahrgenommen werden kann, tritt der Alt-Text an seine Stelle. Zusammen mit dem src-Attribut gehört es zu den wenigen Attributen, die in barrierefreiem Markup nicht fehlen dürfen.

In modernen Frameworks und Content-Management-Systemen wird das Attribut oft automatisch aus dem Dateinamen befüllt, wenn niemand es von Hand setzt, was selten eine brauchbare Beschreibung ergibt. Es wird zudem oft mit zwei anderen, ähnlich klingenden Elementen verwechselt, die aber andere Aufgaben haben. Das title-Attribut zeigt einen Tooltip beim Überfahren mit der Maus, gedacht für Maus-Nutzer, nicht für Screenreader, die es standardmäßig gar nicht vorlesen. Das figcaption-Element ist eine sichtbare Bildunterschrift innerhalb einer figure, gedacht für alle Besucher, nicht nur für jene, die das Bild nicht sehen können.

Die Pflicht zu einem Alternativtext ist keine lose Empfehlung: Sie steht im Erfolgskriterium 1.1.1 („Nicht-Text-Inhalt") der WCAG-Richtlinien des W3C, der Grundlage der meisten Barrierefreiheits-Vorgaben im Web.

Der teuerste Fehler in der Praxis ist, title als Ersatz für alt zu verwenden: Da die meisten Screenreader es ignorieren, bleibt ein Bild mit nur title und ohne alt weiterhin unsichtbar für alle, die auf diesen Text angewiesen sind.

Erreicht ein Screenreader ein Bild, liest er den Inhalt des Alt-Attributs laut vor. Ist das Attribut vorhanden, aber leer (alt=""), überspringt der Screenreader das Bild, ohne es anzukündigen, das korrekte Verhalten bei rein dekorativen Elementen. Fehlt das Attribut dagegen komplett, anders als leer zu sein, greifen manche Screenreader stattdessen auf den Dateinamen zurück, und „IMG_047382 Punkt jpg" vorzulesen ist schlechter, als gar nichts zu sagen.

<!-- Informatives Bild: beschreibender Alt-Text -->
<img src="/images/glosario-json-ld-diagramm.webp" alt="Aufbau eines JSON-LD-Blocks mit @context und @type">

<!-- Fehler: Alt-Attribut komplett weggelassen -->
<img src="/images/glosario-json-ld-diagramm.webp">

<!-- Dekoratives Bild: bewusst leerer Alt-Text -->
<img src="/images/trennlinie-dekorativ.webp" alt="">

Google nutzt den Alt-Text zusammen mit eigenen Bilderkennungs-Algorithmen und dem Seiteninhalt, um zu verstehen, worum es in einem Bild geht. Dieser Text zählt vor allem in den Ergebnissen der Google Bildersuche, nicht als allgemeiner Rankingfaktor der Seite. Fungiert das Bild zusätzlich als Link, dient der Alt-Text als Ankertext für diesen Link, mit demselben Gewicht wie ein normaler Textlink. Fehlt der Alt-Text bei einem solchen Bild-Link ganz, hat Google keinerlei Anhaltspunkt dafür, wohin der Link inhaltlich führt.

Was hineingehört, hängt vom Bildtyp ab. Bei einem informativen Bild beschreibt der Text, was es zum Kontext der Seite beiträgt, nicht jedes visuelle Detail. Bei einem funktionalen Bild, etwa einem Such-Icon in einem Button, beschreibt der Text die Aktion, nicht die Grafik. Bei einem dekorativen Bild bleibt das Attribut bewusst leer, niemals ganz weg.

Der Hauptgrund ist Barrierefreiheit: Ohne passenden Alt-Text hat jemand, der einen Screenreader nutzt, keine andere Möglichkeit zu erfahren, was das Bild zeigt. Genau das entscheidet, ob die Seite nutzbar ist oder nicht. In vielen Sektoren, etwa bei öffentlichen Stellen oder größeren Unternehmen, ist barrierefreies Markup inzwischen zudem eine rechtliche Vorgabe, keine freiwillige Zusatzleistung.

Es gibt auch einen Ranking-Grund, begrenzter als oft angenommen. Alt-Text hilft Google, ein Bild richtig einzuordnen und zu entscheiden, ob es in der Bildersuche erscheint. Werden dort aber wahllos Keywords hineingepackt, kehrt sich der Effekt um: Google wertet das als Spam-Signal, und die Seite verliert eher Vertrauen, als Sichtbarkeit zu gewinnen.

Und es gibt ein Vertrauensrisiko im Text selbst: Ein schlecht geschriebener Alt-Text fällt genau denen auf, die auf ihn angewiesen sind. Wer statt einer Beschreibung einen Dateinamen vorgelesen bekommt, merkt sofort, dass die Seite nicht für ihn gedacht war, und das prägt den Gesamteindruck der ganzen Marke.

• Beschreibe, was das Bild zum Kontext dieser konkreten Seite beiträgt, nicht eine Liste dessen, was rein optisch zu sehen ist.
• Lass alt="" bei rein dekorativen Bildern bewusst leer, aber vorhanden; lass das Attribut nie ganz weg.
• Ist das Bild ein Link oder Button, beschreibe das Ziel oder die Aktion, nicht das Aussehen des Icons.
• Halte den Text knapp, etwa 80 bis 140 Zeichen; genug, um nützlich zu sein, ohne wen zu ermüden, der ihn per Screenreader hört.
• Wiederhole nicht dasselbe Keyword in mehreren unterschiedlichen Bildern derselben Seite.
• Dopple nicht, was eine sichtbare Bildunterschrift daneben schon sagt; beide Texte haben unterschiedliche Aufgaben.

• Das Alt-Attribut komplett weglassen, statt es bei dekorativen Bildern bewusst leer zu lassen.
• Den Alt-Text mit einer Keyword-Liste statt einem sinnvollen Satz füllen.
• Mit „Bild von" oder „Foto von" beginnen: Der Screenreader kündigt ohnehin schon an, dass es sich um ein Bild handelt.
• Das title-Attribut als Ersatz für alt nutzen, ohne zu wissen, dass die meisten Screenreader es nicht vorlesen.
• Denselben generischen Alt-Text bei Dutzenden Produktbildern kopieren, die sich in Wirklichkeit unterscheiden.