Alt-Text Bilder: Darum sind Alternativtexte wichtig für SEO und unverzichtbar für die Barrierefreiheit

Bilder prägen moderne Webseiten. Sie machen Inhalte verständlicher. Doch was passiert, wenn Bilder nicht geladen werden – oder von Menschen mit Sehbehinderung gar nicht gesehen werden können? In solchen Fällen übernimmt der Alt-Text eine entscheidende Rolle.

Er liefert einen alternativen Text zum Bildinhalt und verbessert so die Zugänglichkeit für Menschen mit Sehbehinderung. Auch für die Suchmaschinenoptimierung (SEO) ist der Bild-Alt-Text unverzichtbar. Denn nur durch ihn können Suchmaschinen die Bilder verstehen. Schließlich werten sie Text aus – nicht aber den Inhalt von Bildern.

Deswegen möchte ich im folgenden Artikel einmal die Funktionsweise von Alt-Texten für Bilder genauer erklären. Neben den wichtigsten technischen Anforderungen gehe ich auch kurz darauf ein, wie Sie Alt-Texte schreiben müssen, um die thematische Relevanz Ihres Inhaltes für die Suchmaschinen zu erhöhen. 

Was ist der Alt Text bei Bildern?

Der Alt-Text (kurz für Alternativtext) ist eine beschreibende Ergänzung zu einem Bild auf einer Webseite. Er wird im sogenannten HTML-Code hinterlegt – also in der technischen Sprache, mit der Webseiten aufgebaut sind. Genauer gesagt ist der Alt-Text Teil des sogenannten img-Tags, mit dem Bilder in den Quellcode eingebunden werden. Die Alternativbeschreibung erklärt also in wenigen Worten, was auf einem Bild zu sehen ist.

Diese Beschreibung ist wichtig, wenn das Bild aus technischen Gründen nicht angezeigt werden kann – oder wenn Menschen mit Sehbehinderung die Webseite mit Screenreadern lesen wollen. Das sind Programme, die den Inhalt einer Seite vorlesen. 

Doch nicht nur für die Barrierefreiheit einer Website ist ein Alt-Attribut zur Erklärung der Bildinhalte sinnvoll. Auch für das Thema SEO spielt die Bildbeschreibung eine wichtige Rolle. Denn Suchmaschinen können keine Bilder erkennen. Sie lesen nur Worte. Für sie ist die alternative Beschreibung somit die einzige Möglichkeit, den Inhalt eines Bildes zu verstehen. 

Begriffserklärung: Alt Text, Alt-Attribut und Alternativtext

Im Zusammenhang mit Bildern auf Webseiten tauchen aber noch viele weitere Begriffe auf – die alle ähnlich klingen, aber unterschiedliche Bedeutungen haben. Besonders häufig werden „Alt-Text“, „Alt-Attribut“, „Alt-Tags“ oder auch „Bildunterschrift“ verwendet. 

Alt-Text

Alt-Text ist die gebräuchliche Abkürzung für „alternativer Text“. Damit ist ein kurzer beschreibender Satz gemeint, der den Inhalt eines Bildes erklärt. Diese Beschreibung wird nicht sichtbar für die normalen Leserinnen und Leser auf der Webseite eingefügt. Nur wenn ein Screenreader verwendet wird, wird der alternative Inhalt angezeigt.

Alt-Attribut

Alt-Attribute bezeichnen die technische Umsetzung der textlichen Bildbeschreibung im HTML-Code. Der vollständige Begriff lautet alt="…". Er wird innerhalb des sogenannten img-Tags eingefügt. Dieser Tag kennzeichnet im Code, dass es sich um ein Bild handelt (img steht für „image“, also Bild). Das Alt-Attribut wird demnach verwendet, um dem Bild eine schriftliche Erklärung zuzuordnen. Der Code sieht dann zum Beispiel so aus:

<img src=“bild.jpg“ alt=“Eine Person hält ein geöffnetes Buch vor sich“>

Alt-Tags

