Textalternativen – Warum jedes Bild eine Stimme braucht

Kurz reinfinden: Worum geht’s und warum?

In diesem Beitrag geht es um WCAG 2.1 – Erfolgskriterium 1.1.1 „Non-text Content“. Kurz gesagt: Alles, was nicht Text ist, braucht eine passende Textalternative.
Warum das zählt:

Gefordert: Für öffentliche Stellen und viele Unternehmen ist Barrierefreiheit verpflichtend – 1.1.1 ist ein zentrales Kriterium.
Praxisnutzen: Fällt ein Bild/Video/Icon aus (schlechte Verbindung, blockierte Medien) oder jemand nutzt einen Screenreader, bleibt die Information trotzdem verfügbar.

Mehrwert: Bessere Suche, robustere Seiten, weniger Fehlbedienungen.

Was gemeint ist – und weshalb

1.1.1 Textalternativen (WCAG 2.1):
Alle nicht-textuellen Inhalte haben eine Textalternative, die den Zweck im Kontext trifft: Was sollen Nutzer an dieser Stelle verstehen oder tun? So bleibt die Aussage auch ohne Bild/Video erhalten – z. B. mit Screenreader, bei deaktivierten Medien oder wenn Ressourcen nicht laden.

Vom Grundsatz zur Umsetzung: Je nach Inhaltstyp variiert, wie die Alternative aussieht. Die wichtigsten Fälle im Überblick:

Was sind Textalternativen und warum sind sie so wichtig?

Textalternativen sind textuelle Beschreibungen für visuelle oder auditive Inhalte, die deren Zweck und Bedeutung im jeweiligen Kontext vermitteln. Sie sind das Bindeglied zwischen der visuellen Welt des Webs und den Menschen, die diese nicht oder nicht vollständig wahrnehmen können.

Der entscheidende Punkt dabei ist der Zweck im Kontext: Es geht nicht darum, jedes Detail eines Bildes zu beschreiben, sondern die Funktion und Bedeutung zu vermitteln, die es in der jeweiligen Situation hat. Ein Produktfoto braucht eine andere Alternative als ein dekoratives Hintergrundbild oder ein navigierender Button.

Diese Alternativen verbessern nicht nur die Zugänglichkeit für Menschen mit Behinderungen, sondern auch die Auffindbarkeit in Suchmaschinen, die Benutzerfreundlichkeit bei langsamen Verbindungen und die Robustheit Ihrer Website. Wenn Ihre Bilder nicht laden – sei es durch technische Probleme oder bewusste Deaktivierung – bleiben die wichtigen Informationen trotzdem verfügbar.

Geltungsbereich:

Gilt für alle Unternehmen, die mehr als 9 Beschäftigte haben oder deren Jahresumsatz 2 Millionen Euro übersteigt.

ONLINE -INTERAKTIONEN:

Webseiten, Plattformen, und Apps für den Austausch mit Kunden

Unterpunkte zu WCAG 1.1.1

Steuerelemente / Eingaben (Buttons, Links, Formfelder)
Entscheidend ist die Funktion, nicht die Optik. Jedes Element braucht einen zugänglichen Namen (sichtbarer Text, aria-label oder aria-labelledby), der die Aktion benennt („Menü öffnen“, „PDF herunterladen“). Formfelder benötigen ein sichtbares Label.
Merke: Aktion/Ziel benennen – nicht die Optik („Lupe“).

Zeitbasierte Medien (Audio/Video)
Das Posterbild erhält ggf. einen knappen Alt-Text („Video: Produktdemo“). Die inhaltlichen Alternativen (Untertitel, Transkript, Audiodeskription) werden unter WCAG 2.1 adressiert.
Merke: Bei 1.1.1 kurz identifizieren, die inhaltlichen Alternativen liefert 1.2.

Tests, Prüfungsaufgaben, Übungen
Kein „Spoiler“ im Alt-Text. Wenn das Bild Teil der Aufgabe ist, darf die Alternative die Lösung nicht verraten. Neutral Zweck/Instruktion nennen („Übungsaufgabe mit Bild – lösen Sie die Aufgabe“).
Merke: Kein „Spoiler-Alt-Text“.

Rein sensorische Hinweise (Farbe/Form/Position)
Informationen nicht ausschließlich über Farbe, Form oder Position vermitteln. Die Alternative liefert äquivalente Textinfo („Klicke den Kreis mit der Aufschrift A“).
Merke: Nie allein auf Farbe/Form/Position verlassen.

CAPTCHA (Mensch/Bot)
Bild-CAPTCHA kurz beschreiben („Bitte Zeichenfolge eingeben …“) und eine zugängliche Alternative anbieten (z. B. Audio-CAPTCHA oder ein anderes Verfahren).
Merke: Mindestens eine barrierefreie Option zusätzlich.

Dekoration, Layout, unsichtbare Inhalte
Reine Ziergrafiken stumm schalten (alt=““ oder als CSS-Hintergrund ohne Namen). Unsichtbare Inhalte (z. B. Off-Canvas-Icons) nicht ansagen lassen.
Merke: Was keine Information trägt, wird nicht vorgelesen.

Bilder von Text (Text als Grafik)
Nach Möglichkeit echten HTML-Text verwenden. Muss es ein Bild sein (Logo, Plakat), stelle die Textinformation als Text bereit (Alt-Text oder begleitend im Fließtext).
Merke: Lesbarer, zoombarer Text schlägt „Text im Bild“.

Logos / Markenkennzeichen
Haben Informationswert → sprechender Alt-Text („BarriGo-Logo“ bzw. Unternehmensname).
Merke: Logos sind nicht dekorativ.

Komplexe Grafiken (Diagramme, Karten, Infografiken)
Kombiniere kurzen Alt-Text + Langbeschreibung. Ergänze Schlüsselwerte als Liste/Tabelle und nenne Navigationspunkte („Marker zeigen Filialen; Details in der folgenden Liste“).
Merke: Immer einen textuellen Weg zu den Daten anbieten.

Praktische Umsetzung – So schreiben Sie gute Textalternativen

Präzise, kontextnah, knapp (oft genügen 5–12 Wörter).
Keine Füllwörter wie „Bild von …“ – Screenreader kündigen Elemente an.
Seitensprache verwenden (Alt-Texte lokalisieren; gemischte Abschnitte bei Bedarf mit lang kennzeichnen).
Redundanz vermeiden: Steht die Info direkt daneben, darf der Alt-Text kürzer sein; bei Bild-Links mit eindeutigem sichtbarem Linktext kann alt=““ sinnvoll sein, um Doppelansagen zu vermeiden.

Kurztest: Bilder deaktivieren – bleibt die Aussage verständlich? Mit Tab/Screenreader prüfen – sind Bildlinks/Buttons sinnvoll benannt (kein „Hier klicken“, sondern „Preise & Pakete“)? Haben alle <img> ein alt (auch leer, wenn dekorativ)? Haben Icons/Buttons ohne sichtbaren Text einen zugänglichen Namen (aria-label)?

Testen und Qualität sichern

Führen Sie regelmäßige Kurztests durch: Deaktivieren Sie Bilder im Browser – bleibt die Aussage Ihrer Seite verständlich? Navigieren Sie nur mit der Tab-Taste durch die Website – sind alle Bild-Links und Buttons sinnvoll benannt?

Nutzen Sie einen Screenreader wie NVDA (kostenlos für Windows) oder die VoiceOver-Funktion bei Mac/iPhone, um Ihre Website anzuhören. Sind alle wichtigen Informationen verfügbar? Werden unwichtige Details übersprungen?

Prüfen Sie, ob alle <img>-Elemente ein alt-Attribut haben – auch wenn es leer ist (alt=""). Icons und Buttons ohne sichtbaren Text brauchen einen zugänglichen Namen durch aria-label oder aria-labelledby.

BFSG 2025: Rechtliche Konsequenzen und Chancen

Seit dem 28. Juni 2025 sind angemessene Textalternativen nicht nur eine Empfehlung, sondern gesetzliche Pflicht für Unternehmen, die digitale Dienstleistungen anbieten. Das Barrierefreiheitsstärkungsgesetz macht WCAG 2.1 Level AA zum verbindlichen Standard, wobei viele Unternehmen bereits auf WCAG 2.2 setzen.

Fehlende oder unzureichende Textalternativen sind einer der häufigsten Gründe für Abmahnungen im Bereich digitale Barrierefreiheit. Die Rechtsprechung zeigt klar: Gerichte nehmen diese Anforderungen ernst und verhängen empfindliche Strafen bei Verstößen.

Doch sehen Sie dies nicht nur als Risiko, sondern als Chance: Websites mit guten Textalternativen werden besser von Suchmaschinen gefunden, bieten eine bessere Benutzererfahrung auch für sehende Nutzer und erschließen neue Zielgruppen. In Deutschland leben etwa 13 Millionen Menschen mit Behinderungen – das ist ein Markt mit einer Kaufkraft von über 500 Milliarden Euro.

BarriGo. unterstützt Sie dabei, diese Anforderungen zu erfüllen. BarriGo.Live Inspect analysiert Ihre Website auf fehlende Alt-Texte und zeigt Ihnen präzise, bei welchen Bildern diese fehlen. So können Sie gezielt nachbessern und sicherstellen, dass alle Bilder barrierefrei beschrieben sind.

👉 Jetzt BarriGo. testen: Melden Sie sich kostenlos an und erleben Sie, wie einfach Sie visuelle Barrieren identifizieren und reduzieren können.

Weitere Informationen zu diesem Thema finden Sie auf der offiziellen Website: https://www.w3.org/TR/WCAG22/#text-alternatives