Textalternativen – "Für jeden Nicht-Text-Inhalt sind Alternativen in Textform bereitzustellen, die an die Bedürfnisse der Nutzerinnen und Nutzer angepasst werden können."

Alle Inhalte einer Webseite müssen auch in textlicher Form vorhanden sein. Dadurch wird gewährleistet, dass die Webinhalte nicht nur auf dem Bildschirm unterschiedlich dargestellt werden können, sondern ebenso mit Screenreadern gelesen oder in andere Sprachen (einschließlich Symbolsprachen) übersetzt werden können. Textalternativen müssen insbesondere für Grafiken berücksichtigt werden, was gleichermaßen für Grafiken auf Webseiten, in PDF-Dokumenten und anderen Techniken wie Flash-Objekte gilt. Auch andere in einer Webseite eingebettete Objekte wie Multimedia benötigen Textalternativen.

Accessibility-Checkliste: Textalternativen

Diese Accessibility Checkliste hilft bei der Überprüfung einer Webseite auf Konformität zum Erfolgskriterium der Richtlinie 1.1 der Web Content Accessibility Guidelines (WCAG) 2.0 bzw. zu der Bedingung der Anforderung 1.1 der Barrierefreien Informationstechnik-Verordnung – BITV 2.0.

Grafiken:

Alle Grafiken im HTML benötigen eine Textalternative (z.B. ein alt-Attribut), die möglichst knapp und genau den Inhalt beschreibt. Einige besondere Fälle müssen berücksichtigt werden:
- Grafiken, die Objekte, Menschen, Szenen oder Abstraktionen darstellen, die erläutert werden müssen (Produkte, Kunstobjekte usw.) sollen identifiziert werden (alt=“Fotografie: [Titel] von [Künstler]“) und durch eine lange Beschreibung beschrieben werden.
- Grafiken, die nur Text darstellen, erhalten einen Alternativtext mit dem abgebildeten Text.
- Grafiken, die als CAPTCHA oder Test genutzt werden oder einer Sinneserfahrung dienen, benötigen einen identifizierenden Alternativtext.
- Grafiken, die keinen informativen Charakter haben (das können auch Bilder sein), benötigen einen leeren Alternativtext (alt=““). Rein dekorative Grafiken können auch per CSS eingebunden werden.
- Wenn mehrere Grafiken mit einem Alternativtext beschrieben werden können, erhält eine Grafik den beschreibenden Alternativtext (z.B. bei Bewertungsfunktionen mit fünf möglichen Sternchen erhält das erste Sternchen „4 von 5 Punkten“) und die weiteren einen leeren Alternativtext.
- Wenn Grafiken dynamisch ausgetauscht werden, werden die Alternativtexte ebenfalls ausgetauscht.
Verlinkte Grafiken und grafische Komponente benötigen Textalternativen, die den Zweck angeben:
- Für rein grafische Links und Komponente dient die Textalternative als Linktext bzw. Bezeichnung.
- Wenn eine Grafik zusammen mit einem Text ein Link oder eine Komponente bildet, dann muss der Alternativtext leer sein bzw. die Grafik per CSS eingebunden werden, damit die Grafik in Screenreadern ignoriert werden kann. Nur wenn die Grafik eine zusätzliche Information vermittelt (z.B. eine Statusinformation), muss sie mit einer Textalternative versehen werden.
- Bei Client-seitigen Image-Maps muss insbesondere jedes <area> einen Alternativtext mit Angabe von Ziel oder Funktion erhalten.
Wenn Grafiken mit Informationsgehalt auf einer Webseite per CSS eingebunden werden, können sie kein alt-Attribut erhalten; dennoch ist eine Textalternative zu berücksichtigen (z.B. unsichtbarer Text).

Hinweis: Ob eine Textalternative für eine Grafik geeignet ist, hängt von vielen Faktoren wie Kontext der Grafik ab. Es ist daher nicht möglich, für alle Grafiken einen immer passenden Alternativtext zu bestimmen.

CAPTCHA:

Wenn ein sensorischer CAPTCHA (visuell oder auditiv) genutzt wird, muss es mindestens eine Alternative (akustischer CAPTCHA, Honey Pot Trap, Telefon-Service usw.) geben.

Andere Nicht-Text-Inhalte:

Multimedia-Inhalte (einschließlich Live-Audio und Live-Video) benötigen eine identifizierende Textalternative. Weitergehende Anforderungen an Multimedia finden sich in der Anforderung zu zeitbasierten Medien.
Eingebettete Objekte (z.B. Java, Flash) benötigen eine zusammenfassende Textalternative.
Die oben genannten Anforderungen an Grafiken gelten auch für die Grafiken in Flash, PDF und sonstigen Objekten.

Weitere Accessibility-Checklisten

Graue Haare

