Ein Alt-Tag (korrekt: Alt-Attribut) ist eine Textbeschreibung, die du im HTML-Code eines Bildes hinterlegst. Er sorgt dafür, dass Screenreader blinden und sehbehinderten Personen erklären können, was auf einem Bild zu sehen ist, und dass Suchmaschinen wie Google den Bildinhalt verstehen. Fehlt das Bild, etwa weil die Datei nicht lädt, zeigt der Browser stattdessen diesen Text an.
Wie der Alt-Tag aufgebaut ist
Technisch gesehen ist der Alt-Tag kein eigenständiges HTML-Element, sondern ein Attribut innerhalb des <img>-Tags. Ein Beispiel: <img src="/beispiel-seite.at/bilder/hund.jpg" alt="Brauner Labrador spielt im Park mit einem Ball">. Der Text nach alt= beschreibt, was im Bild passiert. Steht dort nichts – also alt="" – nennt man das einen leeren Alt-Text. Das ist übrigens kein Fehler, sondern eine bewusste Entscheidung für rein dekorative Bilder, die keine inhaltliche Bedeutung tragen, etwa ein Rahmen oder ein Trennstrich. Fehlt das Attribut hingegen komplett, liest ein Screenreader oft nur den Dateinamen vor, zum Beispiel „IMG unterstrich 4523 Punkt jpg“. Das bringt niemandem etwas.
Wichtig ist der Unterschied zum Title-Attribut: Der Titel-Text erscheint als kleine Sprechblase, wenn du mit der Maus über ein Bild fährst. Der Alt-Text hingegen wird von Screenreadern vorgelesen und springt als Ersatzbild ein. Beide erfüllen also unterschiedliche Aufgaben und sollten nicht wortident sein.
Geschichte des Alt-Attributs
Die Idee entstand bereits 1993: Der Programmierer Marc Andreessen, damals Entwickler des Browsers Mosaic, schlug in einer E-Mail an die frühe Web-Community die Einführung des <img>-Tags vor, um Bilder erstmals direkt in Webseiten einzubetten. Schon in dieser Diskussion tauchte die Überlegung auf, wie Nutzer ohne Bilddarstellung trotzdem erfahren können, was gemeint ist. Offiziell festgeschrieben wurde das Alt-Attribut dann mit der HTML-2.0-Spezifikation, die das World Wide Web Consortium (W3C) am 24. November 1995 als RFC 1866 veröffentlichte. Damals war der Alt-Text noch optional. Erst mit HTML 4.01 im Jahr 1999 wurde er für das <img>-Element zur Pflichtangabe – wer ihn ausließ, produzierte ungültigen Code. Mit HTML5 ab den 2010er-Jahren wurde diese Pflicht wieder etwas gelockert: Das Attribut gilt weiterhin als Standard, ein Fehlen ist aber unter bestimmten Bedingungen zulässig, etwa wenn ein Bild rein dekorativ ist.
Bedeutung für Barrierefreiheit
Der Alt-Text ist ein zentraler Baustein der Web Accessibility (Barrierefreiheit im Netz). Die Web Content Accessibility Guidelines (WCAG) des W3C fordern in ihrem Erfolgskriterium 1.1.1 ausdrücklich, dass jedes bedeutungstragende Bild eine Textalternative besitzt. Nutzt jemand einen Screenreader wie JAWS oder VoiceOver, liest die Software den Alt-Text laut vor, sobald sie beim Bild ankommt. Ein guter Alt-Text beschreibt daher genau das, was ein sehender Mensch auf einen Blick erfasst – knapp, konkret und im Zusammenhang mit dem umgebenden Inhalt. Floskeln wie „Bild von“ oder „Foto von“ am Anfang sind überflüssig, weil Screenreader ohnehin ankündigen, dass ein Bild folgt.
Bedeutung für SEO
Auch für Suchmaschinen ist der Alt-Text wichtig, weil Google Bildinhalte bis heute nicht wie ein Mensch „sehen“ kann. Laut Googles offizieller Dokumentation zu Image SEO nutzt Google den Alt-Text zusammen mit Bilderkennungs-Algorithmen (Computer Vision) und dem restlichen Seiteninhalt, um zu verstehen, worum es in einem Bild geht. Verwendest du ein Bild zusätzlich als Link, dient der Alt-Text sogar als Ersatz für den Linktext. Google rät ausdrücklich davon ab, Alt-Texte mit Keywords vollzustopfen, weil das als Spam gewertet werden kann und für Nutzer keinen Mehrwert bringt. Sinnvoller ist es, das Bild natürlich und informativ zu beschreiben und dabei relevante Suchbegriffe dort einzubauen, wo sie inhaltlich passen. Ein durchdachter Alt-Text kann so dazu beitragen, dass ein Bild in der Google Bildersuche oder in Google Discover gefunden wird.
Praxisbeispiel
Stell dir vor, auf deiner Website steht ein Foto eines Installateurs bei der Reparatur einer Heizung. Ein schlechter Alt-Text wäre schlicht „Bild1″ oder „Installateur“. Besser ist eine konkrete Beschreibung wie „Installateur repariert eine Gastherme in einem Einfamilienhaus“. Damit weißt sowohl ein Screenreader-Nutzer als auch Google sofort, was auf dem Bild passiert und in welchem Zusammenhang es steht.
Häufige Fragen
Was ist der Unterschied zwischen Alt-Tag und Title-Attribut?
Der Alt-Text beschreibt den Bildinhalt und wird von Screenreadern vorgelesen, wenn ein Bild nicht angezeigt werden kann. Das Title-Attribut erscheint dagegen als kleine Sprechblase beim Darüberfahren mit der Maus und hat mit Barrierefreiheit nichts zu tun.
Ist der Alt-Tag Pflicht?
Seit HTML 4.01 aus dem Jahr 1999 gilt das Alt-Attribut beim <img>-Tag als verpflichtend. Bei rein dekorativen Bildern ohne inhaltliche Bedeutung ist ein leerer Alt-Text (alt=““) jedoch zulässig.
Wie lang sollte ein Alt-Text sein?
Ein guter Alt-Text ist knapp und konkret und beschreibt das Bild im jeweiligen Kontext. Er sollte informativ sein, ohne unnötig lange Sätze oder aneinandergereihte Keywords zu enthalten.
