Alttexte richtig schreiben – barrierefrei und SEO-freundlich

Bilder machen Websites 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, etwa 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 kannst du punkten. Denn sie „sehen" Bilder nur oberflächlich und ohne Kontext. Mit einem Alttext bestimmst du selbst die Bedeutung – und stärkst gleichzeitig die Reichweite in der Bildersuche.

In diesem Beitrag erfährst du alles, was du über Alttexte wissen solltest, wie du gute Alttexte schreibst (anhand konkreter Beispiele) und nebenbei die Nutzerfreundlichkeit und Sichtbarkeit deiner Website verbesserst. Für den schnellen Überblick stehen außerdem Checklisten bereit. Wer tiefer einsteigen möchte, findet hier nützliches Zusatzwissen.

Was ist ein Alttext?

Ein Alttext (kurz für „alternativer Text" oder „Alternativtext") ist eine kurze Textbeschreibung eines Bildes im HTML-Code einer Website. Screenreader lesen den Alttext vor oder geben ihn als Brailleschrift aus. Er hilft Menschen, die Bilder nicht oder nur eingeschränkt sehen können. Er erscheint außerdem im Browser, wenn ein Bild nicht geladen werden kann – etwa bei langsamer Verbindung oder defektem Bildpfad.

Alttext in die Website 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.

Meist musst du den Alttext aber nicht direkt im HTML-Code einfügen. Viele CMS wie Joomla, WordPress oder TYPO3 haben beim Bildupload ein eigenes Eingabefeld für den Alttext, in das du die Beschreibung einfach einträgst.

Beispiel aus dem CMS Joomla:

Alttexte gehören zur rechtlichen Verpflichtung

Spätestens seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) viele Unternehmen, ihre digitalen Angebote barrierefrei zu gestalten. Trotz seiner Bedeutung für Barrierefreiheit und Auffindbarkeit haben bislang verhältnismäßig wenige Bilder im Netz einen Alttext – obwohl die Anforderung, Nicht-Text-Inhalte durch Textalternativen zugänglich zu machen, in nationalen und internationalen Richtlinien verankert ist, darunter die deutsche BITV 2.0 und die WCAG-Richtlinien.

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 das, was für Verständnis oder Zweck des Bildes wichtig ist – und nur die relevanten Details erwähnen.

  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" im Kontext relevant 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 nicht wiederholen, was schon daneben steht.

  Beispiel: Wenn im Fließtext direkt neben dem Bild steht „Unsere Teamleiterin Frau Meyer im Gespräch mit Kunden", muss der Alttext das nicht noch einmal 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, und unnötig lange Beschreibungen können den Nutzer überfordern. Wenn mehr als eine Kurzbeschreibung nötig ist (z. B. bei Infografiken oder Diagrammen), nutze 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.
• Ist ein Bild dekorativ, also rein visuell und nur zur Auflockerung, aber nicht zum Verständnis, solltest du den Alttext leer lassen (alt=""). Achtung: kein Leerzeichen zwischen die 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: Beginne den Alttext mit dem, was am relevantesten für das Verständnis ist.
• Bewertungen vermeiden, wie „schön" oder „inspirierend".
• Keine Einleitungen wie „Bild von …", „Foto von …" oder „Bild zeigt …". Screenreader und Suchmaschinen erkennen auch so, dass es ein Bild ist. „Foto von einem Mann im Park" ist überflüssig.
• Bildtyp nur 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 noch einmal im Überblick:

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 Bildersuche zu erscheinen.

Rund 22,6 % (Stand 2024) aller Suchanfragen laufen über die Google-Bildersuche – bei der allgemeinen Google-Suche sind es sogar über 60 %, Tendenz steigend. Gute Alttexte fließen automatisch in die Bewertung deiner Website 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 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 steuerst du aktiv, wie das Bild interpretiert werden soll und wo der Fokus liegt. Und das hilft auch Google zu verstehen, worum es dir geht.

Aber: Alttexte sind keine Werbetexte

Zusätzlich punkten kannst du, indem du relevante Keywords in den Alttext einbaust – aber bitte mit Sinn und Verstand und nur, wenn es zur Beschreibung des Bildes beiträgt.

Betreibe daher kein „Keyword-Stuffing", also das übermäßige Verwenden von Keywords ohne Rücksicht auf den eigentlichen Bildinhalt. Wenn dein Bild relevante SEO-Keywords enthält, ist das ideal. Wenn nicht, ist das auch okay.

Am Ende gilt immer: Schreib Alttexte für deine Nutzer und nicht für Suchmaschinen, und frag dich: Hat der Alttext einen Mehrwert für den User? statt Wie verpacke ich möglichst viele Keywords?

Schlecht

alt="UX Design Workshop Berlin 2025 UX Strategie UX Tools UX Methoden"