Alt-Tags sind eine umgangssprachliche, technisch aber ungenaue Bezeichnung. Tags sind die eigentlichen HTML-Befehle – in diesem Fall wäre das der img-Tag. Das Alt-Attribut ist kein eigenständiger Befehl, sondern ein Teil dieses Bild-Tags. Wenn im Internet von „Alt-Tag für ein Bild“ die Rede ist, ist also in den meisten Fällen das Alt-Attribut gemeint – also der Alt-Text, der in den HTML-Code eines Bildes eingebunden wird.

Alt-Image

Alt-Image oder alt text for image sind Begriffe, die oft in englischsprachigen SEO-Artikeln oder in Content-Management-Systemen (CMS) wie WordPress auftauchen. Sie bezeichnen dasselbe wie Alt-Text, verwenden aber eine andere Schreibweise. Auch Varianten wie alt-text, alt text, alternate text oder alt-textes finden sich online wieder. Allen gemeinsam ist: Es geht immer um die Beschreibung eines Bildes in Textform, hinterlegt im HTML-Code.

Bildunterschrift

Nicht verwechselt werden darf der Bild-Alt-Text für Bilder mit der Bildunterschrift. Diese wird auf der Webseite direkt unter dem Bild oder der Grafik angezeigt und gehört zum sichtbaren Inhalt der Website. Bildunterschriften sollen zusätzliche Informationen oder Kontext liefern. Sie werden im Gegensatz zur Alternativbeschreibung von allen Besucherinnen und Besuchern gesehen.

Title-Attribut

Ebenfalls getrennt zu betrachten ist das title-Attribut (auch „Title-Tag“ genannt). Es kann optional zusätzlich zum Alt-Attribut verwendet werden. Wenn ein Title-Text eingetragen ist, erscheint er beim Mouseover als kleiner Hinweistext (Tooltip) über dem Bild. Dieses Attribut hat keinen Einfluss auf die Barrierefreiheit und wird von vielen Screenreadern ignoriert. Es sollte daher nicht als Ersatz für den Bild-Alt-Text genutzt werden.

Begriffe im Überblick

Begriff	Bedeutung
Alt-Text	Beschreibung des Bildinhalts, nicht sichtbar, im Code (html) hinterlegt
Alt-Attribut	Technischer Bestandteil des img-Tags, der den Alt-Text enthält
Alt-Tags	Umgangssprachlicher Begriff, gemeint ist meist das Alt-Attribut
Alt-Image / alt text	Englische Begriffe für Alt-Text
Bildunterschrift	Sichtbarer Text unter dem Bild auf der Webseite
Title-Attribut	Tooltip-Text beim Mouseover, nicht barrierefrei relevant

Die genaue Begriffsverwendung ist entscheidend – nicht nur für die korrekte Umsetzung im HTML-Code, sondern auch für das Verständnis der Funktion im Kontext von SEO, Barrierefreiheit und Usability.

Alt Attribute korrekt einsetzen – Grundlagen für Websites und SEO

Damit Bild-Alt-Texte funktionieren, müssen sie korrekt eingebunden werden. Das betrifft sowohl die technische Integration im Quellcode als auch die redaktionelle Zuordnung zum jeweiligen Seiteninhalt. 

Redaktionelle Zuordnung zum Seiteninhalt

Inhaltlich muss der Bild-Alt-Text immer den Kontext des Bildes widerspiegeln. Nur so erfüllt er den Zweck eines Alternativtextes. Dabei gilt: Ein guter Alt-Text beschreibt entweder den sichtbaren Inhalt des Bildes oder dessen funktionale Bedeutung auf der Seite – nicht beides gleichzeitig.

Wird ein Bild lediglich zur Zierde eingesetzt, gilt es als dekoratives Bild. In solchen Fällen ist das alt-Attribut leer zu lassen (alt=""), um Screenreadern zu signalisieren, dass dieses Bild übersprungen werden kann. Andernfalls überfrachtet eine fehlende oder schlecht formulierte alternative Bildbeschreibung blinde Nutzende mit nichtssagenden Informationen. Und das ist ein erheblicher Nachteil in Sachen Usability.

Einfluss auf SEO und Sichtbarkeit

