Alt-Text für Bilder: Beispiele und Regeln

Der Alt-Text ist das am häufigsten leer gelassene Feld im ganzen Content-Management-System. Dabei kostet ein guter Alt-Text zehn Sekunden pro Bild und entscheidet darüber, ob ein blinder Nutzer den Inhalt versteht und ob Google das Bild einordnen kann. Für Barrierefreiheit und SEO ist er damit das billigste Werkzeug, das du auf einer Website hast.

Die Theorie dazu ist schnell erzählt. Interessant wird es bei den Beispielen, weil derselbe Alt-Text je nach Kontext des Bildes richtig oder falsch sein kann.

Was ein Alt-Text leistet

Das Alt-Attribut steht im HTML und beschreibt den Inhalt eines Bildes für alle, die es nicht sehen. Es wird an drei Stellen wirksam:

• Screenreader lesen den Alternativtext vor. Für blinde und stark sehbehinderte Benutzer ist das die einzige Möglichkeit, den Inhalt des Bildes zu erfassen.
• Suchmaschinen verwenden ihn, um das Bild besser zu verstehen. Google nennt das Alt-Attribut ausdrücklich als wichtiges Signal für die Bildersuche, also zählt es direkt für SEO.
• Fehlerfälle: Wird ein Bild nicht angezeigt, erscheint stattdessen der Alt-Text im Browser. Das passiert öfter, als man denkt, und ohne Angabe sehen Nutzer dort nichts.

Seit Juni 2025 kommt ein rechtlicher Punkt dazu. Das Barrierefreiheitsstärkungsgesetz verpflichtet viele Anbieter digitaler Dienstleistungen zur barrierefreien Gestaltung, und beschreibende Alternativtexte gehören zu den Grundlagen von Barrierefreiheit im Netz.

Gute und schlechte Beispiele

Die schnellste Art, ein Gefühl dafür zu bekommen, ist der direkte Vergleich. Dieselbe Datei, drei Qualitätsstufen:

Bild	Schlecht	Brauchbar	Gut
Foto einer Katze	`katze.jpg`	„Katze“	„Graue Katze leckt sich die Pfote“
Produktfoto	„Bild von Stehlampe“	„Stehlampe“	„Stehlampe aus Messing mit weißem Leinenschirm“
Diagramm	„Statistik“	„Diagramm Umsatz“	„Säulendiagramm: Umsatz steigt von 2024 bis 2026 um 18 Prozent“
Teamfoto	„team, agentur, berlin, seo“	„Unser Team“	„Vier Mitarbeiterinnen der Agentur vor dem Büroeingang“
Screenshot	„screenshot1“	„Einstellungen“	„Einstellungsmenü mit aktiviertem Dunkelmodus“
Logo im Kopfbereich	„logo“	„Firmenlogo“	„Imagebin“

Drei Muster fallen auf. Der schlechte Alt-Text beschreibt gar nichts, der brauchbare benennt nur die Kategorie, und der gute transportiert genau die Aussage, wegen der das Bild im Text steht. Am besten liest du ihn dir einmal laut vor: Wenn du danach weißt, was auf dem Bild zu sehen ist, passt er.

Die Regeln dahinter

Beschreibe, was wichtig ist. Ein Foto zeigt oft zwanzig Dinge, wichtig ist das eine, das zum Absatz gehört. Steht im Text etwas über Verpackungsmaterial, beschreibe den Karton und nicht die Wandfarbe dahinter.

Halte dich kurz. 80 bis 125 Zeichen sind ein guter Rahmen. Ältere Screenreader schneiden längere Texte ab, und ein Satz, den niemand zu Ende hört, hilft keinem Benutzer.

Lass „Bild von“ weg. Der Screenreader kündigt bereits an, dass ein Bild folgt, also solltest du die Zeichen lieber für den Inhalt verwenden.

Ein Keyword, wenn es passt. Das Haupt-Keyword darf im Alternativtext vorkommen, solange der Satz natürlich bleibt und das Keyword wirklich enthalten sein muss. Eine Aneinanderreihung von Keywords ist Spam und wirkt sich negativ aus.

Jedes Bild bekommt seinen eigenen Text. Identische Alt-Tags auf zwanzig Produktfotos helfen weder Suchmaschinen noch Nutzern dabei, die Seite zu verstehen.

