Alt-Texte richtig schreiben

Ein Alt-Text beantwortet genau eine Frage: Was geht jemandem verloren, der das Bild nicht sieht? Er beschreibt deshalb Funktion und Aussage des Bildes an dieser Stelle – nicht das Motiv, nicht die Bildkomposition und schon gar nicht den Dateinamen.

Das macht Alt-Texte zu einer der wenigen Stellen, an denen Barrierefreiheit vollständig vom Verständnis des Inhalts abhängt. Kein Werkzeug nimmt einem die Entscheidung ab, und genau deshalb bleibt sie der am häufigsten übersehene Punkt überhaupt: Im WebAIM-Million-Report vom Februar 2026 fehlte auf 53,1 % der untersuchten Startseiten mindestens ein Alt-Text; über alle Seiten hinweg war jedes sechste Bild (16,2 %) ohne Textalternative. Die gute Nachricht: Die Entscheidung folgt einer Logik, die nach ein paar Dutzend Bildern sitzt.

Das Wichtigste in Kürze

• Drei Arten von Bildern, drei Regeln: informative Bilder bekommen die Information, dekorative ein leeres alt="", funktionale das Ziel oder die Aktion.
• Ein leeres alt ist nicht dasselbe wie ein fehlendes. alt="" heißt „überspringen“; fehlt das Attribut, lesen Screenreader oft den Dateinamen vor.
• Der Kontext bestimmt den Text. Dasselbe Foto braucht im Reiseblog eine andere Beschreibung als im Kamera-Testbericht.
• Kein „Bild von“ und kein „Foto von“. Screenreader kündigen „Grafik“ von selbst an – die Einleitung ist doppelt gemoppelt.
• Eine harte Zeichengrenze gibt es nicht. Die oft zitierten 125 Zeichen stehen weder in der WCAG noch in der HTML-Spezifikation; als Faustwert für einen Satz sind sie trotzdem brauchbar.
• Text im Bild gehört wörtlich in den Alt-Text. Steht auf dem Banner „20 % Rabatt bis Sonntag“, muss genau das ankommen.
• Rechtsgrundlage ist WCAG 1.1.1 „Nicht-Text-Inhalte“ (Stufe A) – das erste Erfolgskriterium der Norm und Bestandteil jeder BITV-Prüfung.

Abgrenzung – hier steht, wie du formulierst. Die drei Bildarten, Länge, leeres alt und der Prüfweg. Im Zweifelsfall, ob ein Bild überhaupt eine Beschreibung braucht, hilft die Alt-Text-Entscheidungshilfe. Dateiname, Format, srcset und das LCP-Bild behandelt Bild-SEO.

Drei Arten von Bildern

Bevor ich einen Alt-Text formuliere, ordne ich das Bild einer von drei Gruppen zu. Daraus ergibt sich fast alles Weitere:

Informativ ist ein Bild, wenn es Inhalt beisteuert, der sonst nirgends steht. Der Alt-Text nennt dann das, was man wissen muss – nicht alles, was zu sehen ist.

Dekorativ ist ein Bild, wenn der umgebende Text ohne es vollständig bleibt. Solche Bilder bekommen ein leeres alt="", damit sie übersprungen werden. Das ist kein Nachlassen, sondern eine bewusste Entscheidung: Jede überflüssige Ansage kostet Aufmerksamkeit.

Funktional ist ein Bild, das selbst ein Link oder ein Button ist. Dann zählt, was passiert, wenn man es aktiviert – dazu unten mehr.

Die Grenze verläuft nicht am Motiv, sondern am Zweck. Dasselbe Porträt kann auf der Teamseite informativ und im Blog-Layout dekorativ sein.

Wer bei einem konkreten Bild unsicher ist, kommt mit der Alt-Text-Entscheidungshilfe in drei Fragen zum richtigen alt – inklusive Code-Beispiel und Satzgerüst für den jeweiligen Fall. Sie kennt neben den drei Gruppen oben auch die beiden Sonderfälle, die in der Praxis am häufigsten schiefgehen: Text im Bild und Datengrafiken.

Kontext entscheidet, nicht das Motiv

Genau hier scheitern Alt-Texte, die aus einer Bilddatenbank oder aus einem Content-Management-System kommen: Sie hängen am Bild, nicht an der Seite.

