Unterscheidbar "Nutzerinnen und Nutzern ist die Wahrnehmung des Inhalts und die Unterscheidung zwischen Vorder- und Hintergrund so weit wie möglich zu erleichtern."

BITV 2.0, BITV - Test. 4 identische Kauf-Buttons, nur durch Farbe unterscheidbar. Smiley mit 4 grauen Haaren.

Vordergrundinformationen müssen stets gut vom Hintergrund unterschieden werden können. Visuell gilt es, die Inhalte am Bildschirm z.B. über ausreichende Kontraste und vergrößerbare Texte deutlich wahrnehmbar zu gestalten. Es geht aber auch um die Unterscheidung zwischen auditiven Inhalten und Hintergrundgeräuschen, die sowohl für Schwerhörige als auch für Nutzer einer Sprachausgabe problematisch sein können.

Accessibility-Checkliste: Unterscheidbar

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

Visuelle Darstellung:

  1. Visuelle Hervorhebungen durch Vordergrund- und/oder Hintergrundfarben benötigen eine zweite visuelle Hervorhebung (z.B. Symbol, Fettung, Unterstreichung, Rahmen usw.). Das gilt für alle Inhalte einschließlich Links oder Einträge in Navigationsleisten.
  2. Wenn in Grafiken (z.B. Diagrammen) Farbe zur Unterscheidung von Informationen eingesetzt werden, müssen die Informationen textlich gekennzeichnet oder Muster (z.B. Schraffierung, gestrichelte/durchgezogene Kurven) ergänzend eingesetzt werden.
  3. Das Kontrastverhältnis von Text (einschließlich Schriftgrafiken) muss im Regelfall mindestens 4,5:1 betragen.
  4. Alle Texte müssen sich auf die 2-fache Größe vergrößern lassen (z.B. mit dem Seitenzoom des Browsers), ohne dass es zu Textüberlagerungen oder abgeschnittenen Texten kommt. Nach den WCAG 2.0 sind von diesem Kriterium Untertitel und Schriftgrafiken ausgenommen.
  5. Es ist auf Schriftgrafiken generell zu verzichten, außer die Präsentationsform ist unentbehrlich. Wenn Schriftgrafiken dennoch eingesetzt werden,
    1. ist dies nach den WCAG 2.0 nur zulässig, wenn es keine alternative Möglichkeit für die Präsentationsform gibt (z.B. mit Webfonts oder MathML) und
    2. muss es eine Möglichkeit geben, auf eine Darstellung nur mit Text (ohne Grafik) zu wechseln.

Multimedia:

Automatisch startendes Audio muss vom Nutzer angehalten/ausgeblendet oder leiser gestellt werden können (sei es durch einen Mechanismus auf der Webseite oder in ihrer Software), oder es muss nach drei Sekunden automatisch anhalten.

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 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.
  • kein graues Haar (OK) 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

kein graues Haar (OK) Die Anforderung der BITV 2.0 „Unterscheidbar“ weicht ein wenig von der entsprechenden Richtlinie in den WCAG 2.0 ab, indem statt auf das Sehen und das Hören auf die Wahrnehmbarkeit eingegangen wird. Für die Praxis ist das nicht relevant, denn die konkretere Bedingungen sind es, die erfüllt sein müssen.

Auf Priorität I der BITV 2.0 werden fünf Bedingungen zu „Unterscheidbar“ formuliert:

ein graues Haar Die Bedingung 1.4.1 Farbe zielt auf Farbfehlsichtigkeit ab. Farbe darf und soll eingesetzt werden – auch um Informationen voneinander zu unterscheiden -, aber Farbe darf nicht das alleinige Unterscheidungsmerkmal sein. Beispiele für die Unterscheidung nur durch Farbe sind:

  • Der aktuelle Eintrag in der Navigation wird nur durch eine andere Hintergrundfarbe von den anderen Einträgen unterschieden,
  • Links im Fließtext sind nicht unterstrichen und unterscheiden sich nur durch Farbe vom umgebenden Text,
  • Pflichtfelder oder Fehleingaben in einem Formular werden nur durch eine andere Farbe gekennzeichnet oder
  • In einem Diagramm werden zwei Kurven in unterschiedlichen Farben gezeigt.

Informationen, die durch Farbe vermittelt werden, benötigen mindestens eine weitere visuelle Kennzeichnung (z.B. eine zusätzliche Formatierung, ein vorangestelltes Symbol oder unterschiedliche Linientypen in Kurvendiagrammen).