Schreib in ganzen Aussagen. „Graue Katze leckt Pfote“ ist besser als „Katze grau Pfote“, auch wenn beides dieselben Wörter enthält.

Sonderfälle, bei denen die Regel anders lautet

Dekorative Bilder brauchen keinen beschreibenden Text. Trennlinien, Farbflächen und Stimmungsbilder ohne Aussage bekommen ein leeres Attribut (`alt=““`). Der Screenreader überspringt sie dann, statt „Grafik“ vorzulesen. Wichtig ist der Unterschied: leer lassen heißt `alt=““` im Code, nicht das Attribut weglassen.

Bilder mit Text gehören zu den häufigsten Fehlern. Steht die Information nur im Bild, muss sie in den Alternativtext. Ein Zitatbild braucht also das Zitat, nicht die Beschreibung „Zitat auf blauem Hintergrund“.

Verlinkte Bilder beschreiben nicht das Motiv, sondern das Ziel. Ein Produktfoto, das in den Warenkorb führt, bekommt den Text „Zum Warenkorb hinzufügen“.

Komplexe Diagramme passen selten in 125 Zeichen. Nimm die Kernaussage in den Alt-Text und schreib die Details in die Bildunterschrift oder den Fließtext. Beides zusammen ergibt ein vollständiges Bild.

Logos bekommen den Namen des Unternehmens, sonst nichts. Alles Weitere steht ohnehin auf der Webseite.

Was Suchmaschinen mit dem Alt-Text machen

Google liest das Alt-Attribut und nutzt es zusammen mit dem Dateinamen, der Bildunterschrift und dem umgebenden Text, um zu verstehen, worum es auf dem Bild geht. Je klarer diese Signale zusammenpassen, desto eher taucht das Bild in der Bildersuche auf.

Drei Dinge helfen dabei mehr als jede andere Maßnahme:

• Relevante Keywords im Kontext. Ein Keyword im Alt-Text ist sinnvoll, wenn es das Motiv wirklich beschreibt. Keywords, die nur dort stehen, weil sie ranken sollen, sind ein alter Fehler und wirken heute eher negativ.
• Ein sprechender Dateiname. `messing-stehlampe.jpg` sagt mehr als `IMG_4721.jpg`. Beides zusammen, Dateiname und Alt-Text, ergibt ein klares Bild.
• Passender umgebender Text. Ein Bild sollte dort stehen, wo der Fließtext dasselbe Thema behandelt. Zusätzlichen Kontext bekommst du geschenkt, wenn die Reihenfolge stimmt.

Im Quelltext sieht das am Ende so aus:

„`

alt=“Stehlampe aus Messing mit weißem Leinenschirm“>

„`

Mehr braucht es nicht. Wer das bei jedem Bild auf der Website durchzieht, hat die Grundlage für Barrierefreiheit und SEO gleichzeitig erledigt.

Fünf Fehler, die du vermeiden solltest

Diese Punkte sehe ich bei fast jeder Prüfung wieder, und alle fünf sind in Minuten behoben:

1. Keyword-Listen statt Beschreibung. „seo agentur berlin bilder optimieren“ ist kein Satz und hilft keinem Nutzer.
2. Derselbe Text auf allen Bildern. Zwanzig identische Alt-Texte sind dasselbe wie keiner. Jedes Element braucht seinen eigenen.
3. Das Beitragsbild ohne Angabe. Es wird über die Mediathek hinzugefügt und deshalb am häufigsten übersehen.
4. Alt-Text und Bildunterschrift identisch. Beide Felder haben verschiedene Aufgaben, also lohnt es sich, sie unterschiedlich zu füllen.
5. Dateinamen aus der Kamera. Wird kein Alt-Text angezeigt, liest der Screenreader den Dateinamen vor, und der lautet dann `DSC_0042.jpg`.

Alt-Text und Bildunterschrift sind nicht dasselbe

Diese beiden werden regelmäßig verwechselt, obwohl sie unterschiedliche Aufgaben haben.

• Der Alt-Text ersetzt das Bild. Er wird nur vorgelesen oder im Fehlerfall angezeigt und richtet sich an Benutzer, die das Motiv nicht sehen.
• Die Bildunterschrift ergänzt das Bild. Sie steht sichtbar unter dem Foto und wird von allen gelesen, oft sogar häufiger als der Fließtext.