Deshalb schreib ich den Alt-Text nie beim Hochladen, sondern immer erst, wenn der Absatz drumherum steht. Die Frage „Was wiederholt der Text ohnehin schon?“ beantwortet sich sonst gar nicht.

Ein zweites Muster aus derselben Ecke: Bild und Text im selben Link. Dann trägt der Text die Aussage, und das Bild wird dekorativ – sonst hört man alles zweimal.

<!-- Bild und Text im selben Link: Bild bekommt ein leeres alt -->
<a href="/produkt/stuhl.html">
  <img src="stuhl.jpg" alt="" />
  Bürostuhl „Ergo 200"
</a>

Leeres alt ist nicht kein alt

Das ist der wichtigste technische Punkt der ganzen Seite, und er wird ständig verwechselt. Ein leeres alt="" sagt der assistiven Technik aktiv: Hier gibt es nichts zu hören. Ein fehlendes alt lässt sie raten – und geraten wird meist mit dem Dateinamen.

<!-- Dekorativ: wird korrekt übersprungen -->
<img src="muster.svg" alt="" />

<!-- Fehlt das alt ganz: Screenreader liest oft den Dateinamen vor -->
<img src="IMG_4821.jpg" />

Deshalb hat bei mir jedes <img> ein alt-Attribut, und sei es leer. Ein Leerzeichen darin (alt=" ") ist übrigens kein Ersatz – es ist ein Alt-Text, der aus einem Leerzeichen besteht, und wird von Prüfwerkzeugen zu Recht angemeckert.

Wie lang darf ein Alt-Text sein

So kurz wie möglich, so lang wie nötig – der Satz ist abgegriffen, trifft es aber. In der Praxis kommen die meisten informativen Bilder mit einem Satz aus, viele mit einem Halbsatz.

Eine feste Obergrenze gibt es nicht. Die 125 Zeichen, die durchs Netz geistern, stammen aus dem Verhalten älterer Screenreader-Versionen und stehen in keiner Norm. Trotzdem ist der Wert ein brauchbarer Warnhinweis: Wer deutlich darüber liegt, beschreibt meist etwas, das in den Fließtext gehört.

Für komplexe Inhalte gilt das Zwei-Ebenen-Prinzip:

<figure>
  <img
    src="umsatz-2025.svg"
    alt="Umsatz 2025: Anstieg von 1,2 auf 1,9 Millionen Euro, stärkster Sprung im Q3"
  />
  <figcaption>Umsatzentwicklung 2025 nach Quartalen</figcaption>
</figure>

Der alt liefert die Kernaussage, die Details stehen im Text daneben oder in einer echten Datentabelle. Das veraltete longdesc-Attribut ist dafür kein Weg mehr – es wurde aus HTML entfernt und von keinem verbreiteten Browser sinnvoll unterstützt.

Wichtig bei <figure>: alt und figcaption sollen einander ergänzen, nicht wiederholen. Sind beide identisch, hört man denselben Satz zweimal. Wie das Zusammenspiel gedacht ist, steht bei figure und figcaption.

Funktionale Bilder: das Ziel zählt

Ist ein Bild verlinkt oder ein Button, beschreibt der Alt-Text die Funktion:

<!-- Logo, das zur Startseite führt -->
<a href="/index.html"><img src="logo.svg" alt="Zur Startseite" /></a>

<!-- Button mit reinem Bildinhalt -->
<button type="submit"><img src="lupe.svg" alt="Suchen" /></button>

„Firmenlogo“ wäre hier der klassische Fehlgriff: Es beschreibt das Motiv, aber nicht, was beim Klick passiert. Bei Inline-SVG gelten dieselben Regeln in anderer Syntax – das behandelt Icons & SVGs.

Ein Sonderfall mit eigener Norm: Enthält der Link sichtbaren Text und soll der Alt-Text ihn ergänzen, muss der sichtbare Text im zugänglichen Namen vorkommen – sonst greift 2.5.3 „Beschriftung im Namen“ nicht mehr, und die Sprachsteuerung findet das Element nicht.

Sonderfälle, die immer wieder auftauchen

Diagramme und Infografiken. Kernaussage in den alt, Zahlen in den Fließtext oder in eine Tabelle. Ein Alt-Text, der alle Datenpunkte aufzählt, ist als Sprachausgabe unbrauchbar.