Die Bedingung gilt für die Farbdarstellung bei Standardbildschirmeinstellungen. In der BITV 2.0 wird dieser Umstand durch zwei wesentliche Änderungen in der Bedingung nicht deutlich:

  1. Nach der BITV 2.0 darf Farbe nicht als einziges Mittel eingesetzt werden. Das entsprechende Erfolgskriterium in den WCAG 2.0 spricht hingegen davon, dass Farbe nicht als einziges visuelles Mittel eingesetzt werden darf. Dieser Unterschied mag auf den ersten Blick trivial sein, aber nach den WCAG 2.0 wird dadurch erst deutlich, dass es um die übliche Bildschirmdarstellung geht.
  2. Weil in der BITV 2.0 eine normative Anmerkung aus den WCAG 2.0 nicht übernommen wurde, wird aus Bedingung 1.4.1 nicht deutlich, dass der programmtechnische Zugriff (z.B. durch Screenreader) oder andere visuelle Darstellungen (z.B. in einem Kontrastmodus) von durch Farbe vermittelten Informationen hier ausgenommen und in Anforderung 1.3 behandelt werden.

ein graues Haar Zur Unterscheidbarkeit gehört auch, dass Audioinhalte und Sprachausgabe voneinander unterschieden werden können. Wenn auf einer Webseite Audio automatisch abgespielt wird, dann gibt die Bedingung 1.4.2 Audio-Kontrolle vor, dass es entweder nach drei Sekunden aufhört oder dass es abgeschaltet bzw. leiser eingestellt werden kann. Das Kriterium gilt auch für automatisch abgespielte Videos, wenn sie Audio enthalten.

Dieses Kriterium ist nach den WCAG 2.0 eines von vier Erfolgskriterien, die für eine Konformität zwingend einzuhalten sind. Wenn Bedingung 1.4.2 der BITV 2.0 nicht erfüllt wird, können Nutzer einer Sprachausgabe die Seite möglicherweise nicht mehr bedienen, denn das Audio und die Sprachausgabe überlagern sich gegenseitig. In der BITV 2.0 selbst wird diese Grundvoraussetzung für die Barrierefreiheit nicht berücksichtigt.

kein graues Haar (OK) Minimale Kontrastverhältnisse für Text werden in 1.4.3 Kontrast vorgegeben. Das Kontrastverhältnis zwischen einer Vordergrundfarbe und einer Hintergrundfarbe kann zwischen 1:1 (kein Brillanzunterschied) und 21:1 (schwarz/weiß) liegen. Im Allgemeinen muss das Kontrastverhältnis mindestens 4,5:1 betragen.

Die Bedingung ist vor allem für solche Nutzer erforderlich, die aufgrund einer Sehbeeinträchtigung schlechter sehen, aber dennoch kein Kontrastmodus o.ä. einsetzen. Das Kriterium gilt nur für Text, allerdings mit folgenden Ausnahmen:

  • Logos oder Markennamen unterliegen dem Kriterium nicht.
  • Großer Text (mindestens 18pt oder mindestens 14pt und fett) muss ein Kontrastverhältnis von lediglich 3:1 aufweisen.
  • Nebensächliche Texte wie inaktive Komponente, dekorative Texte oder zufällig erscheinende Texte (z.B. ein Autokennzeichen auf einem Foto mit anderem signifikanten Inhalt) unterliegen dem Kriterium nicht.

ein graues Haar Im Mittelpunkt der Bedingung 1.4.4 Veränderbare Textgröße steht die Möglichkeit, Texte ohne Hilfsmittel vergrößern zu können, ohne dass es dabei zu Textüberlagerungen oder abgeschnittenen (verdeckten) Inhalten kommt. Die Textvergrößerung basiert dem Grunde nach auf die Seitenzoom-Funktion der Anwendung, mit der Webinhalte angezeigt werden. Nur wenn Nutzer nicht über entsprechende Browser verfügen sollten, muss die Webentwicklung andere Möglichkeiten der Textvergrößerung bieten (z.B. reine Schriftvergrößerung, Style-Switcher). Best-Practice ist sicher, wenn mehrere Möglichkeiten der Textvergrößerung geboten werden.

