Alt-Text-Entscheidungshilfe

Das Schwierige am Alternativtext ist nicht das Formulieren, sondern die Vorfrage: Braucht dieses Bild überhaupt eine Beschreibung – und wenn ja, worüber? Diese Entscheidungshilfe klärt das in höchstens drei Fragen und liefert danach das Verdikt, ein fertiges Code-Beispiel, ein Satzgerüst und je ein Richtig- und Falsch-Beispiel für genau deinen Fall.

<img src="/img/trennlinie.svg" alt="" width="800" height="4">

<img src="fokus-ring.png"
     alt="Eingabefeld mit deutlich sichtbarem, drei Pixel breitem Fokusrahmen">

<p>Der Notausgang liegt links neben der Rezeption.</p>
<img src="lageplan-ausschnitt.png" alt="">

<figure>
  <img src="absprungrate.png"
       alt="Balken fallen von 100 auf 38 Prozent, der größte Absprung liegt nach dem Login">
  <figcaption>Absprünge im Bestellprozess, Januar bis Juni 2026</figcaption>
</figure>

<a href="/warenkorb.html">
  <img src="/img/warenkorb.svg" alt="Warenkorb öffnen">
</a>

<button type="button">
  <img src="/img/schliessen.svg" alt="Dialog schließen">
</button>

<a href="/wcag-und-bfsg/bfsg-checkliste.html">
  <img src="/img/checkliste.svg" alt="">
  BFSG-Checkliste für Websites
</a>

<img src="aktion-banner.png"
     alt="20 Prozent Rabatt auf alle Kurse bis 31. August 2026">

<a href="/">
  <img src="/img/logo.svg" alt="Musterfirma – zur Startseite">
</a>

<figure>
  <img src="kontrastfehler.png"
       alt="Balkendiagramm: Kontrastfehler sind mit Abstand der häufigste Verstoß"
       aria-describedby="diagramm-daten">
  <figcaption>Häufigste WCAG-Verstöße, WebAIM Million 2026</figcaption>
</figure>
<table id="diagramm-daten">…</table>

<img src="umsatz-2026.png"
     alt="Liniendiagramm: Umsatz steigt von Januar bis Juni um 18 Prozent – Werte in der Tabelle darunter">

Das Wichtigste in Kürze

• Ein Bild hat immer genau eine von fünf Rollen: dekorativ, informativ, funktional, Text im Bild oder Datengrafik. Aus der Rolle folgt die Entscheidung – nicht aus dem Motiv.
• alt="" und ein fehlendes alt sind das Gegenteil voneinander: Das leere Attribut nimmt das Bild aus der Ausgabe, ein fehlendes Attribut lässt Screenreader die Bildadresse vorlesen.
• Bei einem Bild-Link wird das alt zum Linktext. Es beschreibt also das Ziel („Warenkorb öffnen“), nicht die Grafik („Einkaufswagen-Symbol“).
• Steht dieselbe Information schon im Absatz daneben, ist alt="" richtig. Doppelte Ansagen sind keine zusätzliche Barrierefreiheit, sondern Lärm.
• Diagramme brauchen zwei Ebenen: die Aussage in einem Satz im alt, die Zahlen als Datentabelle oder Fließtext. Ein alt mit zwölf Messwerten ist nicht navigierbar.
• Maßgeblich ist WCAG 1.1.1 „Nicht-Text-Inhalte“ auf Stufe A – über EN 301 549 damit auch für alle Angebote, die unter das BFSG fallen.
• Die Entscheidungshilfe generiert nichts. Sie kennt dein Bild nicht, sie kennt nur die Entscheidung – und begründet sie. Kein Upload, kein Konto, keine E-Mail-Adresse.
• Stand August 2026 sind die deutschsprachigen Alt-Text-Werkzeuge im Markt durchweg KI-Generatoren. Sie liefern auch dann eine Beschreibung, wenn alt="" richtig gewesen wäre.

Die fünf Rollen eines Bildes

Alternativtexte werden meist als Schreibaufgabe behandelt. Das ist der Grund, warum so viele danebengehen: Wer eine Beschreibung schreiben soll, beschreibt das Bild. Gefragt ist aber etwas anderes – ein Ersatz, der dieselbe Funktion erfüllt wie das Bild.

Und diese Funktion ist immer eine von fünf:

Dekoration. Trennlinien, Stimmungsbilder, Hintergrundgrafiken. Nimmt man sie weg, fehlt keine Information. Sie bekommen alt="" – oder sie gehören gar nicht ins HTML, sondern ins CSS.

