Wie man Alt-Text schreibt: Ein praktischer Leitfaden für Entwickler und Content-Teams

Laut dem WebAIM Million 2025 Report sind fehlende Alternativtexte für 55,5% aller analysierten Startseiten verantwortlich – und von diesen Fehlern betreffen 44% verlinkte Bilder, was die Navigation für Screenreader-Nutzer vollständig unterbricht. Das ist kein Nischenproblem. Das ist die Hälfte des Webs, die blinde und sehbehinderte Nutzer vor Bildern stehen lässt, die nichts sagen. Wenn euer Team Bilder ausliefert, ohne sorgfältig über Alt-Texte nachzudenken, verfehlt ihr nicht nur ein Compliance-Kästchen – ihr signalisiert einem bedeutenden Teil eures Publikums, dass ihre Erfahrung keine Rolle spielt.

Was Alt-Text tatsächlich ist (und warum er mehr als ein Tag ist)

Alt-Text, kurz für Alternativtext, ist eine schriftliche Beschreibung, die im alt-Attribut eines HTML-<img>-Elements eingebettet ist. Wenn ein Screenreader auf ein Bild trifft, liest er den Alt-Text für den Nutzer vor. Wenn ein Bild nicht geladen werden kann – aufgrund einer langsamen Verbindung, einer defekten URL oder eines Content-Blockers – wird der Alt-Text an seiner Stelle angezeigt. Er wird außerdem von Suchmaschinen indexiert und ist damit ein leises, aber bedeutungsvolles SEO-Signal.

Was viele Teams jedoch übersehen: Alt-Text ist nicht nur ein Fallback-Sicherheitsnetz. Er ist der primäre Weg, wie blinde und sehbehinderte Nutzer – etwa 43,3 Millionen Menschen weltweit, die blind sind, und 295 Millionen mit moderater bis schwerer Sehbehinderung – visuelle Inhalte im Web erleben. Screenreader wie NVDA und JAWS (die beiden am weitesten verbreiteten Desktop-Screenreader) geben den Alt-Text in dem Moment aus, in dem der Fokus ein Bild erreicht. Wenn dieser Text fehlt, bedeutungslos oder redundant ist, verschlechtert sich die Nutzererfahrung sofort.

Forschung zu blinden und sehbehinderten Nutzern zeichnet ein deutliches Bild dessen, was in der Praxis passiert. Einige Nutzer berichten, dass sie Bilder auf Websites vollständig ignorieren, weil der Alt-Text ihrer Erfahrung nach nie hilfreich ist. Andere überspringen Produktbilder auf E-Commerce-Seiten und verlassen sich stattdessen auf Nutzerbewertungen, weil Alt-Texte wie „image001.jpg“ oder „photo“ ihnen nichts sagen. Das ist kein Screenreader-Problem – das ist ein Content-Problem, und es ist eines, das euer Team lösen kann.

Alt-Text als Content-Verantwortung zu verstehen – nicht nur als Entwickleraufgabe – ist die erste mentale Umstellung, die jedes Team vornehmen muss. Die Entwickler implementieren das Attribut; das Content-Team versteht den Kontext. Beides ist entscheidend, um es richtig zu machen.

Die rechtliche und Compliance-Landschaft

Alt-Text ist nicht optional, wenn ihr euch um rechtliche Risiken sorgt. WCAG Success Criterion 1.1.1 (Non-text Content) ist eine Anforderung auf Level A – die niedrigste, grundlegendste Compliance-Stufe. Wer hier scheitert, fällt bei jedem formalen Accessibility-Audit durch. In den Vereinigten Staaten wurde der ADA in Tausenden von Fällen auf Websites angewendet, mit allein 4.605 ADA-Website-Klagen im Jahr 2024. Fehlender Alt-Text ist eine der am häufigsten zitierten Verletzungen in Abmahnschreiben, gerade weil er leicht erkennbar, objektiv messbar und ein direkter Blocker für den Zugang zu Kerninhalten ist.

