Alternativtext (Alt-Text): was er ist und wie Sie ihn richtig schreiben

https://www.accessiway.com/de/accessibility-scannerWas ist Alternativtext (Alt-Text)

Alternativtext oder Alt-Text ist eine kurze Textbeschreibung, die über das Attribut alt des HTML-Tags <img> mit einem Bild verknüpft ist. Wenn ein Bild nicht sichtbar ist, tritt der Alt-Text an seine Stelle und überträgt dieselbe Information an eine Person, die sie sonst vollständig verpassen würde.

Der Punkt, den die meisten falsch verstehen: Alt-Text beschreibt nicht, wie ein Bild aussieht, sondern was das Bild im jeweiligen Kontext bedeutet: was es vermittelt, welche Funktion es erfüllt, warum es überhaupt da ist.

Alt-Text gibt es seit 1999, bereits in der allerersten Version der WCAG, und trotzdem bleibt er eines der am meisten vernachlässigten Elemente in der modernen Webentwicklung, obwohl er technisch denkbar einfach einzufügen ist.

Er ist nur einer von vielen Bausteinen: die vollständige Anleitung, um Ihre Website barrierefrei zu machen, zeigt Ihnen den kompletten Weg.

Wie Alternativtext für Screenreader funktioniert

Der Text steht im Attribut alt, das auf der Seite selbst normalerweise nicht sichtbar ist.

Ein Screenreader liest ihn vor, wenn er in der Lesereihenfolge der Seite auf das Bild trifft, sodass eine Person, die das Bild nicht sehen kann, trotzdem erfährt, was es zeigt oder bewirkt, genau an der Stelle, an der eine sehende Person darauf treffen würde.

Ist das Bild zugleich ein Link oder eine Schaltfläche, muss der Alt-Text die daraus folgende Aktion beschreiben, nicht das optische Erscheinungsbild: Ein Lupensymbol, das zur Suche auf einer Website dient, braucht einen Alt-Text wie „Website durchsuchen", nicht „Lupensymbol".

Screenreader kündigen von sich aus schon an, dass ein Element ein Link oder eine Schaltfläche ist. Deshalb ist es überflüssig, „Link" oder „hier klicken" zusätzlich im Alt-Text zu wiederholen, und sollte vermieden werden.

Fehlt das Attribut alt vollständig – nicht leer, sondern schlicht nicht vorhanden –, greifen viele Screenreader stattdessen auf den Dateinamen zurück, oft eine wenig hilfreiche Zeichenfolge wie IMG_4021.jpg oder ein langer automatisch generierter Upload-Pfad. Das ist eine schlechte Nutzererfahrung, denn es erzeugt Störgeräusche, ohne der zuhörenden Person einen brauchbaren Hinweis zu geben.

Wie Sie guten Alt-Text schreiben: bewährte Methoden

Guten Alt-Text zu schreiben bedeutet, sich eine Person vorzustellen, die das Bild nie sehen wird, während die Seite ihr vorgelesen wird.

Hier einige bewährte Methoden:

• Beschreiben Sie den Zweck des Bildes im Kontext: Bei einem Bild, das ein Konzept veranschaulicht, beschreiben Sie das Konzept, nicht die Bildkomposition oder die Farben.

• Halten Sie ihn kurz: meist ein Satz, oft innerhalb von 125 Zeichen, da manche Screenreader längeren Text abschneiden und ein zu ausführlicher Alt-Text das Zuhören verlangsamt.

• Vermeiden Sie Formulierungen wie „Bild von" oder „Foto von": Das Tag selbst signalisiert der assistiven Technologie bereits, dass es sich um ein Bild handelt, eine Wiederholung verschwendet nur wertvollen Platz.

• Wiederholen Sie keine Informationen, die im umgebenden Text oder in der Bildunterschrift bereits stehen: Steht neben einem Produktfoto bereits der Produktname in einem Absatz, kann sich der Alt-Text auf ein anderes, ergänzendes Detail konzentrieren.

• Enthält das Bild Text – ein Werbebanner, ein Logo mit Schriftzug – übernimm diesen Text wortgetreu in das Alt-Attribut, damit eine hörende Person dieselbe Information erhält wie eine lesende Person.

• Beenden Sie den Alt-Text mit einem Punkt: Die meisten Screenreader machen bei Satzzeichen eine kurze Pause, was die Beschreibung auf natürliche Weise vom nachfolgenden Inhalt trennt.

Alt-Text für besondere Fälle

Nicht jedes Bild verhält sich gleich, und einige wiederkehrende Kategorien erfordern eine Behandlung, die über die allgemeinen Regeln oben hinausgeht.

Alt-Text für dekorative Bilder

Fügt ein Bild dem Inhalt keine Information hinzu, besteht die richtige Lösung nicht darin, das Alt-Attribut wegzulassen, sondern es explizit leer zu setzen: alt="". Screenreader erkennen dieses Muster und überspringen das Bild lautlos, während ein fehlendes Attribut sie häufig dazu zwingt, stattdessen den Dateinamen vorzulesen, eine Information ohne jeden Wert für die zuhörende Person.

Alt-Text für Diagramme und Infografiken