Suchmaschinen wie Google verwenden Alt-Texte zur inhaltlichen Bewertung und Einordnung von Bildern. Deshalb sind sie fester Bestandteil der sogenannten Bilder-SEO. Möchten Sie Ihre Website barrierefrei und suchmaschinenfreundlich optimieren, sollten sie bei jedem inhaltlich relevanten Bild einen erklärenden Textabschnitt hinzufügen. Dabei gilt: Verwenden Sie, wenn möglich ein relevantes Keyword, sofern es thematisch passt. Dann wird das Image auch in der Bildersuche von Google angezeigt. Denn wussten Sie, dass die Bildsuche in Google genauso relevant ist, wie die reine Textsuche? 

In diesem Zusammenhang schreibt Google auch selbst in seinem SEO Starter Guide:

„Geben Sie beim Einfügen von Bildern einen beschreibenden Dateinamen und ein Alt-Attribut an. So können Suchmaschinen besser verstehen, worum es auf der Seite geht. […] Wir empfehlen, mit prägnanten und beschreibenden Texten zu arbeiten. Wenn ein Benutzer aus irgendeinem Grund keine Bilder sieht – z. B. weil er einen Screenreader benutzt oder eine langsame Verbindung hat – helfen ihm Alt-Text und Dateiname dabei, den Inhalt zu verstehen.“
(Quelle: Google SEO Starter Guide, developers.google.com)

Beispiele für gute und schlechte Alternativtexte für Bilder

Zum besseren Verständnis, was gute und schlechte Alt-Texte voneinander unterscheidet, hier einmal ein paar Beispiele:

Ein gelbes Fahrrad steht an einem Zaun neben einem Baum mit Herbstlaub.

• Schlechter Bild-Alt-Text: fahrrad123.jpg
• Guter Alt-Text: Gelbes Fahrrad lehnt an einem Gartenzaun im herbstlich gefärbten Park

Begründung: Der schlechte Text ist nur der Dateiname – ohne Aussage. Der gute Alt-Text beschreibt Szene, Farbe, Objekt und Kontext.

Eine Frau hält bei Sonnenuntergang ein Smartphone 

• Schlechter Bild-Alt-Text: smartphone
• Guter Alt-Text: Junge Frau steht im Sonnenuntergang mit Smartphone in der Hand

Begründung: Der schlechte Alt-Text benennt nur das Gerät. Der Gute zeigt die Handlung, Bildaussage und Lichtstimmung.

Ein Teller mit zwei Bratwürsten, Sauerkraut und Kartoffelpüree

• Schlechter Bild-Alt-Text: essen
• Guter Alt-Text: Teller mit Bratwürsten, Sauerkraut, Kartoffelpüree und einer Bierflasche

Begründung: „Essen“ ist zu allgemein. Der gute Alt-Text beschreibt präzise, was und wie etwas dargestellt wird.

Best Practices: Alt Texte erstellen

Damit die Auszeichnung Ihrer Bilder im Text barrierefrei und suchmaschinenfreundlich ist, gehen Sie beim Schreiben der Alternativtexte wie folgt vor: 

1. Bild prüfen und Relevanz klären

Bevor Sie einen Alt-Text vergeben, überprüfen Sie, ob das Bild für das Verständnis der Seite eine Rolle spielt. Bei Bildern, die relevante Informationen vermitteln, eine Funktion übernehmen oder zum inhaltlichen Verständnis beitragen, muss eine alternative Beschreibung vorhanden sein. Dazu zählen zum Beispiel:

• Produktfotos
• Logos mit Linkfunktion
• Infografiken
• Illustrationen, die den Inhalt ergänzen

Handelt es sich hingegen um ein rein dekoratives Element, ohne inhaltlichen Mehrwert, ist kein beschreibender Text notwendig. In diesen Fällen bleibt das Attribut leer (alt=""). So erkennen Screenreader, dass das Bild ohne Bedeutung für den Inhalt ist, und überspringen es entsprechend.

2. Alt-Text im CMS ergänzen