Text im Bild. Der sichtbare Text gehört wörtlich in den alt. Und die Grundsatzfrage gleich dazu: Nach 1.4.5 „Bilder von Text“ sollen Textinhalte gar nicht erst als Grafik ausgeliefert werden, wenn echter Text möglich ist.

Logos. Im Link zur Startseite: das Ziel. Als reine Bildmarke im Fließtext: der Firmenname. In einer Referenzliste: der Name des Unternehmens, denn genau darum geht es dort.

Porträts. Auf einer Teamseite reicht der Name, weil er die Information ist. In einem Artikel über Mimik kann das Aussehen die Information sein. Äußerlichkeiten beschreibe ich nur, wenn sie im Kontext etwas bedeuten.

Bildergalerien. Jedes Bild braucht seinen eigenen Alt-Text. Wo das nicht leistbar ist, hilft die Position als Kachel-Link („Bild 3 von 24 öffnen“) immer noch mehr als ein generischer Platzhalter für alle.

Karten und Pläne. Eine Landkarte lässt sich selten sinnvoll beschreiben. Was hilft, ist die Information dahinter: Adresse, Anfahrt, Öffnungszeiten als Text neben der Karte.

CAPTCHAs. WCAG 1.1.1 verlangt hier ausdrücklich eine Beschreibung des Zwecks („Bildrätsel zur Spam-Abwehr“) und zusätzlich eine Alternative über einen anderen Sinneskanal.

CSS-Hintergrundbilder. Sie haben kein alt. Trägt ein Bild Bedeutung, ist die Einbindung per CSS ohnehin der falsche Weg – dann gehört es als <img> ins Markup. Reine Deko per background-image ist dagegen genau richtig.

Was nicht ins alt gehört

• „Bild von …“, „Grafik zeigt …“. Der Screenreader sagt die Rolle bereits an.
• Der Dateiname. alt="header-final-v3.jpg" ist kein Alt-Text, sondern ein Ausrutscher der Redaktion.
• Keyword-Ketten. alt ist kein SEO-Werkzeug im engeren Sinn. Suchmaschinen werten das Attribut zwar aus – dazu mehr unter Bild-SEO –, aber vollgestopfte Alt-Texte schaden mehr, als sie nutzen.
• Copyright und Bildnachweis. Gehört in die Bildunterschrift, nicht in die Textalternative.
• Der komplette Fließtext noch einmal. Wenn der Absatz das Bild schon erklärt, ist alt="" die richtige Antwort.

Und ein Attribut, das gern verwechselt wird: title ist kein Ersatz für alt. Es erscheint als Tooltip, taucht auf Touchgeräten gar nicht auf und wird von Screenreadern uneinheitlich behandelt. Als zusätzliche Information taugt es kaum, als Textalternative gar nicht.

Alt-Texte aus der KI

Stand Juli 2026 schlagen die meisten Redaktionssysteme automatisch Alt-Texte vor, und die Beschreibungen sind sprachlich meist ordentlich. Ihre Schwäche liegt woanders: Ein Modell sieht das Bild, aber nicht die Seite. Es weiß nicht, ob das Foto den Absatz belegt oder ihn nur schmückt, ob das Bild ein Link ist und wohin er führt.

Damit erzeugt die Automatik zuverlässig genau die Sorte Alt-Text, die formal vorhanden und inhaltlich falsch ist – „Ein Sonnenuntergang über Wasser“ für eine Galerie-Kachel, die zum Album führt. Als Vorschlag zum Überarbeiten ist das nützlich, als Standardeinstellung ohne Kontrolle nicht. Ich nehme die Vorschläge gern als Rohmaterial und entscheide danach in Ruhe, ob das Bild überhaupt einen Text braucht.

So prüfst du deine Alt-Texte

1. Bilder ausblenden. In den Entwicklerwerkzeugen die Bilder abschalten oder eine Textansicht öffnen. Was jetzt fehlt, sollte im Alt-Text stehen.
2. Alt-Texte sichtbar machen. Die Web Developer Toolbar oder ein Lesezeichen-Skript blendet alle alt-Werte im Layout ein – so siehst du Dubletten und leere Attribute auf einen Blick.
3. Automatisch gegenprüfen. Ein Prüfwerkzeug wie axe DevTools oder WAVE findet fehlende Attribute und Dateinamen im alt zuverlässig, siehe Tools für die Prüfung. Für eine einzelne Seite ohne Installation reicht der Struktur-Check; einen einzelnen Entwurf nimmt das Prüffeld der Alt-Text-Entscheidungshilfe auseinander.
4. Mit dem Screenreader hören. Nur so merkst du, ob der Text als gesprochener Satz funktioniert. Der Einstieg steht bei Mit NVDA testen.
5. Vorlesen lassen. Der beste Test kostet nichts: Jemandem den Absatz plus Alt-Text vorlesen, ohne das Bild zu zeigen. Wenn Rückfragen kommen, fehlt etwas.