Die Bedingung ist vor allem für solche Nutzer erforderlich, die aufgrund einer Sehbeeinträchtigung schlechter sehen, aber dennoch kein Vergrößerungssystem o.ä. einsetzen. Das Kriterium gilt nur für Text, allerdings machen die WCAG 2.0 folgende Ausnahmen:

  • Untertitel müssen nicht vergrößert werden, denn sie würden dabei Videoinhalte verdecken.
  • Schriftgrafiken müssen nicht vergrößert werden, weil – sofern es sich um Rastergrafiken handelt – eine Vergrößerung nicht zu einer besseren Leserlichkeit führt.

Unklar ist, warum diese Ausnahmen nicht in der BITV 2.0 übernommen wurden.

Anmerkung zum Erfolgskriterium in den WCAG 2.0: Die Textvergrößerung dient zwar dazu, Texte besser unterscheidbar zu machen, aber es handelt sich bei diesem Kriterium um die Möglichkeit, die Bildschirmdarstellung anzupassen. Es würde dem Verständnis des Kriteriums helfen, wenn in Erfolgskriterium 1.4.4 der WCAG 2.0 ein Hinweis wie in Erfolgskriterium 1.4.1 berücksichtigt worden wäre, dass variierende visuelle Darstellungskodierungen (z.B. die reine Schriftvergrößerung) auch in Richtlinie 1.3 behandelt werden.

kein graues Haar (OK) Weil Schriftgrafiken schwieriger an Nutzerbedürfnisse (z.B. Textgröße, Farbe, Zeichenabstand) angepasst werden können, sollten Texte statt Schriftgrafiken genutzt werden. Lediglich Logos und Markennamen und solche Texte, die eine ganz bestimmte visuelle Präsentationsform benötigen (z.B. in einem Test) dürfen als Schriftgrafik nach 1.4.5 Schriftgrafiken eingesetzt werden.

Weitere Schriftgrafiken sind nur dann zulässig, wenn sie sich individuell an Nutzerbedürfnisse anpassen lassen; diese Festlegung bedeutet, dass es in solchen Fällen eine Funktion auf der Webseite geben muss, die Schriftgrafiken durch Text ersetzen lässt.

Die Bedingung aus der BITV 2.0 entspricht weitgehend dem Kriterium aus den WCAG 2.0, nur lassen die WCAG 2.0 weitere Ausnahmen zu. Schriftgrafiken dürfen eingesetzt werden,

  • wenn sichergestellt werden muss, dass eine bestimmte Schriftart für die Textdarstellung verwendet wird und die Webentwicklung nicht über die Rechte verfügt, einen bestimmten Webfont im Web zu verbreiten. Praktisch wird in solchen Fällen die Ausnahme zu unentbehrlichen Präsentationsformen greifen.
  • Wenn zwar bestimmte alternative Techniken besser für die Darstellung des Textes geeignet sind (z.B. MathML für Formeln oder SVG für Info-Grafiken), aber diese nicht zugänglichkeitsunterstützend sind (Konformitätsbedingung 4 der WCAG 2.0). Die BITV 2.0 berücksichtigt weder die Ausnahmeregelung noch wurden die Konformitätsbedingungen von den WCAG 2.0 übernommen, so dass die BITV 2.0 praktisch verlangt, nicht zugänglichkeitsunterstützende Techniken einzusetzen. Die Relevanz dieses Aspekts scheint derzeit noch vernachlässigbar zu sein, allerdings nur bis HTML5 offiziell als Webstandard vom W3C verabschiedet wird.

„BITV-Test“ und BITV 2.0

Der „BITV-Test“ bietet sieben Prüfschritte zu „Unterscheidbar“ an:

Hinweis: Die Benutzung von Farbe (Bedingung 1.4.1) ist im „BITV-Test“ etwas versteckt und kann in Prüfschritt 1.3.3a nachgelesen werden.

kein graues Haar (OK) Der Prüfschritt 1.4.2a Ton abschaltbar bietet eine Prüfanleitung entsprechend der BITV 2.0.