Information. Screenshots, Produktabbildungen, Skizzen. Hier zählt nicht, was alles zu sehen ist, sondern was für die Aussage der Seite gebraucht wird.

Funktion. Das Bild sitzt in einem Link oder Button. Dann ist es kein Bild mehr, sondern ein Bedienelement – und der Alternativtext ist sein Name. Wie sich Link und Button dabei unterscheiden, steht unter Buttons vs. Links; für Icon-Buttons ohne Beschriftung gilt zusätzlich das, was unter Icons und SVGs beschrieben ist.

Text im Bild. Werbebanner, Zitatgrafiken, abfotografierte Preislisten. WCAG 1.4.5 „Bilder von Text“ verlangt hier eigentlich echten Text; solange die Grafik bleibt, muss der Wortlaut vollständig ins alt. Logos sind der einzige ausdrücklich ausgenommene Fall.

Datengrafik. Balken, Linien, Karten. Der Alternativtext trägt die Aussage, die Zahlen gehören in eine Datentabelle oder in den Fließtext – wie das im Detail aussieht, zeigen die barrierefreien Diagramme.

Warum alt="" etwas anderes ist als kein alt

Diese beiden Zeilen sehen fast gleich aus und bewirken das Gegenteil:

<img src="ornament-2026-final-v3.svg" alt="">
<img src="ornament-2026-final-v3.svg">

Die erste Zeile sagt: Dieses Bild ist bewusst ohne Alternative. Screenreader nehmen es aus der Ausgabe und überspringen es kommentarlos. Die zweite Zeile sagt gar nichts – und weil ein Bild ohne jede Alternative für Screenreader ein Problem ist, behelfen sich die meisten damit, die Bildadresse vorzulesen. Aus der Trennlinie wird dann „ornament strich 2026 final v3 punkt s v g“.

Das ist der Grund, warum die häufigste Prüfmeldung überhaupt „img ohne alt“ lautet und warum sie im Struktur-Check als Fehler geführt wird, ein leeres alt dagegen nur als Hinweis. Ein CMS, das das Attribut bei leerem Feld weglässt statt es leer zu schreiben, produziert diesen Fehler serienweise – ein Blick in die Ausgabe des eigenen Systems lohnt sich.

Der häufigste Irrtum: das Motiv beschreiben

In der Praxis begegnet mir eine Sorte Alt-Text am häufigsten, und sie ist immer nach demselben Muster gebaut: sachlich richtig, vollständig – und am Zweck vorbei.

Ein Beispiel aus einem Relaunch, den ich begleitet habe. Auf der Seite ging es um sichtbaren Fokus, daneben ein Screenshot. Der Alt-Text lautete: „Screenshot eines Anmeldeformulars auf weißem Hintergrund mit zwei Eingabefeldern und einem blauen Button“. Alles zutreffend. Nur kam der Fokusrahmen, um den es im ganzen Absatz ging, darin nicht vor.

Der Test, der das zuverlässig aufdeckt, dauert zehn Sekunden: Lies den Absatz vor und ersetze das Bild durch deinen Alt-Text. Ergibt der Text weiterhin Sinn, stimmt die Beschreibung. Klingt sie wie ein Einschub aus einem anderen Dokument, beschreibt sie das Motiv statt der Aussage.

Daraus folgt auch, dass derselbe Screenshot auf zwei Seiten zwei verschiedene Alt-Texte braucht. Alternativtexte sind nichts, was zum Bild gehört – sie gehören zur Stelle, an der es steht. Genau deshalb funktioniert kein Generator, der nur das Bild kennt.

So prüfst du einen fertigen Alt-Text

Für den Moment, in dem der Text schon dasteht und du wissen willst, ob er trägt:

1. Rolle bestimmen. Dekorativ, informativ, funktional, Text im Bild oder Datengrafik? Die Fragen oben im Werkzeug führen in höchstens drei Schritten dorthin.
2. Vorlesetest machen. Absatz lesen, Bild durch den Alt-Text ersetzen. Bleibt die Aussage stehen?
3. Auf Füllwörter prüfen. „Bild von“, „Grafik“, „Foto“ am Anfang streichen – die Rolle sagt der Screenreader von sich aus an. Dasselbe gilt für „Logo“ und „Icon“ am Ende.
4. Gegen die Bildunterschrift halten. Steht dort derselbe Satz, wird er zweimal vorgelesen. Dann kürzen oder auf alt="" gehen; die Aufgabenteilung erklärt figure und figcaption.
5. Länge einschätzen. Über 125 Zeichen ist kein Verstoß, aber ein Signal: Gehört der Rest in eine Langbeschreibung?
6. Im Prüffeld gegenlesen. Das Feld unter dem Ergebnis prüft die neun Muster, die sich maschinell erkennen lassen – Dateinamen, Platzhalter, Rollenwörter, Widersprüche zur getroffenen Entscheidung.
7. Mit dem Screenreader hören. Der letzte Schritt bleibt Handarbeit: mit NVDA testen oder mit VoiceOver testen.