Über den ADA hinaus ist der European Accessibility Act (EAA) seit dem 28. Juni 2025 durchsetzbar. Wenn eure Organisation Kunden in der EU bedient, kann Nicht-Compliance zu Strafen von bis zu €100,000 oder 4% des Jahresumsatzes führen. WCAG 2.2 Level AA wird weithin als Maßstab für EAA-Compliance anerkannt, und die Anforderungen an Alt-Text unter Kriterium 1.1.1 sind gegenüber früheren Versionen unverändert – alle informativen Bilder müssen programmatisch ermittelbare Textalternativen haben.

In Kanada schreibt der Accessibility for Ontarians with Disabilities Act (AODA) ähnlich die WCAG-Konformität für Organisationen des öffentlichen und privaten Sektors vor. Section 508 im US-Bundeskontext hat eigene parallele Anforderungen. Die Quintessenz ist in allen Rechtsräumen gleich: Alt-Text ist kein „Nice-to-have“, und das regulatorische Umfeld zieht an, nicht umgekehrt.

WCAG 1.1.1 ist Level A – die grundlegendste Compliance-Stufe. Wer hier scheitert, fällt bei jedem Accessibility-Audit durch, und es ist der am leichtesten zu erkennende Verstoß für automatisierte Tools und Rechtsabteilungen.

Der Entscheidungsrahmen: Welche Bilder was brauchen

Eines der häufigsten Missverständnisse ist, dass jedes Bild eine Textbeschreibung braucht. Das ist falsch – und unnötigen Alt-Text zu dekorativen Bildern hinzuzufügen, verschlechtert die Erfahrung für Screenreader-Nutzer sogar, weil sie sich dann durch Rauschen hören müssen, das keinen Mehrwert bietet. Die eigentliche Fähigkeit besteht darin zu wissen, in welche Kategorie jedes Bild fällt. Hier ist ein praktischer Rahmen:

• Informative Bilder – Fotos, Illustrationen oder Grafiken, die Inhalte oder Bedeutungen vermitteln, die im umgebenden Text nicht vorhanden sind. Diese benötigen beschreibenden Alt-Text, der dieselben Informationen vermittelt, die das Bild liefert.
• Funktionale Bilder – Bilder, die als Buttons, Links oder Steuerelemente verwendet werden (z. B. ein Lupen-Icon, das eine Suche absendet, oder ein Logo, das auf die Startseite verlinkt). Der Alt-Text sollte die Funktion beschreiben, nicht das visuelle Erscheinungsbild: alt='Search', nicht alt='Magnifying glass icon'.
• Dekorative Bilder – Visuelle Elemente, die ästhetischen Wert hinzufügen, aber keine Bedeutung tragen: Hintergrundmuster, Trennlinien, rein dekorative Illustrationen. Diese sollten ein leeres Alt-Attribut haben (alt=''), was dem Screenreader signalisiert, das Bild vollständig zu überspringen.
• Bilder mit Text – Screenshots oder Grafiken, die Wörter enthalten. Best Practice ist, diese ganz zu vermeiden und stattdessen echten, formatierten Text zu verwenden. Wenn sie unvermeidbar sind, sollte der Alt-Text den Text im Bild wortwörtlich wiedergeben.
• Komplexe Bilder – Diagramme, Grafiken, Karten und Infografiken mit dichten Daten. Ein kurzer Alt-Text als Zusammenfassung ist erforderlich, plus eine längere strukturierte Beschreibung im Seiteninhalt oder verlinkt vom Bild.

Beachtet, dass leerer Alt-Text (alt='') nicht dasselbe ist wie ein fehlendes Alt-Attribut. Ein Bild ohne alt-Attribut kann dazu führen, dass der Screenreader den Dateinamen oder die URL des Bildes vorliest – was fast immer schlimmer ist als Stille. Fügt das Attribut immer ein, selbst wenn sein Wert absichtlich leer ist.

Alt-Text schreiben, der wirklich funktioniert: praktische Regeln

Guter Alt-Text ist schwerer zu schreiben, als es aussieht. Hier sind die konkreten Regeln, die nützliche Beschreibungen von Rauschen unterscheiden:

• Haltet ihn knapp. Zielt auf unter 125 Zeichen. Screenreader wie JAWS und NVDA können längere Alt-Texte mitten im Satz abschneiden und damit genau die Informationen kappen, die ihr mühsam bereitgestellt habt. Wenn das Bild komplex genug ist, um mehr zu erfordern, ist das ein Signal, dass ihr eine ergänzende Langbeschreibung braucht.
• Beginnt nicht mit „Bild von“ oder „Foto von“. Screenreader kündigen automatisch an, dass ein Element ein Bild ist, bevor sie den Alt-Text lesen. Wenn ihr alt='Image of a smiling woman' schreibt, sagt der Screenreader „image, image of a smiling woman“ – was redundant ist und die Zeit der Zuhörer verschwendet.
• Beschreibt die Bedeutung, nicht nur das Aussehen. Alt-Text sollte dieselben Informationen oder dieselbe Funktion vermitteln wie das Bild. Wenn ihr ein Diagramm mit Umsatzwachstum im Q3 zeigt, schreibt nicht alt='Bar chart'. Schreibt etwas wie alt='Bar chart showing Q3 revenue up 22% year-over-year' und stellt die vollständigen Daten im umgebenden Text bereit.
• Passt ihn an den Kontext an. Dasselbe Foto kann je nach Einsatzort unterschiedlichen Alt-Text erfordern. Ein Foto eines Laptops auf einem Schreibtisch, das in einem „Meet Our Team“-Bereich verwendet wird, braucht möglicherweise Alt-Text, der den Arbeitsplatz beschreibt; in einer Produktliste muss es die Spezifikationen und das Erscheinungsbild des Laptops beschreiben.
• Stopft keine Keywords hinein. Alt-Text wird von Suchmaschinen indexiert, aber Keyword-Stuffing ist sowohl eine schlechte Nutzererfahrung als auch ein Verstoß gegen die Intention der WCAG. Schreibt zuerst für die Nutzer.
• Verwendet korrekte Grammatik und Zeichensetzung. Screenreader übersetzen Text in Sprache, und Zeichensetzung beeinflusst Tempo und Klarheit. Ein Satzfragment klingt weniger natürlich als ein vollständiger Gedanke.

Alt-Text muss keine kalte, objektive Beschreibung sein. Er kann – und sollte manchmal – Nuancen, Kontext und sogar Emotionen vermitteln, wenn diese Qualitäten für die Nutzererfahrung mit dem Inhalt relevant sind.

Codebeispiele: richtig und falsch

Theorie ist das eine. Schauen wir uns an, wie sich diese Prinzipien in tatsächlichem HTML auswirken.

Informatives Bild – schlechter Alt-Text:

<img src='team-photo.jpg' alt='photo'>

Informatives Bild – guter Alt-Text:

<img src='team-photo.jpg' alt='Accsible engineering team gathered around a whiteboard during a product sprint meeting'>

Funktionales Bild (verlinktes Logo) – schlechter Alt-Text:

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

Funktionales Bild (verlinktes Logo) – guter Alt-Text:

<a href='/'>
  <img src='logo.svg' alt='Accsible — return to homepage'>
</a>

Dekoratives Bild – korrekte Implementierung:

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

Komplexes Bild (Diagramm) – korrekter Ansatz mit verlinkter Langbeschreibung:

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

Für Icon-Buttons ohne sichtbares Textlabel verwendet ihr aria-label am Button selbst und setzt alt='' am Icon-Bild, um doppelte Ansagen zu vermeiden:

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

Umgang mit spezifischen Bildtypen

Produktbilder im E-Commerce: Dies sind mit die kritischsten Alt-Text-Kontexte im Web. Blinde Nutzer sind vollständig auf Alt-Text angewiesen, um zu verstehen, was sie zu kaufen erwägen. Nur den Produktnamen zu beschreiben, ist unzureichend. Bezieht Material, Farbe, zentrale visuelle Merkmale und alle Varianten ein, die visuell unterscheidbar sind. Zum Beispiel: alt='Slim-fit wool blazer in navy blue with gold buttons and notched lapels' ist deutlich hilfreicher als alt='Blazer'.