Wenn Sie Ihre Website mit einem Content-Management-System wie WordPress verwalten, müssen Sie keinen HTML-Code schreiben, um einem Bild einen Erklärungstext zuzuweisen. Sobald Sie ein Bild hochladen, öffnet sich ein Eingabeformular. Dort können Sie den Alt-Text hinzufügen. Das entsprechende Feld ist mit „Alternativtext“ oder „Alternative Text“ beschriftet. Die Eingabe erfolgt als Klartext – das System übernimmt automatisch die technische Umsetzung des alt-Attributs.

Eine einmal eingetragene Beschreibung wird beim Speichern dauerhaft dem Bild zugeordnet. Damit können Sie selbst ohne Programmierkenntnisse Alt-Tags für Bilder korrekt pflegen. Diese Funktion ist übrigens nicht auf WordPress beschränkt. Auch andere Systeme wie Joomla, TYPO3 oder Drupal unterstützen das Hinzufügen von Alt-Text auf vergleichbare Weise.

Pflegen Sie den erklärenden Textabschnitt am besten unmittelbar beim Hochladen eines Bildes. Wenn Ihr CMS dies erlaubt, markieren Sie das Eingabefeld als Pflichtfeld.

Wichtig: Ein Bild ohne alternative Beschreibung bleibt unsichtbar – für Suchmaschinen, Google Bilder genauso wie für sämtliche Nutzerinnen und Nutzer, die auf technische Hilfsmittel angewiesen sind.

3. Aussage erfassen und formulieren

Bevor Sie den Alt-Text zu Bildern eintragen, sollten Sie sich mit dem konkreten Inhalt und dem Zweck des jeweiligen Bildes auseinandersetzen. Fragen Sie sich:

• Was zeigt das Bild konkret?
• Welche Informationen im Alt-Text helfen, den Zusammenhang mit dem Textinhalt zu verstehen?

Wichtig: Der Alternativtext tritt anstelle des Bildes. Deshalb darf er keine Interpretation enthalten, sondern muss sich auf das beschränken, was visuell dargestellt ist.

Eine inhaltlich korrekte Beschreibung bedeutet dabei jedoch nicht, jedes Detail genau aufzulisten. Vielmehr gilt es, die Aussage zu erfassen, die das Bild im Kontext übermitteln soll.

Geben Sie der Bildbeschreibung keine eigene Deutung oder eine persönliche Einschätzung. Die Bedeutung ergibt sich aus dem Meaning, dass der Bildinhalt im Gesamtzusammenhang der Seite hat.

Mit anderen Worten: Ob das Bild beispielsweise einen Arbeitsschritt erklärt, eine Person zeigt oder ein Produkt veranschaulicht – all das beeinflusst die Formulierung der Beschreibung. Ziel ist es, die wesentliche Aussage in einem klaren, beschreibenden Satz zu erfassen.

Achten Sie außerdem darauf, den Erklärungstext nicht mit dem Title zu verwechseln. Während der Title lediglich einen kurzen Hinweistext liefert, der nur beim Mouseover (fahren mit dem Mauszeiger über das Bild) sichtbar ist, muss der alternative Inhalt eine vollständige, kontextbezogene Beschreibung liefern. Nur so wird Ihr Text für Bilder zu einer funktionalen Ergänzung.

4. Länge begrenzen

Ein Bild-Alt-Text soll klar und präzise sein, ohne unnötige Ausschmückungen. Wenn Sie sich an die Empfehlungen des W3C halten, sollten Sie ihn so kurz wie möglich halten. Die empfohlene Länge von Alt-Texten liegt bei rund 125 Zeichen, inklusive Leerzeichen.

Damit bleibt die Beschreibung gut erfassbar und wird vollständig von Screenreadern vorgelesen. Lange Alt-Texte sind nur in Ausnahmefällen sinnvoll – etwa bei erklärungsbedürftigen Infografiken oder technischen Zeichnungen.

Wenn Sie für ein Bild mehrere Informationen unterbringen möchten, überlegen Sie, ob diese nicht besser im eigentlichen Fließtext geschrieben werden. Denn der Alt-Text für ein Bild ist kein Ersatz für inhaltliche Erläuterungen – er ergänzt sie nur.

