Barrierefreie Bilder und Alt-Texte richtig schreiben

Das Erfolgskriterium 1.1.1 Nicht-Text-Inhalte fordert, dass jeder Nicht-Text-Inhalt eine Textalternative besitzt, die den gleichen Zweck erfüllt (W3C/WAI). Der entscheidende Begriff ist Zweck: Ein Alt-Text beschreibt nicht das Bild an sich, sondern die Funktion, die das Bild im jeweiligen Kontext hat. Dasselbe Foto kann auf einer Seite eine reine Dekoration sein und auf einer anderen Seite eine zentrale Information transportieren. Deshalb gibt es keine universell richtige Beschreibung, sondern nur eine im Kontext angemessene. Die W3C Images Tutorials der Web Accessibility Initiative unterscheiden hierzu mehrere Bildtypen, die jeweils unterschiedlich behandelt werden.

Die praktische Bedeutung ist groß, weil Bilder zur am schnellsten wachsenden Inhaltsart gehören. Im WebAIM Million Report (2024) lag die durchschnittliche Startseite bei 55,6 (WebAIM Million, 2024) Bildern - ein Zuwachs von rund 28 Prozent gegenüber dem Vorjahr. Fehlender Alternativtext zählt seit Jahren zu den sechs häufigsten WCAG-Verstößen, die zusammen 96,4% (WebAIM Million, 2024) aller automatisch erkannten Fehler ausmachen. Wer Bilder von Anfang an sauber beschreibt, vermeidet damit einen der größten und am leichtesten messbaren Befundblöcke in einem WCAG-Audit.

Bevor Sie einen Alt-Text formulieren, sollten Sie den Bildtyp bestimmen. Die WAI unterscheidet im Kern zwischen informativen Bildern, dekorativen Bildern, funktionalen Bildern (etwa Logos in Links oder Icon-Buttons), Bildern von Text, komplexen Bildern und Bildgruppen (W3C/WAI). Jeder Typ folgt einer eigenen Logik: Ein funktionales Bild beschreibt die Aktion ("Suche starten"), nicht das Aussehen der Lupe; ein Bild von Text sollte ohnehin durch echten Text ersetzt werden. Diese Einordnung entscheidet darüber, ob Sie einen beschreibenden Alt-Text, einen leeren Alt-Text oder eine Langbeschreibung benötigen.

Diese Systematik lässt sich gut in Redaktionsprozesse übersetzen. In unseren Referenzprojekten hat sich bewährt, schon beim Hochladen eines Bildes im Redaktionssystem eine Pflichtentscheidung zu erzwingen: informativ mit Alt-Text oder dekorativ mit leerem Alt-Text. So entstehen Bilder ohne jegliches Alt-Attribut, die für Screenreader oft den Dateinamen vorlesen, gar nicht erst. Ergänzend gehören Bilder zu den Punkten, die in einer ehrlichen Barrierefreiheitserklärung mit Feedback-Mechanismus als bekannte Lücke auftauchen, solange sie noch nicht vollständig beschrieben sind.

Ein guter Alt-Text ist kurz, konkret und auf den Zweck bezogen. Schlechte Alt-Texte sind dagegen meist auf eine von wenigen Arten problematisch: Sie sind leer, wo Information fehlt; sie enthalten Dateinamen wie IMG_2381.jpg; sie wiederholen redundant den umgebenden Text; oder sie beginnen mit Floskeln wie "Bild von". Der WebAIM Million Report (2024) weist darauf hin, dass rund ein Drittel der Bilder auf populären Startseiten fehlende, fragwürdige oder wiederholte Alternativtexte hatte (WebAIM Million, 2024). Ein technisch vorhandenes Alt-Attribut ist also noch kein guter Alt-Text.

Für die Länge gibt es keine starre Vorgabe der WCAG, aber eine bewährte Faustregel: Was sich nicht in etwa einem Satz beschreiben lässt, ist meist ein komplexes Bild und braucht eine Langbeschreibung. Reine Längengrenzen, die einzelne Werkzeuge melden, sind keine WCAG-Regel, sondern eine Heuristik. Wichtiger als die Zeichenzahl ist, dass der Alt-Text den Zweck trifft und keine für das Verständnis nötige Information auslässt. Im Zweifel hilft der Lese-Test: Würde der Text vorgelesen den gleichen Sinn ergeben wie der Anblick des Bildes für sehende Nutzer?

Bei rein dekorativen Bildern - Hintergrundmustern, Trennornamenten, stimmungsgebenden Fotos ohne eigene Aussage - ist ein leerer Alternativtext die korrekte Lösung (W3C/WAI). Das Attribut muss dabei vorhanden, aber leer sein: alt="". Fehlt das Alt-Attribut ganz, lesen manche Screenreader ersatzweise den Dateinamen oder den Bildpfad vor, was die Bedienung stört. Ein leeres Alt-Attribut signalisiert dagegen ausdrücklich, dass das Bild übersprungen werden soll. Bei Inline-SVGs oder per CSS eingebundenen Bildern gelten sinngemäß role="presentation" beziehungsweise die Einbindung als CSS-Hintergrund.

Die Abgrenzung zwischen dekorativ und informativ ist nicht immer offensichtlich. Ein Stimmungsbild im Kopf eines Blogartikels ist meist dekorativ; dasselbe Bild in einer Bildergalerie, in der es um genau dieses Motiv geht, ist informativ. Hilfreich ist die Frage, ob die Seite ohne das Bild an Information verlöre. Lautet die Antwort Nein, ist ein leerer Alt-Text angemessen. Wir prüfen solche Einordnungen im Rahmen unserer Leistungen gemeinsam mit der Redaktion, weil sie redaktionelles Urteil und kein rein technisches Kriterium sind.

Diagramme, Karten und Infografiken transportieren oft mehr Information, als ein kurzer Alt-Text fassen kann. Die WAI empfiehlt hier ein zweistufiges Vorgehen: ein kurzer Alt-Text, der benennt, worum es sich handelt und die Kernaussage zusammenfasst, plus eine vollständige Langbeschreibung der enthaltenen Daten an anderer Stelle (W3C/WAI). Der Alt-Text eines Balkendiagramms könnte lauten: Balkendiagramm Umsatz 2025, steigend von Q1 bis Q4, Daten in der folgenden Tabelle. Die eigentlichen Werte gehören dann in die Langbeschreibung - idealerweise als zugänglicher Text oder als echte Datentabelle direkt im Seiteninhalt.

Für die technische Verknüpfung gibt es mehrere etablierte Wege. Eine Datentabelle oder ein erläuternder Absatz direkt unter der Grafik ist die robusteste Variante, weil sie ohne zusätzliche Technik für alle Nutzer sichtbar ist. Alternativ verknüpft das Attribut aria-describedby die Grafik mit einem Beschreibungstext, oder eine figure mit figcaption fasst Bild und Beschriftung zusammen. Komplexe Grafiken sind auch ein häufiger Punkt in der Liste bekannter Barrieren, weshalb sie sich gut zusammen mit anderen Medien betrachten lassen - etwa im Beitrag zu barrierefreien Medien mit Untertiteln und Transkripten, wo dasselbe Prinzip der Textalternative für Audio und Video gilt.

Automatische Prüfwerkzeuge erkennen zuverlässig, ob ein Alt-Attribut fehlt - ob der vorhandene Text aber sinnvoll ist, können sie nicht beurteilen (W3C/WAI). Deshalb verbindet eine belastbare Prüfung den automatisierten Scan mit einer manuellen Sichtung: Liest man die Seite mit einem Screenreader, fallen Dateinamen, leere Beschreibungen an informativen Bildern und redundante Texte sofort auf. Ein einfacher erster Schritt ohne Spezialwerkzeug ist, Bilder im Browser testweise zu deaktivieren und zu prüfen, ob die Seite weiterhin verständlich bleibt.

Damit Alt-Texte dauerhaft stimmen, müssen sie Teil des redaktionellen Alltags werden. Aus der Begleitung von 50+ (Projekterfahrung) Projekten wissen wir, dass nachträgliches Aufräumen aufwendiger ist als eine klare Regel beim Hochladen. Hilfreich sind eine kurze Redaktionsrichtlinie, ein Pflichtfeld beziehungsweise eine Dekorativ-Markierung im Redaktionssystem und ein regelmäßiger Stichproben-Check. Diese Verzahnung aus Technik und Redaktion verankern wir auch über praxisnahe Schulungen für Redaktion und Entwicklung, damit nicht nur der heutige Bestand, sondern auch jeder neue Inhalt zugänglich bleibt.

Die wirtschaftliche Seite spricht ebenfalls dafür, Bilder sauber zu beschreiben. In Deutschland leben rund 1,2 Mio. (DBSV) blinde und sehbehinderte Menschen, und etwa 4% (Statistisches Bundesamt, 2024) der schwerbehinderten Menschen haben eine Sehbehinderung oder Blindheit als schwerste Beeinträchtigung. Hinzu kommt, dass aussagekräftige Alt-Texte und begleitende Datentabellen die Auffindbarkeit in der Bildersuche verbessern. Barrierefreie Bilder sind damit kein reiner Compliance-Posten, sondern erweitern die erreichbare Zielgruppe - ein Argument, das wir in unseren BFSG-Anforderungen regelmäßig aufgreifen.