Anpassbar – "Inhalte sind so zu gestalten, dass sie ohne Informations- oder Strukturverlust in unterschiedlicher Weise präsentiert werden können."

Die Inhalte einer Webseite werden nicht immer bei Standardeinstellungen am Bildschirm betrachtet und müssen deshalb auch unter verschiedenen anderen Bedingungen anpassbar sein. Wenn die Webseite in einem Screenreader gelesen wird, dann kommt es vor allem darauf an, dass visuell erkennbare Strukturen und Zusammenhänge linear nachvollzogen werden können. Wenn hingegen ein Nutzer die Bildschirmeinstellungen ändert (z.B. durch einen Kontrastmodus), dann müssen die Inhalte und deren Zusammenhang in der vereinfachten visuellen Darstellung ebenfalls vollständig wahrgenommen werden können.

Accessibility-Checkliste: Anpassbar

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

Alle Informationen und ihre visuell vermittelten Zusammenhänge müssen bei vereinfachten Bildschirmdarstellungen und in einem Screenreader nachvollzogen werden können. Die vereinfachte Darstellung am Bildschirm unterliegt in dieser Checkliste zwei Restriktionen:

Informationsverluste, die aufgrund von Farbe alleine visuell verloren gehen, werden gesondert in Anforderung 1.4 behandelt.
Eine vereinfachte visuelle Darstellung kann durch viele Einstellungen erwirkt werden, etwa durch benutzereigene Farben, Mindestschriftgrößen oder eigene Schriftarten. Im Folgenden wird nur auf den Kontrastmodus und die Vergrößerung von Text eingegangen.

Information:

Informationen dürfen nicht verloren gehen, wenn der Nutzer Farben durch eigene Farbschemata ersetzt (z.B. im Kontrastmodus). Das betrifft insbesondere Informationen in Hintergrundgrafiken.
Gruppen von Steuerelementen mit einer gemeinsamen Bezeichnung müssen mit <fieldset>/<legend> oder WAI-ARIA so aufbereitet werden, dass die Information für Screenreader im Formularmodus verfügbar ist.
Wenn eine Webseite über Live-Regionen (z.B. Statuszeilen u.ä.) verfügt, dann müssen sie mit HTML5 bzw. ARIA so aufbereitet sein, dass Screenreader die Update-Informationen erfassen können.
Die Lesereihenfolge (z.B. in Sprachausgaben oder bei Textvergrößerung) muss der Bedeutung der Inhalte entsprechen. Das gilt auch, wenn Inhalte zur Seite dynamisch hinzugefügt werden.
Alle Hinweise im Text (z.B. Anweisungen) müssen sich auch auf Textstellen beziehen, damit sie in einer Darstellung ohne CSS oder Grafik nachvollzogen werden können. Das gilt beispielsweise für Hinweise auf
- Komponenten mit verschiedenen Formen, die als Grafik eine passende Textalternative benötigen,
- Komponenten mit unterschiedlichen Farben, weil sie bei benutzerdefinierten Farben oder in einem Screenreader nicht unterschieden werden können,
- Komponenten mit unterschiedlicher Größe, etwa weil eine Mindestschriftgröße eingestellt wurde, oder
- Komponenten mit unterschiedlicher Positionierung oder Ausrichtung, weil sie in Screenreadern oder bei Textvergrößerung nicht lokalisiert werden können.

Struktur:

Absätze und andere zusammengehörige Inhalte (z.B. Beschriftungen für Formularelemente) müssen mit <p> ausgezeichnet werden, damit sie in verschiedenen Situationen (z.B. Textvergrößerung) zusammenhängend dargestellt werden können.
Visuell erkennbare Überschriften müssen mit einem der dafür vorgesehenen Überschriftenelemente ausgezeichnet werden. Da Flash keine Strukturelemente für Überschriften bereitstellt, müssen in Flash solche visuellen Darstellungen in Textform bereitgestellt werden.
Visuell erkennbare Listen müssen mit geeigneten Listenelementen ausgezeichnet werden. Da Flash keine Strukturelemente für Listen bereitstellt, müssen in Flash solche visuellen Darstellungen in Textform bereitgestellt werden.
Tabellarische Daten müssen als Datentabelle aufbereitet werden. Hierzu gehört insbesondere, dass Überschriftenzellen als <th> strukturiert werden. Tabellenüberschriften können als <caption>, <figcaption> oder als Überschrift ausgezeichnet werden.
Generell gilt für jede visuelle Hervorhebung, dass sie semantisch oder textlich vorhanden sein muss. Das können beispielsweise einfache Hervorhebungen (fett, kursiv), die Anzeige der aktuellen Position in der Navigation (z.B. vorangestelltes Icon) oder Zitate sein.