Besser

alt="Teilnehmende am UX-Workshop in Berlin 2025 diskutieren am Whiteboard mit Sticky Notes"

Alttexte und SEO – Zusammenfassung

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

Alttexte als Fallback

Alttexte sind nicht nur für Screenreader wichtig, sondern auch ein Fallback, wenn die Technik versagt – etwa bei schwacher Internetverbindung, Serverproblemen oder einem defekten Bildpfad. Wenn ein Bild nicht geladen werden kann, sorgt der Alttext für mehr Klarheit – 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:

Informativ

Ein informatives Bild (Foto, Grafik oder Illustration) zeigt etwas, das für den Inhalt wichtig ist. Der Alttext sollte den Inhalt des Bildes zusammenfassen.

Funktional

Ist ein Bild klickbar – etwa ein Icon oder eine Schaltfläche – beschreibt der Alttext nicht das sichtbare Motiv, sondern die dahinterliegende Funktion.

Funktionale Bilder erfüllen eine konkrete Aufgabe. Sie ergänzen den Text nicht nur, sondern lösen eine Aktion aus oder unterstützen die Navigation. Der Alttext sollte daher klar benennen, welche Funktion das Element hat bzw. wohin ein Klick den User führt.

Dekorativ

Dekorative Bilder sind rein visuell und tragen nicht zum Inhalt bei. Da sie keine wichtigen Zusatzinformationen liefern, brauchen sie keinen Alttext. Verwende alt="", damit der Screenreader das Bild überspringt und der Lesefluss nicht gestört wird. Beispiele für dekorative Bilder:

• ein abstrakter Hintergrund
• ein reines Stimmungsfoto ohne Bezug zum Text
• ein Symbol, das nichts auslöst

Doppelte Information: Wenn das Bild bereits im umliegenden Text ausführlich beschrieben wurde, kann es aus Sicht der Barrierefreiheit als dekorativ eingestuft werden. Dann kann der Alttext leer bleiben, um Wiederholungen für Screenreader zu vermeiden. Für SEO und die Bildersuche kann das allerdings ungünstig sein, weil Suchmaschinen das Bild ohne inhaltlichen Kontext erfassen.

aria-label als Ergänzung

Das aria-label ist ein unsichtbares HTML-Attribut, das Screenreadern eine alternative Beschreibung eines Elements liefert – unabhängig vom sichtbaren Text auf der Seite. Es lässt sich auf jedes interaktive HTML-Element setzen: Links, Buttons, Formulare, Icons.

Ein Icon kann auch dekorativ sein – z. B. ein PDF-Icon, das vor dem verlinkten Titel eines herunterladbaren Dokuments steht. In dem Fall kann der Alttext des Icons leer bleiben und das aria-label beschreibt, was passiert.

Beitragsordnung

<p><img src="/images/Icon/download.svg" alt=""> <a href="/dokumente/beitragsordnung.pdf" aria-label="Beitragsordnung als PDF herunterladen">Beitragsordnung</a></p>

Alttexte nach Bildarten – Details und Beispiele

Fotos

Bilder, vor allem Fotos, erzählen Geschichten und bereichern den Inhalt. Folgendes solltest du beachten:

✘ Zu emotionale/subjektive Alttexte

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

Stell dir folgende Frage: Liefert der Text konkrete Informationen oder ist er meine persönliche Beschreibung bzw. Beurteilung?

Beispiel für einen unkonkreten, bewertenden Alttext:
„Ein freundliches und inspirierendes Bild, das unsere Firmenphilosophie unterstreicht." → Der Text beschreibt zu viele unsichtbare Dinge, also Emotionen und Meinungen. Was „schön", „freundlich" oder „inspirierend" ist, empfindet jeder anders. Das hat wenig Mehrwert für einen Menschen, der das Bild nicht sehen kann.

Beispiel für einen konkreten Alttext:
„Ein vierköpfiges Team lacht und unterhält sich in einem offenen, nachhaltig gestalteten Büro mit vielen Pflanzen." → Der Text beschreibt sichtbare Dinge, zeigt dennoch den Teamcharakter, lässt übermäßige Interpretation weg und enthält für SEO ggf. Begriffe wie „nachhaltig", „Team", „Büro".

✔ Bildwirkung im Kontext

Wenn du das Bild gezielt eingesetzt hast, um etwas zu unterstreichen – z. B. Offenheit, Teamwork, Kundennähe – überleg, ob und wie du das in den Alttext überführen kannst. Am besten ohne Marketing-Floskeln.

✔ Namen & Eigennamen

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

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.

Hier soll gezeigt werden, wie sich Arbeit anfühlt, wenn zu viele Dinge gleichzeitig im Kopf rotieren – und der Kaffee zum Rettungsanker wird.