ein graues Haar Der Prüfschritt 1.4.3a Kontraste von Texten ausreichend lässt zwar die Kontrastverhältnisse von Text prüfen, aber es werden gleich mehrere Anforderungen gestellt, die nicht von der BITV 2.0 abgeleitet werden können:

  • Auch wenn auf einer Webseite ein Style-Switcher angeboten wird, der zu einer Darstellung der gleichen Inhalte bei Einhaltung der minimalen Kontrastverhältnisse wechseln lässt, wird im „BITV-Test“ in erster Linie die Ausgangssituation geprüft. Hier kommt eine Schwäche der BITV 2.0 zur Geltung, denn in der BITV 2.0 wurden die Konformitätsbedingungen aus den WCAG 2.0 (hier: Konformitätsbedingung 1) nicht übernommen. Die Folge ist, dass in der Prüfanleitung die Bedingung frei interpretiert wurde, obwohl nach den WCAG 2.0 recht deutlich erklärt wird, dass ein Style-Switcher unter bestimmten Voraussetzungen zur Erfüllung des Erfolgskriteriums zulässig ist.
  • Das Kontrastverhältnis zwischen einem farbigen Link zum Hintergrund im Vergleich zum Kontrastverhältnis des umgebenden Textes zum Hintergrund soll einen Unterschied von mindestens 3:1 aufweisen. Das ist zwar Best-Practice, aber nicht erforderlich für die Erfüllung der Bedingung.
  • Offenbar sollen die Kontrastverhältnisse von Icons mitgeprüft werden. Die BITV 2.0 fordert jedoch ausreichende Kontrastverhältnisse nur für Text und Schriftgrafiken.

ein graues Haar Der Prüfschritt 1.4.3b Kontraste von Grafiken ausreichend lässt zwar die Kontrastverhältnisse von Schriftgrafiken prüfen, aber es werden Grafiken auch ohne Text geprüft, was nicht von der BITV 2.0 abgeleitet werden kann. Außerdem wird mit Sätzen wie „In der Regel nicht anwendbar ist der Prüfschritt auf grafische Hervorhebungen.“ – wie an vielen anderen Stellen auch – unterstrichen, dass der „BITV-Test“ nicht zuverlässig angewandt werden kann. Hier wird beispielsweise nicht erklärt, was mit „In der Regel“ gemeint ist.

ein graues Haar Warum Prüfschritt 1.4.3c Inhalte bei benutzerdefinierten Farben erkennbar bei Anforderung 1.4 einsortiert ist, ist unklar, denn es handelt sich um die Prüfung eines vereinfachten Layouts nach Anforderung 1.3. Die Prüfanleitung ist unstrukturiert (z.B. der Kontrastmodus ist nicht vergleichbar mit der Screenreadernutzung) und beschreibt eher triviale Aspekte ausführlich (z.B. Listenpunkte) und wichtige Aspekte oberflächlich (z.B. Hintergrundgrafiken für Bedienelemente). Mit gutem Willen lässt sich die Prüfanleitung anwenden, aber objektiv bewertet ist sie nicht zuverlässig anwendbar.

ein graues Haar Der Prüfschritt 1.4.4a Schriftgröße variabel 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. Auch wenn die reine Schriftvergrößerung eine Best-Practice-Technik ist, so gibt es in der Prüfanleitung mehrere Probleme:

  • Es wird eine Schriftvergrößerung um den Faktor 1,5 geprüft, obwohl die BITV 2.0 eine 2-fache Vergrößerung verlangt.
  • Die Prüfanleitung gibt an, dass horizontales Scrollen für Fließtexte bei der Schriftvergrößerung nicht akzeptiert wird, was nicht aus Bedingung 1.4.4 abgeleitet werden kann. Dieses Kriterium kann von Bedingung 1.4.8 auf Priorität II abgeleitet werden, wobei im „BITV-Test“ die konkreten Rahmenbedingungen, die bei der Vermeidung von horizontalem Scrollen zu beachten sind, nicht berücksichtigt wurden (z.B. Testumgebung oder Bewertung bei tabellarischen Daten).
  • In der Prüfanleitung werden Schriftgrafiken von der Prüfung ausgenommen, obwohl in der BITV 2.0 die Ausnahmeregelung für Schriftgrafiken aus den WCAG 2.0 nicht übernommen wurde. Das kann auch positiv bewertet werden.
  • Die reine Schriftvergrößerung ist nur für die Textvergrößerung in alten Browsern wie Internet Explorer 6 und früher relevant, die über keinen Seitenzoom verfügten.

kein graues Haar (OK) Der Prüfschritt 1.4.4b Bei Zoom auf 200% benutzbar bietet eine Prüfanleitung entsprechend der BITV 2.0.

kein graues Haar (OK) Der Prüfschritt 1.4.5a Verzicht auf Schriftgrafiken bietet eine Prüfanleitung entsprechend der BITV 2.0.

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:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.