Häufige Fehler

• alt ganz weggelassen. Führt zum vorgelesenen Dateinamen.
• Dekobild mit beschreibendem alt. Bläht die Ausgabe mit Belanglosem auf.
• „Bild von …“ als Einleitung. Redundant und kostet bei jedem Bild Zeit.
• Ein Alt-Text für alle Vorkommen. Derselbe Text auf Kachel, Detailseite und im Artikel passt höchstens an einer Stelle.
• Text im Bild ohne Textalternative. Rabattaktionen und Termine verschwinden komplett für alle, die das Bild nicht sehen.
• alt und figcaption identisch. Derselbe Satz zweimal hintereinander.
• Alt-Texte aus der Bildverwaltung übernommen. Die kennt den Kontext nicht.
• Keyword-Stuffing. Schadet der Nutzung und bringt beim Ranking nichts.

Häufige Fragen

Hilft ein guter Alt-Text auch der Suchmaschine?

Ja, aber anders als oft erhofft. Suchmaschinen werten alt für die Bildersuche und für das Verständnis der Seite aus – ein weiteres Beispiel dafür, wie Semantik und Auffindbarkeit zusammenfallen. Ein beschreibender Satz reicht dafür völlig; Keyword-Ketten bringen nichts und machen die Seite für Screenreader schlechter.

Was ist mit Bildern, die reine Deko sind – wirklich leer lassen?

Ja. Ein leeres alt="" ist die vorgesehene Auszeichnung für dekorative Bilder und alles andere als nachlässig. Die Alternative wäre eine Ansage über ein Bild, das niemandem etwas sagt. Wichtig ist nur, dass das Attribut vorhanden ist – weglassen ist etwas anderes als leer lassen.

Wie beschreibe ich ein Diagramm sinnvoll?

Mit zwei Ebenen: Die Kernaussage kommt in den alt („Umsatz 2025: Anstieg von 1,2 auf 1,9 Millionen Euro“), die Zahlen in eine Tabelle oder in den Fließtext direkt darunter. Alle Datenpunkte in ein Attribut zu packen, erzeugt eine Sprachausgabe, der niemand folgen kann.

Zählen Emojis und Icons als Bilder?

Emojis sind Textzeichen und werden vorgelesen – meist mit ihrem offiziellen Namen, was mitten im Satz überraschend klingt. Sparsam einsetzen und nie als einzigen Träger einer Information. Icons als Inline-SVG folgen eigenen Regeln, weil sie kein alt-Attribut kennen.

Reicht ein Alt-Text für die BITV-Prüfung?

Für den Prüfschritt zu 1.1.1 ja, sofern er die Aussage tatsächlich transportiert. Die Prüfung schaut aber genau darauf, ob dekorative Bilder korrekt ausgezeichnet sind und ob funktionale Bilder das Ziel beschreiben – ein formal vorhandener, inhaltlich falscher Alt-Text besteht sie nicht.

Fazit

Ein Alt-Text vermittelt Funktion und Aussage eines Bildes im Kontext: knapp, ohne „Foto von“, und je nach Art des Bildes informativ, leer oder zielbeschreibend. Die Grundfrage bleibt immer dieselbe – was ginge ohne das Bild verloren?

Zwei technische Punkte entscheiden den Rest: die Unterscheidung zwischen leerem und fehlendem alt, und die Einsicht, dass der Text zur Seite gehört und nicht zur Datei. Wer beides beherzigt, erfüllt nicht nur 1.1.1 Nicht-Text-Inhalte, sondern schreibt Alternativen, die auch als gesprochener Satz funktionieren.

Quellen

• Images Tutorial (W3C WAI – Einordnung informativ, dekorativ, funktional samt Entscheidungsbaum)
• The WebAIM Million 2026 (WebAIM – 53,1 % der Startseiten mit fehlenden Alt-Texten, 16,2 % aller Bilder ohne Alternative)