Alttexte - barrierefrei und SEO freundlich

Bilder machen Webseiten lebendiger und anschaulicher. Für viele Besucher. Aber eben nicht für alle.
Ohne passende Bildbeschreibung (Alttext) bleiben Menschen mit Einschränkungen außen vor, z. B. Menschen mit einer Sehbehinderung, die auf einen Screenreader angewiesen sind.
Alttexte sind ein wichtiger Beitrag zur digitalen Barrierefreiheit und ein verpflichtender Bestandteil der WCAG-Richtlinien.

Aber auch bei Suchmaschinen kann man punkten. Denn sie "sehen" Bilder nur oberflächlich und ohne Kontext.
Mit einem Alttext bestimmt man selbst die Bedeutung – und stärkt gleichzeitig die Reichweite in der Bildersuche.

In diesem Beitrag erfahren Sie, alles, was Sie über Alttexte wissen sollten, wie Sie gute Alttexte schreiben (anhand von konkreten Beispielen) und nebenbei die Nutzerfreundlichkeit und Sichtbarkeit Ihrer Webseite verbessern. Für den schnellen Überblick stehen außerdem Checklisten bereit. Wer tiefer in das Thema einsteigen möchte, findet hier nützliche Zusatzinformationen.

Das erfahre ich in diesem Beitrag:

• Was ist ein Alttext und wie binde ich ihn ein?
• Alttext als rechtliche Verpflichtung
• Alttext richtig formulieren
• Checkliste: Dos & Don'ts
• Was haben Alttexte mit SEO zu tun?
• Checkliste: Alttext nach Funktion des Bildes?
• Alttexte nach Bildarten - Details und Beispiele

Nützliches Zusatz-Wissen:

• Exkurs: Alttexte auch auf Social Media?
• IMG?! - Warum Sie Bilder auch richtig benennen sollten
• Kann KI Alttexte schreiben

---

Was ist ein Alttext?

Alttext in Webseite einbauen

Der Alttext wird im sogenannten Alt-Attribut im HTML-Code des Bildes hinterlegt – oft auch als ‚Alt-Tag‘ bezeichnet.

Alttext im HTML-Code

<img src="/bild.jpg" alt="Person tippt auf einem Laptop, daneben steht eine Kaffeetasse">

Der Zusatz alt="" ist der Platzhalter für die Bildbeschreibung.

Man muss den Alttext aber meist nicht direkt im HTML-Code einfügen. Viele CMS-Systeme, wie Joomla, Wordpress oder Typo3 haben beim Bildupload ein eigenes Eingabefeld für den Alttext, in das man die Beschreibung einfach eintragen kann.

Beispiel aus dem CMS Joomla:

 

Alttexte gehören zur rechtlichen Verpflichtung

 

Alttext richtig formulieren

Bevor wir uns im Detail mit den einzelnen Funktionen und Bildarten beschäftigen, kommt zunächst ein Überblick zur besseren Orientierung.

Die 5-K-Regel

5 Ks - Kerninformation im Kontext kurz, klar & konkret

• Kerninformation klar & konkret formulieren:
  Nicht alles beschreiben, sondern was für das Verständnis oder den Zweck des Bildes wichtig ist und nur die Details erwähnen, die relevant sind.

  Wenn das Bild gelöscht würde – was müsste stehen, damit der Inhalt trotzdem Sinn ergibt?
  Warum habe ich dieses Bild gewählt?
  Was ist relevant?
  Was oder wen sieht man?
  Was passiert?

  
  Beispiel:
  alt=„Ärztin misst Blutdruck beim Patienten“
  versus unnötige Details:
  alt=„das rote Stethoskop glänzt“
  (außer wenn „rot“ oder „Stethoskop“ relevant im Kontext sind)

• Kontextbezogen 
  Ein Bild steht in der Regel nicht für sich allein – es ist Teil eines Textes. Der Alttext sollte den Text ergänzen. Und dabei nicht wiederholen, was schon daneben steht.

  Beispiel:
  Wenn im umgebenden Fließtext direkt neben dem Bild steht „Unsere Teamleiterin Frau Meyer im Gespräch mit Kunden“, muss der Alttext das nicht nochmal im Detail aufgreifen.
  
  
• Kurz halten, wenn möglich
  Empfohlene Länge: maximal 125 Zeichen
  Das ist kein Gesetz, aber eine gängige Empfehlung. Längere Texte werden von manchen Screenreadern abgeschnitten bzw. abgebrochen. Außerdem können unnötig lange Beschreibungen den User überfordern. Wenn mehr als eine Kurzbeschreibung nötig ist (z. B. bei Infografiken oder Diagrammen), nutzen Sie ergänzende Beschreibungen außerhalb des Alt-Attributs – etwa im Fließtext.