Beziehungen:

Wenn durch die Formatierung eine Beziehung zwischen Überschriften erkennbar ist, dann ist die Überschriftenhierarchie über passende Überschriftenelemente abzubilden.
Beziehungen zwischen Listen (z.B. eine verschachtelte Liste) müssen auf der Strukturebene abgebildet werden.
Tabellarische Daten in komplexen Tabellen müssen durch die Verknüpfung von Überschriftenzellen und Datenzellen nachvollziehbar sein.
Formularbeschriftungen (<label>) müssen eindeutig mit den dazugehörigen Steuerelementen verknüpft werden.

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 ist im Einklang mit der Richtlinie aus den WCAG 2.0.

In der BITV 2.0 werden drei Bedingungen zu Anforderung 1.3 („Anpassbar“) formuliert:

In erster Linie geht es in Bedingung 1.3.1 Informationen und Beziehungen darum, dass Nutzer die Darstellung von Webseiten verändern (z.B. mit einem Kontrastmodus) oder die Webseite ohne Bildschirm lesen (z.B. mit einem Screenreader) und dass die Webseite in solchen vereinfachten Darstellungen immer noch nachvollziehbar sein muss. Informationen, Strukturen und auch visuell vermittelte Beziehungen zwischen einzelnen Informationen müssen in einer vereinfachten Darstellung immer noch wahrgenommen werden können.

Gerade einfachere Darstellungen am Bildschirm umfassen eine Vielzahl an Bildschirmeinstellungen, die bei einer Konformitätsprüfung berücksichtigt werden müssten. Hierzu zählen neben einem Kontrastmodus auch Browsereinstellungen (z.B. minimale Schriftgröße, eigene Schriftarten) und User-Style-Sheets. In der Praxis wird im Hinblick auf eine einfache visuelle Darstellung am Bildschirm bestenfalls die Webseite in einem Kontrastmodus geprüft. Die Bedingung spricht aber auch zahlreiche weitere Bildschirmdarstellungen an.

Die Bedingung umfasst insbesondere folgende Aspekte:

Alle Informationen müssen im Kontrastmodus sichtbar sein. Das betrifft vor allem Informationen, die mittels CSS dargestellt werden (z.B. in Hintergrundgrafiken). Informationen und Beziehungen, die alleine aufgrund von Farbgebung verloren gehen, werden im Übrigen in Bedingung 1.4.1 behandelt.
Informationen, die durch eine visuelle Formatierung vermittelt werden (z.B. Hervorhebungen in einer Navigationsleiste oder eine besondere Formatierung im Text), müssen für Screenreader durch eine semantische Auszeichnung oder durch zusätzlichen Text gekennzeichnet werden. Solche Informationen müssen auch im Kontrastmodus nachvollzogen werden können.
Visuell erkennbare Strukturen (z.B. Absätze, Überschriften, Listen oder Datentabellen) müssen vor allem für Screenreadernutzer durch geeignete semantische Auszeichnungen aufbereitet werden. Mit manchen Techniken können solche Strukturen nicht angegeben werden (z.B. Überschriften in Flash); in solchen Fällen muss ein Zusatztext die Identifizierung der Struktur ermöglichen.
Gruppierte Inhalte und ihre semantische Bedeutung müssen ebenfalls wahrgenommen werden können.
Visuell erkennbare Beziehungen zwischen einzelnen Strukturen (z.B. Überschriftenhierarchien, verschachtelte Listen) und Beziehungen zwischen Inhalten (z.B. Beschriftungen für Formularelemente oder Beziehungen zwischen Zellen in komplexen Datentabellen) müssen vor allem in einem Screenreader wahrgenommen werden können.
Auf dynamischen Seiten müssen Aktualisierungen einzelner Inhalte in einem Screenreader wahrgenommen werden können (Live-Regionen).