Die Illustration zeigt eine Geschäftsperson, die Kaffee trinkt, während ihr Kopf durch einen Strudel aus Gedanken, Symbolen und Aufgaben ersetzt ist. Das steht sinnbildlich für mentale Überlastung, Gedankenchaos, Multitasking, Druck, Termine, Ideen, To-dos und den Versuch, alles mit einem Kaffee am Laufen zu halten.

Der Alttext könnte lauten: alt="Geschäftsmann mit Kaffeebecher. Anstelle des Kopfes hat er einen Strudel aus Gedanken und Aufgaben, als Sinnbild für mentalen Druck."

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. Führt ein Icon zu einer anderen Seite oder einem externen Profil, sollte der Alttext sagen, wohin der Link führt. Beispiele:

Exkurs: Alttexte auch auf Social Media?

Ja. Digitale Barrierefreiheit endet nicht bei der eigenen Website. Ist dir bei einem Post schon mal aufgefallen, dass Plattformen wie Instagram, LinkedIn und Facebook inzwischen Eingabemöglichkeiten für alternative Bildbeschreibungen anbieten? Und hast du diese Option schon mal genutzt?

Warum und wie man Alttexte in Instagram, LinkedIn & Co. einsetzt

Soziale Netzwerke werden aktiv und regelmäßig von Menschen mit Einschränkungen (etwa einer Sehbehinderung) genutzt. Und gerade da spielen Bilder eine essenzielle Rolle. Ein guter Alttext macht deine Inhalte nicht nur für alle zugänglich – du setzt auch ein Zeichen für Inklusion.

Alttexte Social Media – Checkliste

• klar formulieren
• die wichtigsten Informationen möglichst am Anfang erwähnen
• möglichst unter 140 Zeichen bleiben
• Einleitungen wie „Bild von …" weglassen

Instagram – Alttext eintragen (Stand September 2025)

Erstellen (+) → Bild hochladen → Barrierefreiheit (aufklappen) → Alttext eintragen.

Oder: Bearbeiten → Barrierefreiheit (aufklappen) → Alttext eintragen.

LinkedIn – Alttext eintragen (Stand September 2025)

Beitrag beginnen → Bild hochladen → „Alt" (anklicken) → Alttext eintragen.

IMG?! – Warum du Bilder auch richtig benennen solltest

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

Hinweis: In einigen CMS wie Joomla wird der Dateiname automatisch in den Alttext übernommen, wenn du ihn nicht aktiv überschreibst.
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. Wenn du deine Website (vor allem im Team) pflegst, verschwendest du sonst eine Menge Zeit bei der Bildersuche.

Checkliste für gute Bild-Dateinamen:

• 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 Website aus.

Selbst fortschrittliche Bild-KI-Modelle können wichtige Details im Kontext übersehen oder schlichtweg falsch bzw. kontextunabhängig interpretieren.
Beispiel: Auf dem Bild ist ein „Konferenzraum" zu sehen, den die KI als „Wohnzimmer" interpretiert, weil u. a. eine Couch für Kunden zu sehen ist. Screenreader-Nutzer wundern sich, was ein Wohnzimmer mit deiner Werbeagentur zu tun hat …

Warum Menschen Alttexte schreiben sollten

Der Kontext ist entscheidend. KI kann nicht erkennen oder entscheiden, in welchem Zusammenhang du ein Bild verwendest und was du damit ausdrücken willst.

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

Aber worum geht es?

Möglicher Kontext: Du hast ein Unternehmen und bietest UX-Design an. Ein Partner-Unternehmen kümmert sich um die Webentwicklung. Du willst 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) bindest du auch geschickt SEO-relevante Begriffe ein, wie UX-Designerin, Entwickler und den Ort (für lokales SEO). KI-erzeugte Beschreibungen kannst du als Notlösung einsetzen. Wer die gesetzlichen Vorgaben und WCAG-Richtlinien ernst nimmt, sollte aber besser selbst entscheiden, was für die Nutzer relevant ist und Mehrwert hat.

KI kann helfen, aber nicht ersetzen.

Es gibt inzwischen kostenlose KI-Alttext-Generatoren (neben kostenpflichtigen Optionen), die du bei der Erstellung von Alttexten zu Hilfe nehmen kannst:

• ahrefs
• barrierefreies Design

Dort lädst du dein Bild hoch und erhältst Vorschläge für einen Alttext. Du kannst zwischen verschiedenen Sprachen wählen und optional den Kontext eintragen. ahrefs bietet sogar die Auswahl eines Schreibstils an (z. B. förmlich oder locker).

Am Ende zählt der Mensch bzw. dein Urteilsvermögen. Ob oder welchen Vorschlag du verwendest und wie weit du ihn selbst anpasst, kannst nur du entscheiden.

Website barrierefrei machen