Alttexte: Tipps & Tricks

• Text im Bild in den Alttext aufnehmen, wenn er relevant ist, etwa bei Infografiken.
• Wenn ein Bild dekorativ, also rein visuell ist und nur zur Auflockerung, aber nicht zum Verständnis dient, sollte man den Alttext leer lassen (alt="").
  Wenn ein Alt-Attribut leer sein soll (alt="") – kein Leerzeichen zwischen den Anführungszeichen setzen, sonst könnte es vorgelesen werden.
  
• Bei Icons bzw. Schaltflächen/Links nicht das Aussehen, sondern die Funktion, Aktion oder Navigation beschreiben.
• Priorität beachten: Wichtiges zuerst. 
  Beginnen Sie den Alttext mit dem, was am relevantesten für das Verständnis ist.
• Bewertungen vermeiden, wie „schön“, „inspirierend“.
• Keine Einleitungen wie "Bild von …", "Foto von ..." oder „Bild zeigt …“ in den Alttext aufnehmen.
  Screenreader und Suchmaschinen erkennen auch so, dass es sich um ein Bild handelt. Formulierungen wie „Foto von einem Mann im Park“ sind überflüssig.
• Bildtyp nur dann nennen, wenn er Teil der Information ist.

  
  Beispiel:
  „Diagramm zur Entwicklung der Besucherzahlen seit 2020“
  → Relevant, weil es kein Foto ist, sondern eine Datenvisualisierung.

  „Gemälde einer historischen Marktszene aus dem 18. Jahrhundert“
  → Relevant, weil der Kunstcharakter Teil der Information ist.

• Mit Punkt enden: Das hilft Screenreadern beim Vorlesen und setzt ein klares Ende.

Alttext schreiben: Dos & Don'ts

Hier nochmal im Überblick:

✔ Do	X Don't
Kernaussage zuerst	Mit „Foto von…" oder „Bild zeigt…" beginnen
Konkret und objektiv beschreiben	Subjektiv bewerten („schön", „inspirierend")
Handlung, Person, Ort nennen – wenn relevant	Irrelevante Details aufzählen
Relevanten Text im Bild in den Alttext übernehmen	Denselben Text wiederholen, der schon im Fließtext steht
Bei dekorativen Bildern alt="" setzen	Alttext weglassen ohne bewusste Entscheidung
Keywords natürlich einbauen, wenn sie passen	Keyword-Stuffing betreiben
Mit Punkt enden	Alttext länger als 125 Zeichen machen (wenn vermeidbar)
Funktion beschreiben bei Icons/Buttons	Aussehen beschreiben statt Funktion

Was haben Alttexte mit SEO zu tun?

Das oberste Ziel von Suchmaschinen ist es, den passenden Inhalt zu einer Suchanfrage zu liefern.
Google indexiert und analysiert dabei auch Alttexte. Fehlt der Alttext, ist die Wahrscheinlichkeit geringer, in der Bildesuche zu erscheinen. 

Rund 22,6 % (Stand 2024) aller Suchanfragen werden über die Google-Bildersuche gemacht – bei der allgemeinen Google-Suche sind es sogar über 60 % - Tendenz steigend. 
Gute Alttexte fließen automatisch in die Bewertung Ihrer Webseite mit ein.
Das bedeutet: Wer seine Bilder beschreibt, wird "belohnt" und hat bessere Chancen auf zusätzlichen Traffic.

Weiß die KI, was auf meinen Bildern zu sehen ist?

Ja, im Zeitalter von KI können Suchmaschinen wie Google, Bilder (auch ohne Beschreibung) recht treffsicher analysieren. Sie erkennen die Inhalte und können Bilder sogar mit bekannten Quellen (die bereits an anderer Stelle im Netz auftauchen) abgleichen. Was Suchmaschinen dabei fehlt, ist der Kontext, in dem das Bild verwendet wird.
Alttexte füllen die Lücke zwischen „sehen“ und „verstehen“. Mit einem Alttext kann man aktiv steuern, wie das Bild interpretiert werden soll und wo der Fokus liegt. 
Und das hilft auch Google zu verstehen, worum es IHNEN geht.

Aber: Alttexte sind keine Werbetexte.

Zusätzlich punkten kann man, indem man relevante Keywords in den Alttext einbaut. Aber bitte mit Sinn und Verstand und nur, wenn es auch zur Beschreibung des Bildes beiträgt.

Daher sollte man kein "Keyword-Stuffing" betreiben, also möglichst oft und im Übermaß Keywords verwenden, über die man gefunden werden möchte, ohne auf den eigentlichen Inhalt des Bildes zu achten. Wenn Ihr Bild relevante SEO-Keywords enthält, ist das ideal. Wenn nicht, ist das auch okay.

Am Ende gilt immer: Schreiben Sie Alttexte für Ihre Nutzer und nicht für Suchmaschinen, und fragen Sie sich: 
Hat der Alttext einen Mehrwert für den User? statt Wie verpacke ich möglichst viele Keywords?

Alttexte und SEO - Zusammenfassung

• Suchbegriffe mit Ranking-Potenzial auf natürliche Weise im Alttext einfließen lassen. 
• Barrierefreiheit vor Suchmaschinenoptimierung! Keywords integrieren, aber auch nicht zulasten der Barrierefreiheit.

Altexte als Fallback

Alttexte sind nicht nur für Screenreader wichtig, sondern auch ein Fallback, wenn mal die Technik versagt. Zum Beispiel im Fall einer schwachen bzw. langsamen Internetverbindung, Serverproblemen oder einem defekten Bildpfad. Wenn ein Bild nicht geladen werden kann, kann der Alttext für mehr Klarheit sorgen - für Menschen mit und ohne Einschränkungen sowie für Suchmaschinen.

Checkliste: Alttext nach Funktion des Bildes?

Nicht jedes Bild braucht einen Alttext. Entscheidend ist, welche Funktion das Bild erfüllt:

Bild		Beispiel	Alttext
Informativ	✔	Foto, Infografik	beschreibt die Kernaussage
Funktional	✔	Such-Icon	beschreibt die Funktion/Navigation alt="Suche öffnen"
Dekorativ	X	Pfeil, Trennlinie, Hintergrundbild	alt=""
Ergänzende Information	+	PDF-Icon neben beschriftetem Link	(alt="") + aria-label

Alttexte nach Bildarten - Details und Beispiele

Fotos

Bilder, v.a. in Form von Fotos, erzählen Geschichten und bereichern den Inhalt/Text.

Folgendes sollte man beachten:

X Zu emotionale/subjektive Alttexte

Beschreiben, was wirklich zu sehen ist. Das klingt erstmal recht simpel, ist aber in der Praxis gar nicht so selbstverständlich. Denn oft haben wir einen subjektiven Blick auf Bilder und laden sie mit Emotionen auf.
Versuchen Sie also, möglichst objektiv und konkret zu bleiben.

Stellen Sie sich folgende Frage: 
Liefert der Text konkrete Informationen oder ist der Text meine persönliche Beschreibung oder Beurteilung?

✔ Bildwirkung im Kontext

Wenn Sie das Bild gezielt eingesetzt haben, um etwas zu unterstreichen, z. B. Offenheit, Teamwork, Kundennähe, überlegen Sie, ob und wie Sie das in den Alttext überführen können. Am besten ohne Marketing-Floskeln.

✔ Namen & Eigennamen

Wenn Personen abgebildet sind, die (im Kontext) eine Rolle spielen (z. B. Teammitglieder, Vortragende).

Beispiel:

Infografiken und Illustrationen

Illustrationen sind oft symbolisch, verspielt oder kreativ überzeichnet. Genau deshalb ist hier der Sinn des Bildes wichtiger als jedes kleine Detail.

Der Alttext sollte das Wesentliche beschreiben – weniger das Künstlerische.
Aber auch hier gilt: Was ist der Kontext? Spielt womöglich gerade das Künstlerische eine relevante Rolle?

Metaphorische Szenen mit überzeichneter Symbolik sollten auf das reduziert werden, was sie zeigen und bedeuten.

Beispiel:

Icons und Logos

Icons sind unscheinbar, aber funktional oft entscheidend.
Sie können Logos zeigen, auf Aktionen hinweisen oder zu anderen Seiten navigieren.
Damit sie verständlich sind, muss der Alttext den Zweck des Icons beschreiben.

Logos

Ein Logo steht für eine Marke oder Institution. Das genaue Aussehen ist in der Regel weniger entscheidend.
Wenn das Logo gleichzeitig ein Link ist, sollte unbedingt die Navigation angegeben werden.

alt="Zur Startseite von sketch.Media."
 

Icons mit Link-Funktion

Icons, die gleichzeitig Links sind, lösen eine Aktion aus. Daher brauchen sie einen Alttext, der genau das beschreibt.
Wenn ein Icon zu einer anderen Seite oder einem externen Profil führt, sollte der Alttext sagen, wohin der Link führt.

Beispiele:

Alttexte auch auf Social Media?

IMG?! - Warum Sie Bilder auch richtig benennen sollten

