Was ist ein Alternativtext (Alt-Text)?

Alternativtext (Alt-Text) ist eine textuelle Beschreibung von Bildern, Grafiken und anderen nicht textuellen Inhalten, die im HTML Attribut alt hinterlegt wird. Alt-Texte ermöglichen Screenreadern den Bildinhalt vorzulesen, sind essentiell für SEO und werden zunehmend auch von KI Systemen zur Bildinterpretation genutzt.

Seit Juni 2025 ist mit dem Barrierefreiheitsstärkungsgesetz (BFSG) die Bereitstellung von Alt-Texten für viele Unternehmen gesetzlich verpflichtend. Nach dem WCAG 2.2 Erfolgskriterium 1.1.1 muss jedem nicht textuellen Inhalt eine textuelle Alternative zugeordnet sein, die den gleichen Zweck erfüllt. Mehr dazu in unserem Artikel zu den WCAG Richtlinien.

Der Alt-Text ist damit ein Grundbaustein der digitalen Barrierefreiheit. Ohne Alt-Text bleiben Bilder für blinde und sehbehinderte Nutzer unsichtbar, und auch Suchmaschinen können den Bildinhalt nur unzureichend erfassen.

Alt-Texte sind in unseren Beratungsprojekten ein wiederkehrendes Thema. Vom Audit bestehender Bilder über die Nachrüstung großer Bestandskataloge bis zur Schulung von Content Teams begleiten wir die volle Bandbreite. Dabei kombinieren wir manuelle Qualitätsprüfung mit KI gestützter Bildbeschreibung — wir wissen, wo automatische Tools an ihre Grenzen kommen und wo menschliche Bewertung unverzichtbar bleibt.

Konkret unterstützen wir Teams beim barrierefreien Webdesign und der Umsetzung der BFSG Vorgaben. Dazu gehören Accessibility Audits, strukturiertes Accessibility Testing, die Optimierung von nicht textuellen Inhalten und die Beratung zu WCAG 2.2 Konformität.

Alt-Texte sind ein wesentliches Element der digitalen Barrierefreiheit und betreffen weit mehr als nur Screenreader Nutzer. Sie bilden eine Brücke zwischen visueller und textueller Information und sorgen dafür, dass alle Nutzer den gleichen Zugang zu Inhalten haben.

Konkret profitieren von Alt-Texten:

• Blinde und sehbehinderte Menschen: Alt-Texte werden von Screenreadern vorgelesen und ersetzen so das visuelle Bild.
• Nutzer mit langsamer Verbindung: Wenn ein Bild nicht lädt, zeigt der Browser den Alt-Text als Fallback an.
• Suchmaschinen wie Google: Crawler indexieren Alt-Texte und nutzen sie für die Bildersuche und das Ranking.
• KI Systeme und Voice Assistants: Sprachmodelle wie ChatGPT oder Gemini greifen auf Alt-Texte zurück, wenn sie Webseiten interpretieren.
• Nutzer mit kognitiven Einschränkungen: Klare textuelle Beschreibungen unterstützen das Verständnis komplexer Bilder.

Diese mehrfache Wirkung macht Alt-Texte zu einem klassischen Beispiel für Universal Design — eine Maßnahme, die für alle Nutzer einen Mehrwert schafft, nicht nur für Menschen mit Behinderungen. Wer Alt-Texte ernst nimmt, verbessert gleichzeitig Accessibility Testing, SEO und Nutzererlebnis insgesamt.

Effektive Alt-Texte folgen klaren Regeln. Diese Praktiken haben sich aus über zwei Jahrzehnten digitaler Barrierefreiheit entwickelt und finden sich im offiziellen W3C WAI Images Tutorial wieder.

Präzise und knapp beschreiben

Ein guter Alt-Text fasst den Bildinhalt in maximal 125 Zeichen zusammen. Diese Grenze stammt aus der Praxis: Screenreader lesen längere Texte zwar vor, doch verlieren Nutzer schnell den Kontext.

Kontext berücksichtigen

Der gleiche Apfel auf einem Foto kann je nach Kontext unterschiedlich beschrieben werden:

• In einem Rezept: alt="reife rote Äpfel im Korb"
• Im Bio Shop: alt="Bio Apfel Sorte Elstar"
• Im Botanik Artikel: alt="Apfel der Sorte Malus domestica im Anschnitt"

Der Alt-Text muss zur Information passen, die im Kontext der Seite vermittelt werden soll.

Redundante Phrasen vermeiden

Screenreader kündigen Bilder bereits als solche an. Phrasen wie Bild von ..., Foto eines ... oder Grafik die ... zeigt sind daher überflüssig und stören den Lesefluss.

Dekorative Bilder leer lassen

Trennlinien, Schmuck und Verzierungen brauchen einen leeren Alt-Text mit alt="". Screenreader überspringen diese Bilder dann komplett — das ist gewünscht und vermeidet akustisches Rauschen.

Funktionale Bilder als Funktion beschreiben

Eine Lupe als Icon im Suchfeld bekommt nicht alt="Lupe", sondern alt="Suchen". Bei verlinkten Bildern beschreibt der Alt-Text das Ziel des Links, nicht das Bild selbst. Mehr dazu im Artikel barrierefreie Icons im Webdesign.