Was diese Entscheidungshilfe nicht kann

Sie kennt dein Bild nicht. Es gibt keinen Upload, keine Bildanalyse, keinen KI-Vorschlag – und das ist Absicht, nicht ein fehlendes Feature. Ob ein Alternativtext zutrifft, kann grundsätzlich kein Werkzeug beurteilen, weder dieses noch axe, WAVE oder Lighthouse. Sie alle prüfen, ob ein alt da ist, nicht, ob es stimmt. Was automatische Prüfung leisten kann und wo sie endet, ordnet der Vergleich der Prüfwerkzeuge ein.

Wer eine Formulierung generiert haben möchte, findet den Abschnitt zu KI-generierten Alternativtexten unter Alt-Texte richtig schreiben. Und wer wissen will, warum ein guter Alt-Text nebenbei auch der Bildersuche hilft, findet das unter Bild-SEO – in dieser Reihenfolge, nicht umgekehrt.

Häufige Fragen

Wann ist alt="" richtig und wann ein Fehler?

Richtig ist alt="" in genau drei Fällen: bei reiner Dekoration, wenn dieselbe Information schon im Text daneben steht, und wenn ein Bild zusammen mit sichtbarem Text im selben Link liegt. Falsch ist es immer dann, wenn das Bild allein ein Bedienelement ist – ein Bild-Link mit leerem alt hat überhaupt keinen Namen.

Wie lang darf ein Alt-Text sein?

Es gibt kein Limit in der Norm. Die verbreiteten 125 Zeichen sind eine Faustregel, kein Grenzwert – sie stammen aus alten Screenreader-Versionen. Praktisch ist die Frage wichtiger als die Zahl: Alles, was länger als ein, zwei Sätze wird, ist meist eine Langbeschreibung und gehört als Text auf die Seite, wo alle sie lesen können.

Muss ein Alt-Text Keywords enthalten?

Nein. Ein Alternativtext ist eine Textalternative für Menschen, die das Bild nicht sehen – das ist seine einzige Aufgabe. Dass Suchmaschinen ihn mitlesen, ist ein Nebeneffekt. Ein passender Alt-Text enthält die relevanten Begriffe ohnehin; ein mit Keywords gefüllter ist für Screenreader-Nutzer unbrauchbar und für Google seit Jahren kein Vorteil mehr.

Gilt dieselbe Entscheidung auch in Word und PDF?

Ja. Word, PowerPoint und PDF kennen dasselbe Konzept, inklusive der Markierung „als dekorativ kennzeichnen“ – das ist dort das Gegenstück zu alt="". Die Fragen oben führen also auch für Dokumente zum richtigen Ergebnis. Die Umsetzung im jeweiligen Programm beschreiben PDF-Barrierefreiheit und barrierefreie Office-Dokumente.

Werden meine Eingaben gespeichert?

Nein. Das Werkzeug hat kein Backend: Die Fragen, das Ergebnis und das Prüffeld laufen vollständig in deinem Browser. Es wird nichts übertragen, nichts gespeichert und keine E-Mail-Adresse verlangt.

Verwandte Themen

• Alt-Texte richtig schreiben – der ausführliche Leitfaden mit Formulierungsmustern für alle Bildarten
• WCAG 1.1.1 Nicht-Text-Inhalte – das Kriterium, aus dem die Pflicht folgt
• Icons und SVGs – der schwierigste Sonderfall: Grafiken ohne img-Element
• figure und figcaption – wie sich Bildunterschrift und Alternativtext die Arbeit teilen
• Struktur-Check – prüft eine ganze Seite darauf, ob Bilder überhaupt ein alt-Attribut haben

Quellen

• W3C WAI: Images Tutorial – die Entscheidungssystematik nach Bildrollen, auf der auch dieses Werkzeug aufsetzt
• Understanding SC 1.1.1: Non-text Content – Normtext und Auslegung des W3C
• Understanding SC 1.4.5: Images of Text – inklusive der Ausnahme für Logos und Markenzeichen