Eine bedeutungstragende Lese-Reihenfolge wird in Bedingung 1.3.2 Aussagekräftige Reihenfolge gefordert. Inhalte müssen linearisierbar sein, was unter dem Strich bedeutet, dass einzelne Inhaltsblöcke in einer Layout-freien Ausgabe stets zusammenhängend ausgegeben werden müssen; auch bei vergrößerter Schrift muss die Lese-Reihenfolge nachvollziehbar sein. Die Bedingung sagt nichts darüber aus, ob eine Navigation vor dem Inhalt oder ein Inhalt vor der Navigation stehen muss, sondern dass zuerst Navigation und dann Inhalt oder zuerst Inhalt und dann Navigation im Code stehen müssen, um beispielsweise in einer Sprachausgabe vorgelesen werden zu können. Konkret geht es um folgende Aspekte:

Eine bestimmte lineare Darstellung ist nur dann erforderlich, wenn dadurch die Aussagekraft der Inhalte verändert wird.
Es kann mehr als eine „richtige“ Lese-Reihenfolge geben.
Es muss nur eine richtige Reihenfolge berücksichtigt werden.

Textliche Hinweise auf Komponenten müssen nach 1.3.3 Sensorische Merkmale auch bei vereinfachten Layouts (z.B. in einem Screenreader oder im Kontrastmodus) nachvollziehbar sein. Wenn beispielsweise „auf den Knopf rechts“ gedrückt werden soll, muss die Referenzierung angepasst werden, damit sie linearisiert nachvollzogen werden kann. Bei „auf den grünen Link drücken“ muss die Wahrnehmbarkeit nicht nur im Screenreader, sondern auch bei benutzerdefinierten Farben gewährleistet werden. Dabei geht es nicht darum, auf Komponenten zu verzichten, die eine bestimmte Farbe oder Form (unter anderem) haben, sondern die Komponente oder deren Referenzierung im Text müssen in aller Regel textlich ergänzt werden.

In den WCAG 2.0 ist dieses Kriterium auf Komponenten beschränkt. In der BITV 2.0 müssen Verweise auf sämtliche Elemente berücksichtigt werden, also z.B. auch Hinweise auf Sidebars oder einfache Links.

„BITV-Test“ und BITV 2.0

Der „BITV-Test“ bietet zehn Prüfschritte zu Anforderung 1.3 („Anpassbar“) an:

Die ersten sieben Prüfschritte behandeln Bedingung 1.3.1. Eine Durchsicht der Prüfanleitungen zeigt drei Probleme in allen Prüfschritten auf:

Die Aspekte eines einfacheren Layouts am Bildschirm werden gar nicht berücksichtigt. Zumindest der Kontrastmodus ist im „BITV-Test“ etwas versteckt und kann in Prüfschritt 1.4.3c nachgelesen werden.
Das Kriterium der BITV 2.0 beschreibt, dass wenn Strukturen von Inhalten visuell erkennbar sind, diese dann entweder durch semantische Auszeichnung oder in Textform vermittelt werden müssen. Der „BITV-Test“ vernachlässigt die Textform.
Darüber hinaus handelt es sich bei den Prüfschritten streng genommen um Anleitungen zur Überprüfung einzelner Best-Practice-Techniken und nicht der Bedingung.

Die folgenden Prüfschritte beschränken sich also alle auf die HTML-Auszeichnung für Screenreader.