Nicht jedes Bild braucht den gleichen Typ Alt-Text. Eine dekorative Trennlinie braucht etwas anderes als ein Datendiagramm. In der Praxis hat sich eine Einteilung in vier Levels bewährt, die direkt aus den WCAG Erfolgskriterien abgeleitet ist und sich bei Accessibility Audits als praxistaugliche Klassifikation erweist. Die folgende Tabelle und die Infografik darunter zeigen die Levels im Überblick — für Screenreader Nutzer als textuelle Tabelle, für sehende Nutzer zusätzlich als visuelles Bar Chart.

Wer Alt-Texte selbst implementiert, sollte die wichtigsten Patterns kennen. Hier eine Übersicht der häufigsten Fälle mit HTML Snippets aus der Praxis.

Informatives Bild: Klassischer Fall, der Alt-Text beschreibt den Bildinhalt knapp.

Dekoratives Bild: Eine Trennlinie oder Schmuck — Alt-Text leer lassen, damit Screenreader das Bild überspringen.

Funktionales Bild in Link oder Button: Funktion beschreiben, nicht das Bild selbst.

Komplexe Grafik mit Langbeschreibung: Kurzbeschreibung im Alt-Attribut, Details über figcaption oder im umliegenden Text.

In Accessibility Audits begegnen uns immer wieder die gleichen Probleme. Diese Liste hilft, die häufigsten Fallen schnell zu erkennen.

• Dateinamen als Alt-Text: alt="IMG_2398.jpg" — der Klassiker bei automatischem Upload. Screenreader lesen den Dateinamen vor und Nutzer hören kryptische Buchstaben Zahlen Kombinationen.
• Keyword Stuffing: alt="hund welpe labrador retriever günstig hundefutter haustier" — Google straft das als Spam ab und es hilft niemandem.
• Generische Beschreibungen: alt="Bild", alt="Foto", alt="Grafik" — keine echte Information, nur Pflichterfüllung auf dem Papier.
• Doppelte Information: Wenn das Bild bereits durch eine sichtbare Bildunterschrift beschrieben wird, sollte der Alt-Text leer sein, sonst hört der Nutzer alles doppelt.
• Verlinkte Bilder ohne Alt-Text: Ein Link mit Bild ohne Alt-Attribut macht das Linkziel für Screenreader Nutzer komplett unzugänglich. Laut WebAIM Million Report 2026 sind 45 Prozent aller Bilder ohne Alt-Text verlinkte Bilder — ein gravierendes Problem.
• Erfundene Inhalte: Wer den Bildinhalt nicht kennt, sollte nicht raten. Lieber einen kurzen, neutralen Alt-Text als eine erfundene Detailbeschreibung.

Eine systematische Prüfung im Rahmen eines Accessibility Audits deckt diese Fehler zuverlässig auf — und sorgt dafür, dass die Korrektur strukturiert statt punktuell erfolgt.

In Beratungsprojekten begegnen uns Alt-Texte regelmäßig in unterschiedlichsten Konstellationen — vom kleinen Dienstleister bis zum mittelständischen Online Shop mit umfangreichem Produktkatalog. Aus diesen Projekten haben wir drei klare Erkenntnisse gewonnen:

Erstens: KI gestützte Generierung mit Modellen wie Gemini liefert in vielen Fällen brauchbare Erstvorschläge. Doch gerade bei Produktbildern, wo Marken oder Sortenbezeichnungen relevant sind, die KI Modelle nicht kennen, ist menschliche Nachjustierung unverzichtbar. Reine Automatisierung führt zu generischen Beschreibungen, die weder SEO noch Barrierefreiheit echt weiterhelfen.

Zweitens: Bei großen Bestandskatalogen lohnt sich ein automatisierter Workflow. Wir nutzen für solche Fälle eigene n8n Pipelines, die Bilder aus dem CMS oder PIM System ziehen, durch ein KI Modell jagen und das Ergebnis als Vorschlag in die Redaktion zurückschreiben. So lässt sich auch ein großer Bestand strukturiert nachrüsten, ohne die Redaktion zu überlasten.

Drittens: Schulung der Content Teams ist genauso wichtig wie die Tools. Wer einmal verstanden hat, was ein guter Alt-Text leistet, schreibt für neue Bilder direkt bessere Beschreibungen — und der Bestand bleibt sauber. Reine Tool Lösungen ohne Verständnis im Team rutschen schnell wieder in alte Muster zurück.

Wer ähnliche Themen im eigenen Projekt klären will, findet bei uns sowohl Accessibility Audits als auch konkrete Hilfe bei der Umsetzung der BFSG Anforderungen und der WCAG 2.2 Konformität.

Die folgenden Antworten beruhen auf aktuellen WCAG 2.2 Vorgaben, dem deutschen Barrierefreiheitsstärkungsgesetz und unserer eigenen Praxis aus Beratungsprojekten. Für vertiefende Erklärungen verlinken wir auf die passenden Artikel im NCA Glossar für Barrierefreiheit.