WCAG 2.1 - 1.1.1
Non-text Content
Alle nicht-textuellen Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die denselben Zweck erfüllt, mit Ausnahme der unten aufgeführten Situationen.
Inhalt
Was steht in den Guidelines zum Success Criterium 1.1.1 - Non-text Content?Was Bedeutet das Success Criterium 1.1.1 - Non-text Content?Warum ist es so wichtig, das Success Criterium 1.1.1 - Non-text Content zu beachten?Was hat das Success Criterium 1.1.1 - Non-text Content mit dem BFSG zu tun?Lösungen für 1.1.1 - Non-text Content anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.1.1 - Non-text Content?Was steht in den Guidelines zum Success Criterium 1.1.1 - Non-text Content?
Implementationshinweise
- Controls, Input: Wenn nicht-textueller Inhalt ein Steuerungselement ist oder Benutzereingaben akzeptiert, dann hat er einen Namen, der seinen Zweck beschreibt. (Siehe Erfolgskriterium 4.1.2 für zusätzliche Anforderungen an Steuerungselemente und Inhalte, die Benutzereingaben akzeptieren.)
- Time-Based Media: „Wenn nicht-textuelle Inhalte zeitbasierte Medien sind, bieten textliche Alternativen zumindest eine beschreibende Identifikation der nicht-textuellen Inhalte. (Siehe Richtlinie 1.2 für zusätzliche Anforderungen an Medien.)“
- Test: „Wenn nicht-textueller Inhalt ein Test oder eine Übung ist, die ungültig wäre, wenn sie in Textform präsentiert wird, dann bieten Textalternativen zumindest eine beschreibende Identifikation des nicht-textuellen Inhalts.“
- Sensory: Wenn nicht-textlicher Inhalt hauptsächlich dazu bestimmt ist, ein bestimmtes sensorisches Erlebnis zu schaffen, dann bieten Textalternativen zumindest eine beschreibende Identifizierung des nicht-textlichen Inhalts.
- CAPTCHA: Wenn der Zweck von nicht-textuellen Inhalten darin besteht, zu bestätigen, dass der Inhalt von einer Person und nicht von einem Computer abgerufen wird, werden textuelle Alternativen bereitgestellt, die den Zweck der nicht-textuellen Inhalte identifizieren und beschreiben, und alternative Formen von CAPTCHA, die Ausgabemodi für verschiedene Arten der sensorischen Wahrnehmung verwenden, werden bereitgestellt, um unterschiedlichen Behinderungen Rechnung zu tragen.
- Decoration, Formatting, Invisible: „Wenn nicht-textuelle Inhalte reine Dekoration sind, nur für visuelle Formatierung verwendet werden oder nicht den Benutzern präsentiert werden, dann werden sie so implementiert, dass sie von unterstützender Technologie ignoriert werden können.“
Was Bedeutet das Success Criterium 1.1.1 - Non-text Content?
Success Criterion 1.1.1 – Non-text Content verlangt, dass alle nicht-textlichen Inhalte – wie Bilder, Grafiken, Bedienelemente, Diagramme etc. – eine textuelle Alternative (sogenannter Alt-Text) haben. Dies ermöglicht, dass Menschen mit Sehbehinderungen, die Vorlesesoftware (Screenreader) verwenden, oder auch Suchmaschinen sowie andere assistive Technologien verstehen können, was auf der Website dargestellt wird.
Was bedeutet das?
- Jedem Bild, das nicht nur rein dekorativ ist, muss ein sogenanntes
alt-Attribut mit einer Beschreibung hinzugefügt werden. - Videos oder Audioinhalte benötigen Transkripte oder Beschreibungen.
- Bedienelemente, Icons oder visuelle Statusanzeigen müssen ebenfalls eine verständliche Textalternative bieten.
- Dekorative Grafiken sollten ein leeres
alt-Attribut (alt="") erhalten, damit Screenreader sie überspringen.
Kurz gesagt: Alles, was nicht Text ist, muss für alle Benutzer in Textform verständlich sein.
Warum ist es so wichtig, das Success Criterium 1.1.1 - Non-text Content zu beachten?
Viele Nutzer können Bilder, Grafiken oder andere visuelle Inhalte nicht sehen – z.B. Menschen mit Blindheit oder Sehbehinderungen. Wenn für diese Inhalte keine Alternativen bereitgestellt werden, gehen wichtige Informationen verloren oder wesentliche Funktionen sind nicht zugänglich. Screenreader lesen Text – keine Bilder. Ohne Alt-Texte werden Bilder einfach ignoriert und Nutzende verpassen relevante Informationen und Funktionen.
Was hat das Success Criterium 1.1.1 - Non-text Content mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Anbieter digitaler Produkte und Dienstleistungen, die Anforderungen der WCAG einzuhalten. Success Criterion 1.1.1 ist eine der grundlegenden Anforderungen: Wenn Websites keine Textalternativen für Grafiken, Icons oder Bedienelemente bereitstellen, können Nutzer:innen mit Behinderungen diese nicht, oder nur eingeschränkt, bedienen. Fehlen Alt-Texte, ist die Website nicht BFSG-konform und kann ab 2025 abgemahnt bzw. beanstandet werden. Eine Umsetzung ist also rechtlich zwingend notwendig.
Lösungen für 1.1.1 - Non-text Content anhand von Codebeispielen
Falscher Code
<img src="logo.png">Korrekter Code
<img src="logo.png" alt="Logo der Firma Muster GmbH">Im ersten Beispiel fehlt das `alt`-Attribut. Screenreader-Nutzer erfahren nicht, welches Bild hier eingeblendet wird. Im Gegensatz dazu beschreibt das zweite Beispiel verständlich den Bildinhalt – so wissen alle Nutzer, was dargestellt ist.
Falscher Code
<img src="deco-line.png" alt="Dekorative Linie">Korrekter Code
<img src="deco-line.png" alt="">Das erste Beispiel hat einen unnötigen Alt-Text "Dekorative Linie" für ein rein dekoratives Bild. Das stört Screenreader-Nutzer. Durch ein leeres alt-Attribut (`alt=""`) im zweiten Beispiel weiß der Screenreader, dass das Bild ignoriert werden kann.
Falscher Code
<input type="submit" value="">Korrekter Code
<input type="submit" value="Absenden">Eine Schaltfläche ohne textlichen Wert ist für Screenreader nicht verständlich. Erst die Variante mit Wert "Absenden" macht die Funktion zugänglich.
Wie löse ich Verstöße gegen das Success Criterium 1.1.1 - Non-text Content?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.