NCA Social Media
Erstellt:
Aktualisiert:
Autor:
Roland Golla
Isometrische Illustration Browser mit grünem ALT TEXT Schriftzug und Rakete als Header

Inhaltsverzeichnis

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-Text mit NCA: Schnelle Hilfe vom Experten

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.

Lass uns sprechen

Finde das passende Angebot für dein Projekt

Anfrage-Konfiguration

Starten Sie Ihre Anfrage

Projektart
Infos
Nachricht

Eliminierung technischer Schulden mit PHPStan, Rector PHP und PHPUnit. Über 20 Jahre Praxiserfahrung in skalierbaren Backends.

CORE EXPERTISE

Gesetzliche Konformität & Inklusion. Optimierung von Performance und Conversion durch radikal nutzerzentriertes, universelles Design.

BFSG COMPLIANT

Skalierbare KI-Systeme mit echtem Code Ownership. CI/CD, Backup-Strategien und Infrastruktur, die mit deinem Team wächst.

ENTERPRISE READY

Warum Alt-Texte für die digitale Barrierefreiheit zählen

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.

Best Practices für die Erstellung von Alt-Texten

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.

Vier Levels von Alt-Texten: Welche Bilder brauchen welche Beschreibung?

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.

Level Bild-Typ Alt-Text Strategie
Level 1: Dekorativ Trennlinien, Schmuckbilder, reine Verzierungen Leerer Alt-Text alt=""
Level 2: Funktional Icons, Buttons, Logos in Links Funktion beschreiben, nicht das Bild
Level 3: Informativ Foto, Produktbild, Illustration Inhalt präzise und knapp beschreiben
Level 4: Komplex Diagramm, Infografik, Karte Kurzbeschreibung plus Langtext im Fließtext
Bar Chart Infografik vier ansteigende grüne Balken zeigt Alt Text Levels 1 bis 4

Alt-Text in der Praxis: HTML Code-Beispiele

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.

Code: 
          
<img src="/team-meeting.jpg" alt="Vier Entwickler diskutieren am Whiteboard mit Code Skizzen">

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

Code: 
          
<img src="/divider.svg" alt="">

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

Code: 
          
<a href="/suche">
  <img src="/lupe.svg" alt="Suche öffnen">
</a>

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

Code: 
          
<figure>
  <img src="/diagramm.png" alt="Balkendiagramm Umsatzentwicklung 2024">
  <figcaption>
    Detaillierte Beschreibung der Datenpunkte im Fließtext darunter.
  </figcaption>
</figure>

Typische Fehler bei Alt-Texten

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.

16.2% of all home page images had missing alternative text in 2026.

Jared Smith, Co-Direktor WebAIM – WebAIM Million 2026 Report

Alt-Texte in NCA Projekten: Was wir aus der Praxis wissen

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.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.

Erreichen Sie unsere Spezialisten zu barrierefreien Webdesign

Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.

Kostenlose Demo Jetzt anrufen

Häufige Fragen zu Alt-Texten

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.

Sind Alt-Texte 2026 in Deutschland gesetzlich Pflicht?

Ja. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG), das seit Juni 2025 anwendbar ist, müssen viele Unternehmen ihre digitalen Angebote barrierefrei gestalten. Dazu gehören Alt-Texte für alle informativen Bilder. Ausnahmen gibt es nur für Kleinstunternehmen mit unter zehn Mitarbeitern und unter zwei Millionen Euro Jahresumsatz.

Welche WCAG Version gilt 2026 für Alt-Texte?

2026 ist WCAG 2.2 die maßgebliche Version. Das Erfolgskriterium 1.1.1 Nicht-Text-Inhalte verlangt, dass jedem Bild eine textuelle Alternative zugeordnet wird, die den gleichen Zweck erfüllt. Die Anforderungen sind weitgehend identisch mit WCAG 2.1, die Prüfregeln wurden um neue Kriterien erweitert.

Welche Tools generieren Alt-Texte 2026 mit KI?

Aktuelle Modelle wie Gemini, GPT-4 und Claude liefern in vielen Fällen brauchbare Erstvorschläge für Alt-Texte. Auch Open Source Modelle wie LLaVA oder Qwen-VL werden produktiv eingesetzt. Wichtig: Die Ergebnisse sind nie ungeprüft zu übernehmen — gerade bei Marken, Eigennamen oder fachspezifischen Bildern braucht es menschliche Nachjustierung.

Wie lang darf ein Alt-Text 2026 maximal sein?

Eine harte technische Grenze gibt es nicht, in der Praxis haben sich 125 Zeichen als Richtwert etabliert. Längere Alt-Texte werden zwar vom Screenreader komplett vorgelesen, doch verlieren Nutzer schnell den Kontext. Bei komplexen Diagrammen kombiniert man kurzen Alt-Text mit ausführlicher Beschreibung im Fließtext oder über aria-describedby.

Was kostet eine BFSG konforme Alt-Text Nachrüstung 2026?

Der Aufwand hängt stark von Bestand, Bildqualität und vorhandenen Metadaten ab. Bei großen Katalogen lohnt sich ein KI gestützter Workflow mit menschlicher Qualitätskontrolle. NCA erstellt im Rahmen eines Audits eine konkrete Aufwandsabschätzung — ohne Bestandsanalyse sind seriöse Aussagen zu Kosten kaum möglich.

Müssen alle Bilder einen Alt-Text haben?

Ja, idealerweise sollten alle Bilder ein alt Attribut haben. Dekorative Bilder bekommen einen leeren Alt-Text mit alt="", damit Screenreader sie überspringen. Informative und funktionale Bilder brauchen eine echte textuelle Beschreibung. Ohne alt Attribut lesen Screenreader oft den Dateinamen vor, was meist unbrauchbar ist.

Was ist ein guter Alt-Text?

Ein guter Alt-Text liefert die gleiche Information wie das Bild, knapp und im Kontext der Seite. Er beschreibt nicht das Bild als solches, sondern den Inhalt aus Sicht des Lesers. Bei verlinkten Bildern beschreibt er das Linkziel, nicht das Bild. Phrasen wie Foto von oder Bild von gehören nicht in den Alt-Text.

Können Alt-Texte nachträglich zu bestehenden Bildern hinzugefügt werden?

Ja, und das ist bei Altbeständen unverzichtbar. In CMS Systemen wie Sulu, WordPress oder TYPO3 lassen sich Alt-Texte über die Medienverwaltung nachpflegen. Bei großen Beständen hilft ein automatisierter Workflow mit KI Vorschlägen und manueller Freigabe. Wichtig: nach jeder Änderung den Cache leeren und die Seiten neu testen.

Welche Strafen drohen bei fehlenden Alt-Texten in Deutschland?

Bei BFSG Verstößen können Marktüberwachungsbehörden Maßnahmen anordnen — von Beanstandungen über Anpassungspflichten bis zu Bußgeldern bis 100.000 Euro je Verstoß. Wichtiger als Strafen ist aber, dass Nutzer mit Behinderungen klagen können und Wettbewerber Abmahnungen aussprechen. Proaktive Compliance ist der bessere Weg.

Was ist der Unterschied zwischen Alt-Text und Bildunterschrift?

Der Alt-Text ist eine unsichtbare Beschreibung im HTML Code, primär für Screenreader und Suchmaschinen. Die Bildunterschrift ist sichtbar für alle Nutzer und steht meist unter dem Bild. Bei vorhandener Bildunterschrift mit identischem Inhalt sollte der Alt-Text leer sein, sonst hört der Nutzer alles doppelt.

Wie beschreibt man komplexe Infografiken oder Diagramme?

Bei komplexen Visualisierungen sollte der Alt-Text nur eine kurze Zusammenfassung liefern, etwa Balkendiagramm zur Umsatzentwicklung 2024. Die detaillierte Beschreibung der Daten und Zusammenhänge gehört in eine ausführliche Langbeschreibung im Fließtext, die idealerweise auch sehende Nutzer lesen können.

Wie verbessern Alt-Texte das SEO Ranking?

Alt-Texte sind ein etabliertes SEO Signal. Google nutzt sie für die Bildersuche und als zusätzlichen Content für die Seite. Wichtig: keine Keyword Liste, sondern eine echte Beschreibung mit relevanten Begriffen. Auch KI Suchsysteme wie ChatGPT und Perplexity ziehen Alt-Texte heran, wenn sie Webseiten interpretieren.

Können dekorative Bilder einen leeren Alt-Text haben?

Ja, das ist sogar empfohlen. Dekorative Bilder ohne inhaltliche Information — Trennlinien, Verzierungen, Hintergrundbilder — bekommen alt="". Screenreader überspringen sie dann komplett, was den Lesefluss verbessert. Wichtig ist nur, dass das alt Attribut vorhanden ist, sonst raten Screenreader oft am Dateinamen.

Wie testet man Alt-Texte automatisiert?

Tools wie WAVE, axe DevTools, Silktide oder Lighthouse prüfen automatisch, ob alt Attribute vorhanden sind. Was sie nicht beurteilen können: ob der Alt-Text inhaltlich gut ist. Dafür braucht es manuelle Reviews, idealerweise mit Screenreader Test (NVDA, JAWS, VoiceOver). Ein vollständiges Accessibility Audit kombiniert beide Ansätze.