Dieser Beitrag ist Teil der Serie "Accessibility-Checkliste gegen graue Haare". Zuletzt musste ich mich mit der Barrierefreien Informationstechnik-Verordnung (BITV) 2.0 auseinandersetzen, die gerne als deutsche Fassung der Web Content Accessibility Guidelines (WCAG) 2.0 angesehen wird. Die BITV 2.0 weicht allerdings erstaunlich oft von den WCAG 2.0 ab.

Im Zuge der Untersuchung musste ich mich auch mit dem sogenannten "BITV-Test" der DIAS GmbH - eine Prüfanleitung für barrierefreies Webdesign - auseinandersetzen, um seine Zuverlässigkeit zu bewerten. Auffällig war insbesondere die deutliche Abweichung des "BITV-Tests" von der BITV 2.0 (und den WCAG 2.0).

Diese beiden Umstände haben mich dazu veranlasst, graue Haare für die BITV 2.0 und den "BITV-Test" wie folgt zu vergeben:

Ein graues Haar gibt es für die BITV 2.0, wenn eine Anforderung oder eine Bedingung inhaltlich von den WCAG 2.0 abweicht. Ein graues Haar gibt es auch für einzelne Prüfschritte im "BITV-Test", wenn
1. im Prüfschritt die Bedingung aus der BITV 2.0 nicht geprüft werden kann (z.B. weil nur eine Best-Practice-Technik geprüft wird),
2. im Prüfschritt etwas geprüft wird, das nicht in der BITV 2.0 verlangt wird und
3. der Prüfschritt so allgemein gehalten wird, dass er nicht zuverlässig eingesetzt werden kann.
Für solche Anforderungen und Bedingungen der BITV 2.0, die im Einklang mit den Richtlinien und Erfolgskriterien aus den WCAG 2.0 sind, und solche Prüfschritte im "BITV-Test", die eine Überprüfung der BITV 2.0 zulassen, gibt es drei farbige Haare und ein "OK".

BITV 2.0 (Anlage 1) und WCAG 2.0

Die Anforderung der BITV 2.0 zu Textalternativen weicht ein wenig von der entsprechenden Richtlinie in den WCAG 2.0 ab, indem die Beispiele für Nutzerbedürfnisse weggelassen wurden. Für die Praxis ist das nicht relevant, denn die konkretere Bedingung ist es, die erfüllt sein muss.

Für Anforderung 1.1 zu Textalternativen gibt es genau eine Bedingung in der BITV 2.0: 1.1.1 Nicht-Text-Inhalte.

In erster Linie geht es in Bedingung 1.1.1 um Grafiken und ihre Alternativtexte:

Jede Grafik, die inhaltlich eine Bedeutung hat, benötigt eine Textalternative. In HTML kann das u.a. ein alt-Attribut, ein (unsichtbarer) Text oder eine Beschriftung mit <figcaption> sein.
Der Inhalt des alt-Attributs kann sehr unterschiedlich sein und beispielsweise beschreibend, identifizierend, funktional oder leer sein. Es sind der Zweck der Grafik und der Kontext, die den Alternativtext bestimmen.
Für Links und Komponenten, die nur als Grafik dargestellt werden, ist ein alt-Attribut sinnvoll, aber entscheidend ist, dass Linktexte bzw. Formularbeschriftungen den Zweck bestimmen lassen (vgl. Bedingung 2.4.4 und 2.4.6) und dass solche Elemente eine Bezeichnung haben (vgl. Bedingung 4.1.2). Das bedeutet, dass CSS zwar grundsätzlich für solche Grafiken eingesetzt werden darf, aber Links und Komponenten benötigen neben einer Textalternative auch einen Namen, eine Rolle und einen Wert. Darüber hinaus müssen sie auch bei einfachen layouts wahrgenommen werden können (vgl. Bedingung 1.3.1).

Für weitere Nicht-Text-Inhalte muss die Textalternative den Inhalt zusammenfassen bzw. identifizieren. Hierzu zählen u.a. zeitbasierte Medien, Tests (z.B. Erkennung von Grafikinhalten in einem Intelligenztest), sensorische Inhalte (z.B. Hintergrundmusik), CAPTCHAs und rein dekorative Inhalte. Bei sensorischen CAPTCHAs muss es mindestens eine alternative Möglichkeit geben, den Sicherheitsschutz zu überwinden.

„BITV-Test“ und BITV 2.0

Der „BITV-Test“ bietet vier Prüfschritte zu Textalternativen an:

In Prüfschritt 1.1.1a Alternativtexte für Bedienelemente wird eine Prüfanleitung geliefert, die für verlinkte Grafiken einschließlich Image-Maps geeignet ist. Allerdings deckt der BITV-Test die BITV 2.0 nicht ab:

Wenn grafische Links und/oder Komponenten mittels CSS realisiert werden, wird eine Image-Replacement-Technik verlangt. Vielmehr – und das steht explizit in der BITV 2.0 – müssen solche grafischen Bedienelemente bezeichnet werden. Das geht beispielsweise mit dem title-Attribut für Formularelemente, und zwischenzeitlich kann auch das aria-label-Attribut eingesetzt werden, um Alternativtexte zu ersetzen.
Wenn nebeneinanderstehende Grafiken und Text verlinkt sind und zum gleichen Ziel führen, so wird eine Beschreibung der Grafik im Alternativtext zugelassen. Vielmehr sollten die beiden Inhalte in einem Link stehen und ein leerer Alternativtext für die Grafik vergeben werden; gleiches gilt für die Komponenten.

Insgesamt greift der Prüfschritt viel zu kurz, indem beispielsweise die in der Praxis vorkommenden Techniken mit Hintergrundgrafiken und CSS-Sprites u.ä. nicht aufgegriffen werden, und die Abgrenzung zwischen verlinkten Grafiken im Allgemeinen und Bedienelementen im Speziellen (die in Bedingung 4.1.2 abgehandelt werden) fehlt.

Der Prüfschritt 1.1.1b Alternativtexte für Grafiken und Objekte bietet eine Prüfanleitung entsprechend der BITV 2.0. Der Prüfschritt müsste nach Wissensstand in 2011 aber wesentlich präziser formuliert sein; mit der derzeitigen Beschreibung ist kein zuverlässiges Testen möglich, etwa wenn es um lange Beschreibungen für Info-Grafiken u.ä. geht.

Der Prüfschritt 1.1.1c Leere alt-Attribute für Layoutgrafiken ist ein Beispiel von vielen im „BITV-Test“, in dem nicht das Kriterium aus der BITV 2.0 geprüft wird, sondern eine einzelne Technik. Die Prüfanleitung lässt sich perfekt für die Prüfung von Spacer-GIFs einsetzen, aber es muss darum gehen, ob Grafiken zur Formatierung oder Dekoration eingesetzt werden und ob sie von Screenreadern ignoriert werden können (unabhängig von einer bestimmten Technik).

Der Prüfschritt 1.1.1d Alternativen für CAPTCHAs bietet eine Prüfanleitung entsprechend der BITV 2.0.

Auch wenn die Prüfschritte zu Textalternativen teilweise im Einklang mit der BITV 2.0 sind, so decken sie die Anforderung nicht vollständig ab. Weitere Beispiele für Lücken in der Prüfung sind:

Das Thema „Test“ wird nicht behandelt.
Nicht-Text-Inhalte kommen auch in anderen gängigen Formaten wie PDF oder Flash vor und werden stillschweigend ausgeklammert.
Die Prüfschritte konzentrieren sich auf Alternativtexte (bis auf die Image-Replacement-Technik), dabei geht es um Textalternativen, die vielfältige Formen – nicht nur als Alternativtext – annehmen können.
Gerade in dynamischen Anwendungen kann es vorkommen, dass Grafiken ausgetauscht werden, aber der Alternativtext nicht. Solche und ähnlich gelagerte Probleme werden nicht behandelt (vgl. aber Prüfschritt 4.1.2a zum Austausch von Grafiken bei Komponenten).

Zur Serie "Accessibility-Checkliste gegen graue Haare

Den Anlass für diese Serie finden Sie im einleitenden Beitrag Accessibility-Checkliste gegen graue Haare beschrieben.

Es ist wichtig, dass es in Deutschland Regelungen zur Barrierefreiheit im Web gibt. Allerdings steht die BITV 2.0 in Widerspruch zu internationalen Webstandards und weiteren Industrienormen, was in der Praxis durchaus ein Problem darstellt. Dass der "BITV-Test" diese Differenzen nicht relativiert, sondern verstärkt, hat zur Folge, dass barrierefreies Webdesign in Deutschland missverstanden wird. Die WCAG 2.0 sind stabile und international anerkannte Standards, die in den erläuternden Dokumenten laufend auf den aktuellen Stand der Technik gehalten werden. Die BITV 2.0 ist hingegen starr, und der "BITV-Test" bietet keinesfalls eine geeignete Basis, eine Konformität zu der BITV 2.0 (oder den WCAG 2.0) reliabel zu überprüfen.

Die Serie besteht aus einer Reihe von Checklisten, die jeweils die einzelnen Anforderungen der BITV 2.0 abbilden. Ergänzt werden die Checklisten mit Kritik an einzelne Bedingungen der BITV 2.0 und Kritik an einzelne Prüfschritte im "BITV-Test". Insgesamt handelt es sich bei dieser Serie um 12 Accessibility-Checklisten, die bei Bedarf auch aktualisiert werden: