Was das Alt-Attribut ist
Das Alt-Attribut ist eine Angabe im HTML-Code eines Bildes:
<img src="dachdecker-schiefer.jpg" alt="Dachdecker verlegt Schieferplatten auf einem Steildach">
Umgangssprachlich wird oft vom „Alt-Tag“ gesprochen, korrekt ist „Alt-Attribut“ oder „Alternativtext“. Er erfüllt drei Aufgaben:
- Barrierefreiheit: Screenreader lesen den Text vor, damit blinde und sehbehinderte Menschen erfahren, was das Bild zeigt.
- Ersatz: Kann ein Bild nicht geladen werden, erscheint an seiner Stelle der Alternativtext.
- Suchmaschinen: Google nutzt den Text, um den Bildinhalt zu verstehen und das Bild in der Bildersuche einzuordnen. Bei verlinkten Bildern dient er zudem als Ankertext.
Der Grundsatz
Beschreiben Sie das Bild so, wie Sie es jemandem am Telefon beschreiben würden, der wissen muss, was darauf zu sehen ist – im Zusammenhang mit der Seite, auf der es steht.
Ein und dasselbe Foto kann je nach Kontext unterschiedlich beschrieben werden. Ein Bild eines Teams vor dem Firmengebäude braucht auf der Über-uns-Seite eine andere Beschreibung als in einem Artikel über energieeffiziente Gebäude.
Länge
Es gibt keine offizielle Grenze. Screenreader lesen auch lange Texte vor, und Google verarbeitet sie. In der Praxis haben sich kurze, präzise Beschreibungen von etwa 5 bis 15 Wörtern bewährt, oft unter 125 Zeichen. Für komplexe Grafiken, die viel Information enthalten, ist ein kurzer Alt-Text plus eine ausführliche Beschreibung im umgebenden Text die bessere Lösung.
Beispiele für verschiedene Bildarten
| Bildart | Schwach | Besser |
|---|---|---|
| Projektfoto | „Bad“ | „Saniertes Badezimmer mit bodengleicher Dusche und anthrazitfarbenen Fliesen“ |
| Produktfoto | „Stuhl“ | „Gartenstuhl Teak Hamburg, natur geölt, mit Armlehnen, Seitenansicht“ |
| Teamfoto | „Team“ | „Das Team der Physiotherapiepraxis Neuwied im Behandlungsraum“ |
| Porträt | „Foto“ | „Mehmet Oruc, Gründer von SEOKönig“ |
| Diagramm | „Grafik“ | „Balkendiagramm: organische Besucher stiegen von 1.200 im Januar auf 4.800 im Dezember“ |
| Screenshot | „Screenshot“ | „Leistungsbericht der Google Search Console mit Filter nach Suchanfragen“ |
| Karte | „Karte“ | „Karte des Einsatzgebiets rund um Montabaur mit einem Radius von 30 Kilometern“ |
| Logo (verlinkt) | „Logo“ | „Dachdeckerei Müller – zur Startseite“ |
| Logo eines Partners | „logo2“ | „Logo der Handwerkskammer Koblenz“ |
| Symbol als Button | „Icon“ | „Suche öffnen“ |
| Dekoratives Muster | „Hintergrund“ | leeres Alt: alt="" |
Wann das Alt-Attribut leer sein sollte
Nicht jedes Bild braucht eine Beschreibung. Rein dekorative Elemente – Trennlinien, Hintergrundmuster, Schmuckgrafiken ohne Informationsgehalt – sollten ein leeres Alt-Attribut erhalten: alt="". Dadurch überspringen Screenreader das Bild, statt „Bild“ oder den Dateinamen vorzulesen.
Wichtig ist der Unterschied zwischen leerem und fehlendem Attribut. Fehlt das Alt-Attribut ganz, lesen manche Screenreader den Dateinamen vor. Das leere Attribut signalisiert bewusst: Dieses Bild ist nur Dekoration.
Auch Bilder, deren Inhalt bereits im Text daneben vollständig beschrieben ist, können ein leeres Alt erhalten, um Wiederholungen zu vermeiden. Ein Beispiel: ein Symbol neben dem Wort „Telefon“.
Häufige Fehler
- Keyword-Stuffing: „Dachdecker Koblenz Dachdeckerei Koblenz Dach Koblenz“ – wird als Spam gewertet und ist für Screenreader-Nutzer unbrauchbar
- „Bild von …“ oder „Foto von …“: Screenreader kündigen bereits an, dass es sich um ein Bild handelt
- Dateinamen als Alt-Text: „IMG_4711“ oder „header-final-v3“
- Derselbe Text bei allen Bildern: etwa der Firmenname bei jedem Bild der Website
- Fehlende Alt-Texte bei verlinkten Bildern: Der Link hat dann keinen verständlichen Text
- Informationen nur im Bild: Preise, Öffnungszeiten oder Angebote, die nur in einer Grafik stehen, sind für Suchmaschinen und viele Menschen unsichtbar
Keywords im Alt-Text
Ein passender Suchbegriff darf im Alternativtext vorkommen, wenn er das Bild tatsächlich beschreibt. Ein Foto einer Dachsanierung darf „Dachsanierung“ im Alt-Text haben. Entscheidend ist, dass die Beschreibung für einen Menschen sinnvoll bleibt. Google betont, dass Alternativtexte informativ und nützlich sein sollen und nicht mit Keywords überladen werden dürfen.
Alt-Text, Title-Attribut und Bildunterschrift
| Element | Zweck | Sichtbarkeit |
|---|---|---|
| Alt-Attribut | Beschreibung für Screenreader und Suchmaschinen | unsichtbar, außer bei Ladefehler |
| Title-Attribut | Zusatzinformation als Tooltip bei Mausberührung | nur bei Hover am Desktop, von Screenreadern uneinheitlich behandelt |
Bildunterschrift (figcaption) |
sichtbare Erläuterung unter dem Bild | für alle sichtbar |
Das Title-Attribut ist für SEO und Barrierefreiheit kaum relevant und kann meist entfallen. Bildunterschriften dagegen werden überdurchschnittlich oft gelesen und sind ein guter Ort für ergänzende Informationen.
Alt-Texte in großem Umfang
Bei Onlineshops oder Portalen mit Tausenden Bildern ist es kaum möglich, jeden Alt-Text von Hand zu schreiben. Hier helfen Vorlagen, die aus Produktdaten sinnvolle Texte erzeugen: „[Produktname] in [Farbe], [Ansicht]“. KI-Werkzeuge können Beschreibungen vorschlagen, die aber stichprobenartig geprüft werden sollten, weil sie gelegentlich Details erfinden oder falsch deuten.
Kurz beantwortet
Ist das Alt-Attribut ein Rankingfaktor?
Für die Bildersuche ist es einer der wichtigsten Faktoren. Für das Ranking der Seite in der normalen Suche ist die Wirkung klein, aber vorhanden, weil der Alt-Text Teil des Inhalts ist.
Braucht jedes Bild einen Alt-Text?
Jedes Bild braucht ein Alt-Attribut. Inhaltliche Bilder erhalten eine Beschreibung, dekorative ein leeres Attribut.
Ist ein fehlender Alt-Text rechtlich relevant?
Für viele Unternehmen, die Produkte oder Dienstleistungen online an Verbraucher anbieten, gelten seit Juni 2025 die Anforderungen des Barrierefreiheitsstärkungsgesetzes. Alternativtexte gehören zu den grundlegenden Anforderungen barrierefreier Websites. Kleinstunternehmen, die Dienstleistungen erbringen, sind teilweise ausgenommen. Im Zweifel sollte die Frage rechtlich geprüft werden.