5. Format und Sprache anpassen

Ein guter Alternativtext folgt den Regeln der geschriebenen Sprache. Achten Sie auf korrekte Zeichensetzung, damit die alternative Bildbeschreibung auch bei Sprachausgabe verständlich bleibt. Verwenden Sie Anführungszeichen nur dann, wenn sie zur Bildbeschreibung notwendig sind, etwa bei sichtbaren Zitaten oder Buchtiteln. Vermeiden Sie Sonderzeichen, Klammern oder Aufzählungen. Sie stören die Lesbarkeit.

Tipp: Formulieren Sie den Erklärungstext wie einen kurzen beschreibenden Satz – ohne abschließenden Punkt. Achten Sie darauf, dass die alternative Imagebeschreibung organisch zur Seite passt und keine überflüssigen Begriffe oder Fremdwörter enthält.

6. Keyword sinnvoll einbauen

Der alternative Bildtext darf ein relevantes Keyword enthalten, wenn es sich stimmig in die Beschreibung einfügt.

Wichtig: Gute Alt-Texte sind niemals Keyword-Listen, sondern sinnvoll formulierte Sätze, die Inhalt transportieren. Wird das Keyword natürlich integriert, unterstützen Sie damit aber die Bild-Indexierung in Suchmaschinen.

7. Qualität regelmäßig prüfen

Damit Sie Inhalte mit fehlenden Bild-Alt-Texten veröffentlichen, verwenden Sie ein Prüf-Tool wie den Alt Text Tester Chrome Extension. 

Achten Sie bei der Überprüfung auch auf die Bildfunktionen: Wenn ein Bild klickbar ist oder die Leserinnen und Leser damit interagieren, muss ein beschreibender Alt-Text vorhanden sein, der die Funktion des Bildes eindeutig macht.

8. Title-Feld nicht verwechseln

Das sogenannte Title-Attribut hat nichts mit Barrierefreiheit zu tun. Es wird von Lesegeräten in der Regel ignoriert und dient ausschließlich als Hinweistext bei Mouseover. Der Title kann zusätzliche Informationen liefern, ersetzt aber nie den Alternativtext für Bilder. Deshalb müssen Sie für jedes relevante Bild eine separate Beschreibung eingeben – unabhängig vom Title-Feld. 

9. Veröffentlichung prüfen

Bevor eine Seite live geht, kontrollieren Sie noch einmal systematisch, ob bei allen eingebundenen Bildern eine Beschreibung hinterlegt worden ist. Dabei geht es nicht nur um die Technik – auch redaktionell muss geprüft werden, ob die gewählten Formulierungen dem Bildinhalt gerecht werden. 

Warum ist der Alt-Text für Bilder so wichtig? 

Der Alt-Text ist demnach kein Beiwerk, sondern Bestandteil der inhaltlichen Qualität einer Website. Er sorgt dafür, dass Bilder unabhängig von ihrer Darstellung zugänglich bleiben und in den Suchmaschinen gefunden werde. Außerdem bildet er zugleich die textliche Grundlage für deren semantische Einordnung.

Im Bereich der Barrierefreiheit erfüllt der alternative Bildtext auch noch eine gesetzlich verankerte Funktion: Ohne beschreibende Bildinhalte können Nutzerinnen und Nutzer mit Hilfstechnologien den Kontext nicht erfassen. Für redaktionelle und technische Teams bedeutet das: Eine Seite ohne vollständige Alt-Texte gilt als unvollständig.

Auch für Suchmaschinen ist der Alt-Text eine strukturierte Inhaltsquelle. Er verknüpft visuelle Elemente mit textbasierten Bewertungssystemen und trägt so direkt zur Sichtbarkeit in der Bildsuche bei. Dabei kommt es nicht auf Quantität, sondern auf inhaltliche Relevanz und Einbettung an.

Kurz gesagt:

Alt-Texte fördern die Verständlichkeit, sichern Funktionalität – und sind zunehmend Teil regulatorischer Anforderungen. Wer auf sie verzichtet, riskiert auf lange Sicht einen Sichtbarkeitsverlust in den Suchmaschinen.