Zum Inhalt springen
Pandus

WCAG 1.1.1 Nicht-Text-Inhalt

Aktualisiert am 14. Oktober 2026 · Lesezeit: 3 Min.

Stufe
A · WCAG 2.0
EN 301 549
9.1.1.1
Offizieller Text
Understanding 1.1.1 Non-text Content (W3C, auf Englisch)

Das Erfolgskriterium 1.1.1 sorgt dafür, dass Menschen, die ein Bild nicht sehen können, trotzdem die Information erhalten, die es transportiert. Screenreader-Nutzer hören die Textalternative, ebenso Menschen, bei denen Bilder nicht geladen wurden. Es gehört zur Konformitätsstufe A, ist das erste Kriterium der WCAG und Teil von EN 301 549 (Abschnitt 9.1.1.1). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Alle Nicht-Text-Inhalte — Bilder, Icons, Diagramme, Bild-Buttons, SVGs — brauchen eine Textalternative, die denselben Zweck erfüllt. Für einige Arten von Inhalten verlangen die WCAG weniger:

  • Bedienelemente und Eingaben: Ein Bild, das ein Button ist oder Eingaben entgegennimmt, braucht einen Namen, der seinen Zweck beschreibt („Auf den Wunschzettel“, nicht „Herz“).
  • Zeitbasierte Medien (Video, Audio): Die Textalternative muss sie mindestens benennen; Untertitel und Beschreibungen regeln die Kriterien 1.2.x.
  • Tests, die als Text ungültig wären, und Inhalte, die ein sinnliches Erlebnis schaffen sollen (zum Beispiel ein Musikstück): mindestens eine beschreibende Benennung.
  • CAPTCHA: eine Textalternative, die seinen Zweck beschreibt, plus ein alternatives CAPTCHA, das einen anderen Sinn nutzt (zum Beispiel Audio zusätzlich zum visuellen).
  • Dekoration, Formatierung, unsichtbare Inhalte: müssen so umgesetzt sein, dass assistive Technologien sie ignorieren können — in HTML mit alt="" oder als CSS-Hintergrundbild.

Typische Fehler in Onlineshops

  • Produktfotos ohne alt oder mit vorgelesenem Dateinamen (IMG_4021.jpg);
  • reine Icon-Buttons für Suche, Warenkorb, Konto oder Schließen ohne zugänglichen Namen;
  • Aktionsbanner, bei denen das Angebot („−30 % an diesem Wochenende“) fest ins Bild eingebettet ist, ohne Alternativtext;
  • Zahlungs- und Vertrauenssiegel, Größentabellen oder Bewertungssterne, die nur als Bilder vorliegen;

So prüfen Sie es

Automatisch: Unser Checker findet Bilder, Bild-Eingabefelder, Objekte, SVGs und Elemente mit role="img" ohne Textalternative sowie Fortschrittsbalken und Messanzeigen ohne Namen (Regeln image alt, input image alt, SVG image alt und verwandte). Ob ein vorhandener Alternativtext stimmt, kann er nicht beurteilen — ein fehlender Befund bedeutet also nicht, dass das Kriterium erfüllt ist.

Manuell: Schalten Sie im Browser die Bilder ab oder nutzen Sie einen Screenreader und gehen Sie eine Produktseite durch. Fragen Sie sich bei jedem Bild: Liefert der Alternativtext dieselbe Information, oder ist das Bild Dekoration und bleibt stumm? Prüfen Sie Icon-Buttons, indem Sie mit der Tab-Taste zu ihnen springen und auf ihren Namen hören.

So beheben Sie es

  • Schreiben Sie Alternativtexte im Produkteditor Ihrer Plattform (Shopify, WooCommerce und die meisten anderen haben für jedes Medium ein Feld „Alt-Text“).
  • Beschreiben Sie, was im Kontext wichtig ist: „Blaues Leinenhemd, Rückansicht“ statt „Hemd“.
  • Geben Sie Icon-Buttons eine sichtbare Beschriftung oder ein aria-label; verbergen Sie das Icon selbst vor assistiven Technologien.
  • Verwenden Sie für rein dekorative Bilder alt="" und lassen Sie das Attribut nicht einfach weg.
  • Ergänzen Sie Diagramme und Infografiken um eine kurze Zusammenfassung oder eine Datentabelle.

Verwandte Kriterien

Häufige Fragen

Braucht nach WCAG jedes Bild einen Alternativtext?

Jedes Bild braucht eine Textalternative, die denselben Zweck erfüllt. Ausnahme sind rein dekorative Bilder: Sie erhalten ein leeres alt-Attribut (alt=""), damit Screenreader sie überspringen.

Was sollte im Alternativtext eines Produktfotos stehen?

Was Käufer aus dem Bild erfahren müssen: das Produkt und die Farbe, das Muster oder das Detail, das es zeigt. Beginnen Sie nicht mit „Bild von“ und wiederholen Sie den Produkttitel nicht wortgleich, wenn er direkt neben dem Foto steht.

Fallen Icon-Buttons unter 1.1.1?

Ja. Ein Bedienelement wie eine Lupe, ein Warenkorb- oder Schließen-Icon braucht einen Namen, der seinen Zweck beschreibt, zum Beispiel „Suchen“ oder „Warenkorb öffnen“. 4.1.2 Name, Rolle, Wert stellt weitere Anforderungen an Bedienelemente.

Kann ein automatischer Checker Alternativtexte prüfen?

Er findet Bilder, Icons und SVGs ganz ohne Textalternative. Ob ein vorhandener Alternativtext zutreffend oder nützlich ist, kann er nicht beurteilen — dafür braucht es einen Menschen.