Wenn kein Alttext vorhanden ist, lesen Screenreader oft den Dateinamen als Notlösung vor. Wenn Ihre Bilddatei "person1.jpeg" heißt, hört der User auch "Person eins Punkt jpeg", was nicht sonderlich hilfreich ist.

Hinweis: In einigen Content-Management-Systemen wie Joomla wird der Dateiname automatisch in den Alttext übernommen, wenn man ihn nicht aktiv überschreibt.

Beispiel:
ux-workshop-berlin-2025.jpg versus IMG_6381.jpg

Wenn jemand nach „UX Workshop Berlin“ sucht, hat ux-workshop-berlin-2025.jpg bessere Chancen, in der Bildersuche aufzutauchen, und ist bei weitem informativer als ein nichtssagendes IMG_6381.

Es gehört generell zum Best Practice, Bilder sinnvoll zu benennen:
„Bild1.jpg“, „Bild_neu_final_final2.jpg“ oder "IMG_20230914_123456.jpg" sind absolut nichtssagend und kryptisch.
Wenn man seine Webseite (v. a. im Team) pflegt, verschwendet man eine Menge Zeit bei der Bildersuche.

Guter Bild-Dateinamen - Checkliste:

• So lang wie nötig, aber so kurz wie möglich.
• Keine Leerzeichen, sondern Unterstrich oder Bindestrich
• Kleinbuchstaben
• Relevante Begriffe einbauen, wenn möglich
• Keine Umlaute oder Sonderzeichen

Kann KI Alttexte schreiben?

KI kann Bilder beschreiben, aber das reicht meist nicht für eine barrierefreie Webseite aus.

Selbst fortschrittliche Bild-KI-Modelle können wichtige Details im Kontext übersehen oder schlichtweg falsch /kontextunabhängig interpretieren.

Beispiel:
Auf dem Bild ist ein „Konferenzraum“ zu sehen, der von der KI als „Wohnzimmer“ interpretiert wird, weil u. a. eine Couch für Kunden zu sehen ist.
Screenreader-Nutzer wundern sich, was ein Wohnzimmer mit Ihrer Werbeagentur zu tun hat ...

Warum Menschen Alttexte schreiben sollten?

Der Kontext ist entscheidend.

KI kann nicht erkennen oder entscheiden, in welchem Zusammenhang Sie ein Bild verwenden und was Sie mit dem Bild ausdrücken wollen.

alt= "Eine Frau und ein Mann schütteln sich am Schreibtisch die Hände."

Aber worum geht es?

Möglicher Kontext:  Sie haben ein Unternehmen und bieten UX-Design an. Ein Partner-Unternehmen kümmert sich um Webentwicklung. Sie wollen die gelungene Kommunikation im Team betonen.

alt="UX-Designerin und Entwickler begrüßen sich per Handschlag in unserem offenen Web-Büro in Berlin."

Neben einer konkreten Beschreibung, was zu sehen ist (Personen, Handlung, Setting) und dem Bezug zum Kontext (eine professionelle, konstruktive Arbeitsbeziehung), binden Sie auch geschickt SEO-relevante Begriffe mit ein, wie UX-Designerin, Entwickler, den Ort (für lokales SEO).

KI-erzeugte Beschreibungen können als Notlösung eingesetzt werden. Wer die gesetzlichen Vorgaben und WCAG-Richtlinien ernst nimmt, sollte besser selbst entscheiden, was für seine Nutzer relevant ist und Mehrwert hat.

KI kann helfen, aber nicht ersetzen.

Es gibt inzwischen kostenlose AI-Alttext-Generatoren (neben kostenpflichtigen Optionen), die man bei der Erstellung von Alttexten zur Hilfe nehmen kann.

• ahrefs
• barrierefreies Design

Dort laden Sie Ihr Bild hoch und erhalten Vorschläge für einen Alttext. Sie können zwischen verschiedenen Sprachen wählen und optional den Kontext eintragen. ahrefs bietet sogar die Auswahl eines Schreibstils an (wie förmlich oder locker) an.

Am Ende zählt der Mensch bzw. Ihr Urteilsvermögen. Ob oder welchen Vorschlag Sie verwenden und inwieweit Sie ihn selbst anpassen, können nur Sie entscheiden.

 

Quellen:

• https://accessibility.huit.harvard.edu/describe-content-images
• https://www.w3.org/WAI/tutorials/images/decision-tree/
• https://www.w3.org/WAI/tutorials/images
• https://barrierefreies.design/werkzeuge/ki-generator-alternativer-text-von-bildern
• https://blogs.articulate.com/e-learning-einfach-gemacht/screenreader-im-barrierefreien-e-learning-ein-ueberblick/
• Hinweis: Einige der in diesem Beitrag verwendeten Bilder wurden mithilfe von KI erstellt.