Der Prüfschritt 1.3.1a HTML-Strukturelemente für Überschriften bietet eine Prüfanleitung entsprechend der BITV 2.0, wenn die obengenannten Punkte nicht berücksichtigt werden. Anmerkung: Nach der Anleitung soll auch geprüft werden, ob die Überschriftentexte aussagekräftig sind, was ein Kriterium nach Bedingung 2.4.6 ist.
Obwohl Prüfschritt 1.3.1b HTML-Strukturelemente für Listen weitgehend dafür geeignet ist, Konformität zur BITV 2.0 zu überprüfen, so gibt es drei Aspekte in der Prüfanleitung, die in Widerspruch zur BITV 2.0 stehen:
1. Dass Listen mit den dafür vorgesehenen Elementen ausgezeichnet werden sollen, wird in dem Prüfschritt behandelt, aber die Beziehung von Listen untereinander nicht.
2. Nach der Anleitung müssen Menüs als Listen ausgezeichnet werden. Das stellt eine Best-Practice-Technik dar, aber die Technik ist eine von mehreren Techniken – nach Bedingung 2.4.1.
3. Listen für wiederkehrende Elemente wie Blätternavigationen oder A-Z-Listen werden ausdrücklich ausgenommen. Das ist – ebenfalls nach Bedingung 2.4.1 – in Ordnung, aber Listen stellen gerade in solchen Situationen eine gute Lösung dar.
Der Prüfschritt 1.3.1c HTML-Strukturelemente für Zitate bietet eine Prüfanleitung entsprechend der BITV 2.0, wenn die obengenannten Punkte nicht berücksichtigt werden.
Der Prüfschritt 1.3.1d Inhalte gegliedert bietet eine Prüfanleitung entsprechend der BITV 2.0, wenn die obengenannten Punkte nicht berücksichtigt werden. Anmerkung: Es gibt Überschneidungen mit Prüfschritt 1.3.1a, und auch hier fließen Aspekte aus der Bedingung 2.4.6 ein.
Der Prüfschritt 1.3.1e Datentabellen richtig aufgebaut bietet eine Prüfanleitung entsprechend der BITV 2.0, wenn die obengenannten Punkte nicht berücksichtigt werden. Anmerkung: Es findet keine Abgrenzung zu Listen statt, die vor allem bei zweispaltigen tabellarischen Daten eingesetzt werden können.
Der Prüfschritt 1.3.1f Zuordnung von Tabellenzellen bietet eine Prüfanleitung entsprechend der BITV 2.0, wenn die obengenannten Punkte nicht berücksichtigt werden.
Der Prüfschritt 1.3.1g Kein Strukturmarkup für Layouttabellen bietet eine Prüfanleitung entsprechend der BITV 2.0, wenn die obengenannten Punkte nicht berücksichtigt werden. Anmerkung: Der Prüfschritt ist dem Grunde nach eine Teilmenge von Prüfschritt 1.3.1e.

Hinweis: Die Beziehung zwischen Formularbeschriftungen und Formularelementen wird im „BITV-Test“ in Prüfschritt 3.3.2a behandelt.

Zur Lese-Reihenfolge bietet der „BITV-Test“ zwei Prüfschritte:

Der Prüfschritt 1.3.2a Layouttabellen linearisierbar bietet eine Prüfanleitung entsprechend der BITV 2.0. Anmerkung: Der Prüfschritt ist dem Grunde nach eine Teilmenge von Prüfschritt 1.3.2b.
Der Prüfschritt 1.3.2b Sinnvolle Reihenfolge beschreibt einerseits die Kriterien für die Lese-Reihenfolge und andererseits die Kriterien für die Fokus-Reihenfolge (Bedingung 2.4.3). Abgesehen von der unklaren Abgrenzung ist der Prüfschritt recht unstrukturiert und für eine zuverlässige Prüfung nach BITV 2.0 nicht geeignet. Beispielsweise gilt der Prüfschritt „nur“ für Webseiten, die CSS verwenden, aber die Problematik der Lese-Reihenfolge kann es auf jede Webseite – und ebenfalls bei anderen Techniken wie Flash oder PDF – geben. Vereinfachte Layouts am Bildschirm (z.B. bei Schriftvergrößerung) werden nicht berücksichtigt.

Prüfschritt 1.3.3a Ohne Bezug auf sensorische Merkmale nutzbar wirkt ebenfalls unstrukturiert und unzuverlässig. Es werden Bedingung 1.3.3 und Bedingung 1.4.1 geprüft, was durchaus bedenklich ist, denn in Bedingung 1.3.3 geht es um vereinfachte Layouts (z.B. ein Kontrastmodus oder in einem Screenreader) und in Bedingung 1.4.1 um Farbfehlsichtigkeit (bei Standardeinstellungen am Bildschirm). Dieser entscheidende Unterschied wird nicht erläutert.

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: