WCAG 2.0 Richtlinie 1.1 Textalternativen

Dieser Beitrag gehört zur Artikelserie Richtlinien für barrierefreie Webinhalte WCAG 2.0. Er soll die Erfolgskriterien, Bedeutung und Umsetzung der Richtlinie 1.1 Textalternativen darstellen sowie Website Beispiele aufzeigen.

„Stellen Sie Textalternativen für alle Nicht-Text-Inhalte zur Verfügung, so dass diese in andere vom Benutzer benötigte Formen geändert werden können, wie zum Beispiel Großschrift, Braille, Symbole oder einfachere Sprache.“

Erfolgskriterien der Richtlinie 1.1

• 1.1.1 Nicht-Text-Inhalt: Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die einem äquivalenten Zweck dient, mit Ausnahme der unten aufgelisteten Situationen. (Stufe A)

Ausnahmen:

• Steuerelemente, Eingabe: Wenn es sich bei dem Nicht-Text-Inhalt um ein Steuerelement handelt oder Eingaben durch den Benutzer akzeptiert, dann hat dieser einen Namen, der seinen Zweck beschreibt. (Beachten Sie Richtlinie 4.1 für zusätzliche Anforderungen an Steuerelemente und Inhalte, die Eingaben durch den Benutzer akzeptieren.) Beispiel: Button-Grafiken sollten zur Beschreibung einen Namen besitzen (Empfehlung: Button-Text als Alt Tag hinterlegen), um den Zweck des Elements aufzuzeigen bzw. die dahinterliegende Aktion zu beschreiben.

• Zeitbasierte Medien: Wenn es sich bei den Nicht-Text-Inhalten um zeitbasierte Medien handelt, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit. (Beachten Sie Richtlinie 1.2 für zusätzliche Anforderungen an Medien.)

• Test: Wenn es sich bei dem Nicht-Text-Inhalt um einen Test oder eine Übung handelt, die nichtig wäre, wenn sie als Text dargestellt würde, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit. Beispiel: eine Textalternative für einen Hör- oder Grammatiktest bereitzustellen würde kaum Sinn ergeben. Daher kann auf eine Beschreibung ausgewichen werden, die nicht die Inhalte als Textalternative enthält, sondern den Test beschreibt.

• Sensorisch: Wenn Nicht-Text-Inhalt hauptsächlich dafür gedacht ist, eine bestimmte Sinneserfahrung zu schaffen, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit. Beispiel: Gemälde

• CAPTCHA: Wenn der Zweck des Nicht-Text-Inhalts der ist zu bestätigen, dass eine Person und nicht ein Computer auf den Inhalt zugreift, dann werden Textalternativen bereitgestellt, die den Zweck des Nicht-Text-Inhalts identifizieren. Außerdem werden alternative Formen von CAPTCHAs bereitgestellt, die Ausgabeformen für verschiedene Arten der sensorischen Wahrnehmung nutzen, um verschiedenen Behinderungen Rechnung zu tragen. Beispiel: Bereitstellung einer Textalternative zur Beschreibung des Zwecks des CAPTCHAs und alternativer Möglichkeiten zur Authentifizierung.

• Dekoration, Formatierung, unsichtbar: Wenn der Nicht-Text-Inhalt reine Dekoration ist, nur für visuelle Formatierung benutzt wird oder dem Benutzer gar nicht präsentiert wird, dann wird der Inhalt so implementiert, dass er von assistierender Technik ignoriert werden kann. Beispiel: Dekorationsgrafiken, Spacer-Gifs

Bedeutung der Richtlinie

Natürlich denkt man bei der Bestimmung der Zielgruppe für diese Richtlinie sofort an Blinde und Menschen mit schlechtem Sehvermögen oder Taube. Aber auch in Alltags-Situationen erleichtert die Umsetzung dieser Richtlinie den Umgang mit Audio- und visuellen Inhalten für Besucher einer Webseite. Beim Surfen mit vielen Hintergrundgeräuschen (z. B. in der Bahn) oder aufgrund schlechter Internetverbindung ausgeschalteter Bilder erweist sich der Einsatz von Text-Alternativen häufig als hilfreich. Von der Erfüllung dieser Richtlinie im Web profitieren also viel mehr Besucher, nicht nur Behinderte oder Menschen, die auf irgendeine Art in der Internetnutzung eingeschränkt sind. Elektronische Texte sind darstellungsneutral und können dadurch vom Besucher der Website z. B. vergrößert, über Sprachausgabe oder Braille-Zeile wiedergegeben werden. So kann jeder Besucher die Darstellungsform wählen, die am besten für ihn geeignet ist.

Umsetzung der Richtlinie

Die Text-Alternative muss dabei denselben Zweck erfüllen wie der Audio- oder visuelle Inhalt über Bild oder Videos. Für Nicht-Text-Inhalte ist daher folgendes Vorgehen empfehlenswert:

• Bilder/Fotos: Informationen zum Bild/Foto als Alt Tag, z. B. „Foto des Eiffelturms“, „Spielende Kinder“
• Buttons: Nutzung des Button-Textes als Alt Tag, z. B. „Einkaufswagen“, „Warenkorb“, „Formular abschicken“
• Verlinkte Bilder, Logos: Informationen über das Linkziel, z. B.  „Website der Arbeitsagentur“, „www.arbeitsagentur.de“, „Startseite Arbeitsagentur“
• Videos, Audio-Inhalte: Bereitstellung einer Textalternative, die den Inhalt beschreibt oder den Titel angibt
• Dekorationsgrafiken, Platzhalter, etc.: Verwendung eines leeren Alt Tags (alt=““)

Grafiken, die lediglich der Dekoration dienen, sollten generell über CSS (Cascading Style Sheets) eingebunden werden. Sollte eine ausführliche Beschreibung von Bildern erforderlich sein kann mithilfe des Attributes longdesc auch eine erweiterte Text-Alternative bereitgestellt werden. Vorstellbar ist dies beispielsweise bei Diagrammen. Das longdesc-Attribut wird über eine Datei verknüpft, die entweder eine HTML-Seite oder eine einfache txt-Datei ist.

Im Bereich der Imagemaps sind sinnvoll genutzte Alt Tags ebenfalls von großer Bedeutung für die barrierefreie Gestaltung von Webinhalten. Hier sollte unbedingt jedem verlinkten Bereich der Imagemap ein entsprechendes Alt Tag mitgegeben werden, damit die einzelnen Links von Screenreadern erkannt werden können.

Eine Verwendung von Alt Tags bei Grafiken ist auch für die HTML-Validität von Bedeutung. HTML-Dokumente, bei denen nicht alle Alt Tags hinterlegt sind (z. B. alt=““), können nicht validiert werden. Zusätzliche Informationen können mithilfe des Title Attributs angegeben werden, z. B. bei Links, um das Öffnen in einem neuen Fenster zu kennzeichnen. Screenreader berücksichtigen dieses Attribut nur, wenn der Benutzer es aktiviert hat.

Hier wird schnell ersichtlich, dass die Umsetzung dieser Richtlinie durch Erstellung von Text-Alternativen auch für die Optimierung der Seite für Suchmaschinen von Vorteil ist. Diese „sehen“ im Prinzip genauso wie Blinde Menschen mit Screenreader und können nur eine Zuordnung des Bildes durch entsprechende Text-Informationen herstellen.

Beispiele zur Richtlinie

Dass Alt Tags bei Grafiken hinterlegt werden sollten, ist im SEO-Bereich wohl den meisten bekannt. Im hochpreisigen SEA-Keywordsegment sollte man ebenfalls davon ausgehen können, dass auch auf Landingpages alle erforderlichen Alt Tags gesetzt werden. Die Landingpage der Hannoverschen Leben im Kreditbereich ist für Nutzer, die keine Grafiken angezeigt bekommen, allerdings kaum zu bedienen. Wichtige Texte werden durch ihre Platzierung auf der Hintergrundgrafik versteckt. Der Button, der auf dieser Seite den wichtigsten Teil darstellt, da er die Conversion auslösen sollte, ist nicht durch ein Alt Tag hinterlegt und daher auch nicht klickbar. Besonders bei verlinkten Bildern ist es jedoch essentiell, dass alternative Texte hinterlegt werden, die den Link beschreiben.

Hannoversche Leben Landingpage bei ausgeschalteten Grafiken

Aber auch im organischen Bereich gibt es Websites, die sich mit dem Thema SEO und Barrierefreiheit anscheinend noch nicht ausgiebig auseinandergesetzt haben. Online-Shops stellen für viele Menschen eine große Vereinfachung des Alltags dar. Menschen mit Behinderungen und Einschränkungen werden die Vorteile des Online Shoppings aber leider nicht immer gegeben, was auch das folgende Beispiel des Blumenversands Blume2000 zeigt.

Blume2000 Website bei eingeschalteten Grafiken

Blume2000 Website bei ausgeschalteten Grafiken

Sobald keine Grafiken mehr angezeigt werden, gestaltet sich die Auswahl der Blumen extrem schwierig wenn nicht sogar unmöglich. Es wäre hier sinnvoll, als alternative Texte die in den Blumensträußen verwendeten Blumen aufzuzählen, damit sich auch Besucher ohne Grafikdarstellung „ein Bild“ von den Produkten machen können. Positiv zu bemerken ist allerdings die Verlagerung der Bestell-Buttons als Hintergrundgrafiken ins CSS. So können Grafiken, die für Menschen mit Sehbehinderungen nicht unbedingt nötig sind, von Screenreadern leichter ignoriert werden. Alt Tags sollten jedoch auch nicht zu lang sein. Ein Beispiel dafür, dass möglichst viel Information nicht immer gut ist, zeigt der Blumenversand fleurop.de mit einem stolze 289 Zeichen langen Alternativtext:

Fleurop Alternativ Text

Da Braillezeilen maximal 80 Zeichen pro Zeile ausgeben, wird empfohlen, in Alt Tags höchstens 80 Zeichen zu hinterlegen. Längere Texte können mittels long description Attribut ausgelagert werden.

Die Inhalte und Anforderungen der Richtlinie 1.1 Textalternativen sind in der deutschen Übersetzung nachzulesen unter www.w3.org.

Der nächste Artikel beschäftigt sich mit der WCAG 2.0 Richtlinie 1.2 Zeitbasierte Medien.