Deshalb solltest du beide schreiben und nicht denselben Satz zweimal verwenden. Die Bildunterschrift darf einordnen und kommentieren, der Alt-Text beschreibt.

In WordPress pflegen

Der Weg dauert keine Minute: Mediathek öffnen, auf ein Bild klicken, das Feld Alternativtext ausfüllen. Der Text gilt ab dann für jede Stelle, an der du dieses Bild neu hinzufügst.

Zwei Punkte werden dabei oft übersehen:

1. Bereits eingefügte Bilder ändern sich nicht automatisch. Hast du ein Foto vor der Pflege in einen Beitrag gesetzt, musst du den Text im Block selbst nachtragen.
2. Das Beitragsbild wird vergessen. Es wird über die Mediathek gesetzt und taucht im Editor nicht als Block auf, bleibt also unbemerkt ohne Alt-Text.

Bei mehreren hundert Dateien lohnt ein Crawler, der alle leeren Alt-Attribute auflistet. Danach arbeitest du die Liste nach Wichtigkeit ab.

Was ohne Alt-Text passiert

Drei Dinge, in dieser Reihenfolge:

• Benutzer mit Screenreader hören den Dateinamen, also etwa `IMG_4721.jpg`, Zeichen für Zeichen vorgelesen. Der Inhalt des Bildes bleibt ihnen verborgen.
• Google kann das Motiv schlechter einordnen. In der Bildersuche taucht es dann kaum auf, obwohl die Seite selbst rankt.
• Lädt die Datei nicht, sieht jeder Besucher eine leere Fläche ohne Hinweis darauf, was dort stehen sollte.

Keiner dieser Punkte bringt eine Website zum Einsturz. Über hunderte Bilder hinweg kosten sie zusammen aber mehr, als zehn Sekunden pro Datei wert sind. Wie sich das in die übrige Bilderoptimierung einfügt, steht in unserer Übersicht zu Bilder-SEO.

Best Practices auf einen Blick

Diese Checkliste deckt die wichtigsten Punkte ab, wenn du einen Alt-Text erstellen möchtest:

• Beschreibt der Alt-Text den Inhalt des Bildes klar und in einem lesbaren Satz?
• Passt er zum Kontext des Absatzes, in dem das Bild steht?
• Enthält er höchstens ein Keyword, und wirkt das natürlich?
• Ist er kürzer als 125 Zeichen?
• Hat jedes Element auf der Seite seinen eigenen Alternativtext, inklusive Beitragsbild?
• Sind dekorative Elemente bewusst leer gelassen?

Sechs Fragen, die du beim Hinzufügen eines Bildes in zwanzig Sekunden durchgehst. Wichtig ist nur, dass du sie überhaupt stellst.

Häufige Fragen

Wie lang darf ein Alt-Text sein?

80 bis 125 Zeichen sind der praktische Rahmen. Längere Texte werden von manchen Screenreadern abgeschnitten.

Gehört das Keyword hinein?

Wenn es zum Motiv passt, ja. Wenn du es hineinzwingen musst, nein. Der Satz muss vorgelesen Sinn ergeben.

Brauchen dekorative Bilder einen Alt-Text?

Nein, sie bekommen ein leeres Attribut. Das ist eine bewusste Angabe und etwas anderes als ein fehlendes Attribut.

Was ist mit Bildern in sozialen Netzwerken?

Instagram, Facebook und LinkedIn bieten eigene Felder dafür, meist unter „Erweiterte Einstellungen“. Dieselben Regeln gelten dort unverändert.

Hilft eine KI beim Erstellen?

Als erster Entwurf ja. Sie sieht das Bild, kennt aber den Kontext deiner Seite nicht und beschreibt deshalb oft das Falsche. Lies jeden erzeugten Alt-Text, bevor du ihn übernimmst.

Kurz zusammengefasst

Beschreibe das, wegen dem das Bild im Text steht, bleib unter 125 Zeichen, lass „Bild von“ weg und gib jedem Motiv seinen eigenen Alt-Text. Dekoratives bekommt `alt=““`, Verlinktes beschreibt das Ziel, und das Beitragsbild nicht vergessen.