Nicht-Text-Inhalt (WCAG-Kriterium 1.1.1)

Was bedeutet das Kriterium?

Nicht-Text-Inhalte benötigen eine textliche Alternative. Textalternativen sind ein wichtige Möglichkeit, Informationen für alle zur Verfügung zu stellen, da sie für unterschiedliche Sinne wiedergegeben werden können (z. B. visuell, akustisch oder taktil). Grafische Elemente sollen bspw. mit einem Alternativtext versehen werden.

Bei Bildern soll der Alternativtext kurz und prägnant die relevante Information enthalten, die mit diesem Bild vermittelt werden soll.
Bei Logos soll der Name der Firma oder Einrichtung angegeben werden.
Bei Links soll der Linkzweck – also, wohin der Link führt – angegeben werden.
Bei rein dekorativen Elementen, die keine Information für Nutzer:innen transportieren, sollen diese so gestaltet sein, dass sie von assistierenden Technologien ignoriert werden. Bei einem leeren Alternativ-Text (alt="") ist für Screenreader z. B. klar, dass das Element übersprungen werden kann.

Warum und für wen ist das Kriterium wichtig?

Blinde Nutzer:innen sind bspw. auf Alternativtexte für informationstragende visuelle Elemente (Grafiken, Bilder, grafische Bedienelemente etc.) angewiesen. Audio-Inhalte benötigen z. B. eine textliche Alternative für gehörlose Nutzer:innen. Damit erhalten alle Nutzer:innen möglichst dieselben Informationen zu Nicht-Text-Elementen.

Was sind die häufigsten Fehler bei diesem Kriterium und wie können sie behoben bzw. vermieden werden?

Ein Bild oder Logo hat keinen Alternativtext:

Wenn ein Bild oder Logo keinen Alternativtext aufweist, kann dieser mit alt="Beschreibung des Bildes" hinzugefügt werden. Dekorative Bilder können z. B. mit alt="" für assistierende Technologien als ignorierbar gekennzeichnet werden.

Ein Bild oder Logo hat keinen aussagekräftiger Alternativtext:

Die Beschreibung soll aussagekräftig, aber trotzdem möglichst kurz und prägnant sein. Es soll nur die Information vermittelt werden, die im aktuellen Kontext wichtig ist. D. h., nicht rein visuelle Details müssen auf dem Bild beschrieben werden, sondern die Grundaussage des Bildes bzw. die durch das Bild transportierte Information.

Zum Beispiel: ein Porträt einer Frau mittleren Alters mit schwarzen Haaren und roter Brille:

Im Kontext eines „Steckbriefes“ in der About-Seite eines Unternehmens wäre der Name und die Position wahrscheinlich passend.
Im Kontext einer Website eines Friseursalons, auf der das Foto einen Haarschnitt anpreist, ist der Name der Person irrelevant, vielmehr sollte die Frisur näher beschrieben werden.

Bei Bildern oder Icons, die als Links dienen, soll vorrangig der Linkzweck beschrieben werden, damit eindeutig ist, wohin man gelangt, wenn der Link ausgewählt wird.

Ein dekoratives Bild hat einen nicht leeren Alternativtext:

Hintergrundbilder oder andere Bilder, die einen rein dekorativen Zweck haben (z. B. ein Artikel mit einem generischen Stock-Image, das für sich genommen keine Aussagekraft hat, mit einem Titel, einer Beschreibung und einem Link darunter), sollen für assistierende Technologien als ignorierbar gekennzeichnet werden (bspw. mit einem leeren Alternativtext). Dies erhöht die Usability für Screenreader-Nutzer:innen und verhindert, dass unnötige oder redundante Informationen kommuniziert werden.

Cookie-Einstellungen und externe Dienste