Logos: Logos sind niemals dekorativ. Sie benötigen Alt-Text, der den Namen der Organisation und jeden bedeutungsvollen Slogan oder Zusatz enthält, der im Logo-Bild erscheint. Wenn das Logo auch ein Link ist, sollte der Alt-Text – wie oben beschrieben – sein Ziel beschreiben.

Infografiken: Diese sind berüchtigt schwer gut zu handhaben. Ein einzelnes Alt-Attribut kann die Informationslast einer komplexen Infografik nicht tragen. Der richtige Ansatz ist ein kurzer, zusammenfassender Alt-Text (z. B. alt='Infographic summarizing five steps of our onboarding process') kombiniert mit einer strukturierten Textversion derselben Informationen, die auf der Seite sichtbar ist.

Bilder von Menschen: Namen anzugeben, wenn Personen identifiziert werden, ist hilfreich, insbesondere in redaktionellen oder Nachrichtenkontexten. Beschreibt, was die Person tut oder was das Bild vermittelt, nicht nur ihr körperliches Erscheinungsbild. Vermeidet Beschreibungen, die eine Person auf ihre demografischen Merkmale reduzieren.

Hintergrund- und CSS-Bilder: Bilder, die über CSS background-image eingebunden werden, haben kein verfügbares alt-Attribut und sollten daher nur für wirklich dekorative Zwecke verwendet werden. Wenn ein Bild Bedeutung vermitteln muss, gehört es als <img>-Element mit korrektem Alt-Text ins HTML.

Alt-Text in euren Workflow integrieren

Einer der Gründe, warum Alt-Text in großem Maßstab kaputt bleibt, ist, dass er als nachgelagerter Schritt behandelt wird – etwas, das ein automatischer Scanner nach dem Launch bemängelt und damit eine hastige Korrektur auslöst. Die Lösung besteht darin, Alt-Text in eure Content- und Entwicklungs-Workflows nach vorne zu verlagern.

Für Content-Teams bedeutet das, einen hausinternen Styleguide für Alt-Text zu etablieren, der eure häufigsten Bildtypen abdeckt. Wenn eure Site Produktbilder, Hero-Bilder für Blogposts, Eventfotos und Datencharts veröffentlicht, verdient jede Kategorie einen dokumentierten Standard mit Beispielen für gute und schlechte Beschreibungen. Wenn Autorinnen und Autoren Bilder hochladen, sollten sie über Alt-Text nachdenken, während sie auch über Bildauswahl und Bildunterschriften nachdenken.

Für Entwickler bedeutet das, Alt-Text-Felder in CMS-Templates einzubauen und sie für nicht-dekorative Bildkomponenten als Pflichtfelder – nicht optional – zu markieren. Wenn eine Komponente ein Bild akzeptiert, sollte die Oberfläche nach Alt-Text fragen und zwischen informativen und dekorativen Kontexten unterscheiden. Vermeidet es, das Alt-Attribut automatisch mit dem Dateinamen des Bildes oder dem Caption-Text zu füllen – das sind unterschiedliche Dinge mit unterschiedlichen Zwecken.

Für QA- und Compliance-Manager gilt: Automatisierte Scanning-Tools (einschließlich Accessibility-Overlay-Lösungen wie Accsible) können Bilder mit fehlenden oder leeren Alt-Attributen in großem Maßstab erkennen und in Echtzeit markieren. Aber automatisierte Tools können nicht beurteilen, ob vorhandener Alt-Text tatsächlich sinnvoll ist – diese Bewertung erfordert einen menschlichen Prüfer. Baut manuelle Stichproben in euren Accessibility-Audit-Rhythmus ein und nehmt die Qualitätsprüfung von Alt-Text in die Abnahmekriterien für neue Features auf, die Bilder beinhalten.

Wenn dasselbe Bild auf mehreren Seiten oder in verschiedenen Kontexten wiederverwendet wird, denkt daran, dass der passende Alt-Text sich ändern kann. Ein Foto der Firmenzentrale, das auf einer „Contact Us“-Seite und auf einer „About Our Culture“-Seite verwendet wird, kann je nach Aussageabsicht der jeweiligen Seite unterschiedliche Beschreibungen erfordern. CMS-Plattformen wie WordPress erlauben aus genau diesem Grund seitenbezogene Alt-Text-Overrides.

Häufige Fehler, die ihr vermeiden solltet

Selbst Teams, die Alt-Text ernst nehmen, machen wiederkehrende Fehler. Hier sind Muster, auf die ihr aktiv achten solltet:

• Den Dateinamen als Alt-Text verwenden. Ein Alt-Text wie IMG_4521.jpg oder hero-banner-v3-final.png ist schlimmer als nutzlos – er signalisiert Screenreader-Nutzern aktiv, dass niemand an sie gedacht hat.
• Alt-Text identisch mit der angrenzenden Bildunterschrift machen. Bildunterschriften und Alt-Text bedienen unterschiedliche Zielgruppen und Zwecke. Eine Bildunterschrift ist ergänzender Kontext für sehende Nutzer; Alt-Text ersetzt das Bild für Nutzer, die es nicht sehen können. Sie können sich überschneiden, sollten aber nicht beliebig hin- und herkopiert werden.
• Jedem Bild unterschiedslos Alt-Text geben. Dekorativen Bildern beschreibenden Alt-Text zu geben, zwingt Screenreader-Nutzer, sich durch irrelevante Inhalte zu hören. Die Disziplin, zu entscheiden „braucht dieses Bild eine Beschreibung, und wenn ja, welche?“, ist genauso wichtig wie das Schreiben selbst.
• Vage, kontextfreie Beschreibungen schreiben. Alt-Text wie alt='man smiling' für ein Foto eures CEOs während eines Produktlaunches sagt dem Nutzer fast nichts darüber, warum das Bild da ist oder was es im Kontext bedeutet.
• Alt-Text bei SVGs ignorieren. Inline-SVGs brauchen ebenfalls zugängliche Namen, typischerweise über aria-label am <svg>-Element oder ein <title>-Element als erstes Kindelement, kombiniert mit role='img'.

<!-- SVG with accessible name -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

Wesentliche Erkenntnisse

• Nicht jedes Bild braucht eine Textbeschreibung. Dekorative Bilder sollten alt='' verwenden, um Screenreadern mitzuteilen, dass sie übersprungen werden sollen – aber lasst das alt-Attribut niemals ganz weg, sonst liest der Screenreader möglicherweise den Dateinamen vor.
• Haltet Alt-Text für informative Bilder unter 125 Zeichen, da Screenreader längere Zeichenketten abschneiden können und Kürze das Hörverständnis verbessert. Für komplexe Bilder kombiniert einen kurzen Alt-Text als Zusammenfassung mit einer vollständigen Textbeschreibung im Seiteninhalt.
• Beschreibt Funktion, nicht nur Form. Für verlinkte und funktionale Bilder sollte der Alt-Text sagen, was passieren wird oder wohin der Nutzer gelangt – nicht, wie das Bild aussieht. Für informative Bilder vermittelt ihr die Bedeutung, nicht nur den visuellen Inhalt.
• Integriert Alt-Text frühzeitig in euren Workflow, nicht als Fix nach dem Launch. Macht ihn zu einem Pflichtfeld in eurem CMS, nehmt ihn in Content-Styleguides auf und ergänzt die Qualitätsprüfung in eurem QA-Prozess – automatisierte Tools erkennen fehlenden Alt-Text, aber Menschen müssen beurteilen, ob er sinnvoll ist.
• Die rechtlichen und regulatorischen Risiken sind real und steigen. ADA-Klagen, in denen fehlender Alt-Text angeführt wird, gingen 2024 in die Tausende, und der Accessibility Act der EU ist nun in Kraft. Alt-Text als nachträglichen Gedanken zu behandeln, ist keine tragfähige Compliance-Strategie.