Bei komplexen visuellen Inhalten wie Diagrammen, Karten oder Infografiken erfasst ein einzelner Satz als Alt-Text selten alles Relevante. Der Standardansatz ist ein kurzer Alt-Text, der die wichtigste Kernaussage zusammenfasst – etwa den Diagrammtyp und den allgemeinen Trend in den Daten –, kombiniert mit einer ausführlicheren Beschreibung im umgebenden Text oder einer gleichwertigen HTML-Datentabelle, damit eine Person, die das Bild nicht sehen kann, dieselben Daten erhält.

Alt-Text für Logos und Schaltflächen

Logos sind nie rein dekorativ: Sie sollten immer beschrieben werden, mit allen bedeutungstragenden Textelementen oder Symbolen, etwa „Logo von [Unternehmen] mit dem Slogan [Slogan]". Bei Schaltflächen und Bedienelementen, die durch ein Symbol dargestellt werden, sollte der Alt-Text die Aktion beschreiben, die die Schaltfläche beim Aktivieren auslöst, nicht das Symbol selbst: „Dokument drucken", nicht „Druckersymbol".

Alt-Text und Bilder-SEO

Über seine Rolle für die Barrierefreiheit hinaus ist Alt-Text auch ein Signal, das Suchmaschinen nutzen, um zu verstehen, was ein Bild zeigt, denn trotz Fortschritten bei der automatisierten Bilderkennung stützen sie sich bei der Klassifizierung und Indexierung von Bildern in der dedizierten Bildersuche (Google Bilder) weiterhin stark auf Text und Metadaten.

Gut geschriebener Alt-Text kann deshalb die Platzierung sowohl des Bildes als auch der Seite, die es enthält, in den Suchergebnissen unterstützen und liefert Crawlern zusätzlichen Kontext zum jeweiligen Thema.

Das rechtfertigt jedoch kein Überladen mit Suchbegriffen: Alt-Text mit sich wiederholenden Begriffen zu füllen („dog puppy labrador retriever cheap dog food") bringt keinen echten Mehrwert für die Barrierefreiheit und wird von den Algorithmen von Google als Spam-Signal gewertet, was der Platzierung schadet, die es eigentlich unterstützen sollte. Der richtige Ansatz bleibt eine knappe, präzise Beschreibung, die auf natürliche Weise ein oder zwei relevante Suchbegriffe nur dann enthält, wenn sie das Bild wirklich beschreiben.

Wie viele Websites noch immer keinen Alt-Text haben: die Daten der WebAIM Million 2026

Fehlender Alt-Text bleibt einer der häufigsten Barrierefreiheitsfehler im Web, obwohl er technisch denkbar einfach zu beheben ist.

Laut dem WebAIM Million 2026 Report, der die Startseiten der eine Million meistbesuchten Websites weltweit analysiert, fehlt bei 53,1 % der Startseiten mindestens einem Bild der Alt-Text, und 16,2 % aller untersuchten Bilder haben überhaupt keinen, bei durchschnittlich 66,6 Bildern pro Startseite, ein Anstieg von 13,6 % innerhalb eines einzigen Jahres.

Unter den Bildern, die überhaupt einen Alt-Text haben, enthalten 10,8 % fragwürdige oder sich wiederholende Beschreibungen, wie „Bild", „Grafik" oder einen rohen Dateinamen.

Damit zählt fehlender Alt-Text zu den sechs häufigsten Barrierefreiheitsfehlern, die der Report erfasst, eine Rangfolge, die seit sieben Jahren in Folge praktisch unverändert bleibt: ein Zeichen dafür, dass es sich um ein bekanntes Problem handelt.

Alt-Text nach WCAG und dem EAA

Alt-Text ist das allererste Erfolgskriterium in den Web Content Accessibility Guidelines (WCAG): Erfolgskriterium 1.1.1, „Nicht-Text-Inhalte", verlangt, dass jeder nicht-textliche Inhalt eine gleichwertige Textalternative hat. Genau weil es eine der am einfachsten automatisiert prüfbaren Anforderungen ist, gehört es auch zu den am häufigsten zitierten Punkten in US-amerikanischen Rechtsstreitigkeiten zur Barrierefreiheit im Web.

In Europa fällt Alt-Text unter die im European Accessibility Act (EAA) festgelegten Pflichten, der seit dem 28. Juni 2025 für eine breite Palette digitaler Produkte und Dienstleistungen verbindlich gilt und der ausdrücklich auf die WCAG-Konformität als Referenzstandard verweist.

Häufig gestellte Fragen zu Alternativtext

Braucht jedes Bild einen Alt-Text?

Nein, rein dekorative Bilder können ein leeres Attribut alt="" erhalten. Für informative Bilder, Schaltflächen, bildbasierte Links und alles, was eine Bedeutung vermittelt, ist er erforderlich.

Wie lang sollte Alt-Text sein?

Meist ein Satz, oft innerhalb von 125 Zeichen, da manche Screenreader längeren Text abschneiden. Bei komplexen Bildern wie Diagrammen funktioniert ein kurzer Alt-Text plus eine ausführlichere Beschreibung an anderer Stelle besser als ein einziges, langes Alt-Attribut.

Hilft Alt-Text auch bei der Suchmaschinenoptimierung?

Ja, neben der Barrierefreiheit hilft Alt-Text Suchmaschinen zu verstehen, was ein Bild zeigt, was die Platzierung in der Bildersuche unterstützt. Er sollte für Menschen geschrieben werden, nicht mit Suchbegriffen überladen.