Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Wie barrierefrei ist barrierefrei?

Wie barrierefrei ist barrierefrei?

Ende Oktober hat Webkraut Jan Eric Hellbusch seine eigene Webseite dem überfälligen Relaunch unterzogen. Als Spezialist für Barrierefreiheit liegt die Messlatte diesbezüglich natürlich recht hoch. Die Webkrauts-Redaktion hat einmal nachgehakt: Wie barrierefrei ist seine Webseite denn nun wirklich?

Pünktlich zum zehnten Geburtstag seit dem Kauf der Domain www.barrierefreies-webdesign.de hat Jan Eric Hellbusch am 29. Oktober 2011 die neue Version der Webseite online gestellt. Da er im Frühling gerade erst zusammen mit Kerstin Probiesch das Buch »Barrierefreiheit verstehen und umsetzen — Webstandards für ein zugängliches und nutzbares Internet« veröffentlicht hat, stellt das natürlich hohe Ansprüche an den eigenen Auftritt.

3D-Visualisierung des Codes der Startseite
Schlanker Code, dargestellt mit der Firefox-Erweiterung Tilt

Nicolai Schwarz von der Webkrauts-Redaktion fragt nach, wie barrierefrei der Auftritt über barrierefreies Webdesign ist.

Nicolai:

Jan, Du hast Ende Oktober Deinen Webauftritt www.barrierefreies-webdesign.de mit neuem Design und neuen Inhalten online gestellt. Da du ja Spezialist für barrierefreie Webseiten bist: Ist deine Seite nun barrierefrei? Nach dem Domainnamen zu urteilen, müsste sie es ja sein.

Jan:

Könnte man die Frage mit einem einfachen »Ja« oder »Nein« beantworten, wären heute alle professionellen Webauftritte barrierefrei. Nein, trotz der Webstandards zur Barrierefreiheit wird die tatsächliche Nutzbarkeit immer noch von Inhalten und nicht zuletzt den Nutzern abhängig sein. 100%ige Barrierefreiheit kann wohl nie erreicht werden. Barrierefreiheit ist ein Ziel und kein Zustand.

Dennoch: Ich habe mir alle Mühe gegeben, die Erfolgskriterien der Web Content Accessibility Guidelines 2.0 (WCAG 2.0 bzw. Richtlinien für barrierefreie Webinhalte 2.0) zu erfüllen. Das heißt, die Erfolgskriterien der Konformitätsstufen A und AA sind mit ziemlicher Sicherheit erfüllt, aber nicht alle Anforderungen der Konformitätsstufe AAA konnten mit der gleichen Selbstverständlichkeit umgesetzt werden.

Nicolai:

Kannst Du die Konformitätsstufen etwas näher erläutern?

Jan:

Das Konzept der Konformität in den WCAG 2.0 ist ein sehr ausgeklügeltes System. Die konkreten Anforderungen werden in 61 Erfolgskriterien formuliert. Ein Erfolgskriterium der WCAG 2.0 ist eine allgemeine Anforderung an Webinhalte, die die Zugänglichkeit und Nutzbarkeit durch Menschen mit Behinderungen sicherstellen soll.

Die Erfolgskriterien gehen über allgemeine Anforderungen der Nutzbarkeit und Zugänglichkeit hinaus und sind stets wichtiger für Menschen mit Behinderungen als für Menschen ohne Behinderung. Während beispielsweise Usability oder Standardkonformität durchaus allgemeine Anforderungen für ein Webangebot darstellen, decken die Erfolgskriterien der WCAG 2.0 ausschließlich solche Anforderungen der Nutzbarkeit und Zugänglichkeit ab, die aufgrund von Behinderungen entstehen.

Jedes Erfolgskriterium ist einer der drei Konformitätsstufen A, AA oder AAA zugeordnet. Allgemein können diese so beschrieben werden, dass Konformitätsstufe A wichtige Anforderungen darstellen und dass je höher die Konformitätsstufe wird, desto nachrangiger die Anforderung ist. Tatsächlich sind deutlich mehr Faktoren in diese Klassifizierung eingeflossen, etwa

  • ob das Erfolgskriterium eine Voraussetzung für die Zugänglichkeit darstellt,
  • ob das Erfolgskriterium für alle Inhaltsformen umsetzbar ist,
  • ob Webworker das Erfolgskriterium mit vertretbarem Aufwand umsetzen bzw. erlernen können oder
  • ob das Erfolgskriterium Funktion und Design von Webseiten stark beeinflusst.

Darüber hinaus gibt es einige Erfolgskriterien, die quasi zweimal in der WCAG 2.0 vorkommen. Das erste Erfolgskriterium ist dann zum Beispiel für die Konformitätsstufe A notwendig und ein zweites Erfolgskriterium mit erhöhten Anforderungen der Konformitätsstufe AAA zugeordnet. Beispiele dafür betreffen etwa die Tastaturbedienung, Audiodeskription oder Linktexten.

Ob nun eine Seite barrierefrei ist oder nicht, wird auf der Grundlage der WCAG 2.0 über die Konformitätsstufen definiert, d.h. wenn alle Erfolgskriterien der Stufe A erfüllt sind, ist die Konformität auf Stufe A erreicht. Für Stufe AA müssen die Erfolgskriterien der Stufen A und AA ohne Ausnahme erfüllt werden und für Konformitätsstufe AAA sämtliche Erfolgskriterien der WCAG 2.0.

Nicolai:

Die WCAG 2.0 wurde in diesem Jahr auch in der Barrierefreien Informationstechnik-Verordnung 2.0 übernommen. Wird das einen großen Einfluss auf die Webgestaltung in Deutschland haben?

Jan:

Mittelfristig leider nicht, aber langfristig wahrscheinlich schon. Die BITV 2.0 orientiert sich zwar an den WCAG 2.0, aber sie bricht mit wichtigen normativen Grundsätzen, etwa den Konformitätsstufen. Letztlich wurden im Wesentlichen die Erfolgskriterien der WCAG 2.0 übernommen, mehr aber auch nicht. Außerdem gilt die BITV 2.0 nur für die Bundesverwaltung, was für die Vorgängerversion aus 2002 ebenfalls galt.

Es ist keine Frage, dass die BITV 2.0 als Selbstverpflichtung der Bundesregierung bedeutsam ist. Sie wurde auch gemeinsam mit Vertretern der Behindertenverbände in Deutschland entwickelt und drückt den Anspruch an die Gleichstellung aus. Aber sie ist aus mehreren Gründen nicht mit den WCAG 2.0 kompatibel; außerdem widerspricht die BITV 2.0 aus denselben Gründen EU-Vorgaben zur Barrierefreiheit im Netz. Erst wenn die EU-Vorgaben konkretere Formen annehmen, werden Behörden und auch die Wirtschaft stärker in die Pflicht genommen.

Der Maßstab für barrierefreies Webdesign ist die WCAG 2.0, die jetzt schon drei Jahre ein Webstandard sind. Neben dem bereits erwähnten Konzept der Konformität enthalten sie umfangreiche Dokumentationen, die regelmäßig an den Stand der Technik angepasst werden. Wer barrierefreies Webdesign erfolgreich umsetzen will, kommt um die Konformitätsstufen und den zusätzlichen Dokumenten der WCAG 2.0 nicht vorbei.

Nicolai:

Kommen wir zurück zu Deiner Seite. Du hast keine Erklärung zur Konformität. Welche Konformitätsstufe erreicht der Webauftritt denn?

Jan:

Eine Erklärung zur Konformität kommt sicher noch. Leider war die Luft kurz vor und nach dem Relaunch etwas raus, und die Überprüfung der Aussagen in einer solchen Erklärung ist eine nicht triviale Angelegenheit. Außerdem ist die Seite — wie so viele Webseiten — zwar online, aber noch lange nicht fertig.

Ich gehe davon aus, dass Konformitätsstufe AA erreicht ist, allerdings gibt es Grenzfälle. Beispielsweise habe ich die Codelistings und Multimedia von der CD-ROM meines Buchs aus 2004 integriert. Sie enthalten Beispielvideos; die Videos sind teils mit und teils ohne Ton und haben keine Alternativen — weder Audio-Deskription noch Untertitel — höchstens der dargestellte Code. Da es sich um Beispiele handelt, sind sie auf der Grundlage der Richtlinien in Ordnung, aber trotzdem könnte man hier einen Strick daraus drehen und sagen, der Webauftritt sei nicht barrierefrei bzw. erreiche nicht einmal die Konformitätsstufe A.

Natürlich sind auch etliche Anforderungen der Konformitätsstufe AAA erfüllt, aber nicht alle. Ich kann zum Beispiel nicht behaupten, dass das Leseniveau (Erfolgskriterium 3.1.5) auch für Schüler der sechsten Klasse geeignet ist; schlicht und einfach, weil ich das Leseniveau nicht darauf geprüft habe. Auch haben aufgezeichnete synchronisierte Multimedia mit Audio keine ergänzende Gebärdensprachfilme (Erfolgskriterium 1.2.6). Ich bin mir außerdem nicht sicher, ob wirklich alle Linktexte auch außerhalb ihres Kontextes jedem verständlich sind (Erfolgskriterium 2.4.9). An der Barrierefreiheit der Seiten werde ich zwar weiter arbeiten, aber ich behaupte jetzt auch, dass kein Auftritt dieses Umfangs Konformitätsstufe AAA erreichen kann — zumindest kenne ich keinen größeren Webauftritt, der alle Erfolgskriterien der WCAG 2.0 erfüllt.

Nicolai:

Was hast Du denn auf Konformitätsstufe AAA umgesetzt?

Jan:

Von den 23 Erfolgskriterien der Stufe AAA sind auf www.barrierefreies-webdesign.de nach aktueller Einschätzung vier nicht erfüllt und vier nicht anwendbar. Von den verbleibenden 15 Erfolgskriterien sind elf aller Wahrscheinlichkeit nach erfüllt und vier sind noch zu klären.

Erfüllt
In Arbeit
Nicht erfüllt
Nicht anwendbar

Die beiden noch in Arbeit befindlichen Erfolgskriterien betreffen das visuelle Erscheinungsbild:

  • Zum einen geht es um Kontraste: Es ist nicht einfach, harmonisierende Farben zu finden, die die erhöhten Kontrastanforderungen (Erfolgskriterium 1.4.6) erfüllen. Ich habe hierzu etliche Runden mit allen möglichen Leuten gedreht, bis ich eine zumindest für mich akzeptable Kombination von Farben gefunden habe. Dabei mussten viele Farbzuweisungen im Inhalt zurückgenommen werden oder sind ganz verschwunden, denn sogar die minimalen Kontrastverhältnisse auf Konformitätsstufe AA stellten sich als schwierig zu realisieren heraus. Weil die Farben in den letzten Monaten öfters geändert wurden, steht noch eine letzte Optimierungsrunde aus. Den Anspruch, überall AAA zu erreichen, habe ich allerdings nicht mehr. Sollten sich aber Nutzer beschweren, dann werde ich das Erfolgskriterium wohl wieder auf die Tagesordnung setzen.
  • Zum anderen geht es um diverse Anforderungen an die visuelle Präsentation (Erfolgskriterium 1.4.8). Umgesetzt ist beispielsweise die Begrenzung der Laufweite und das flüssige Layout. Hier zeigt sich, wie unterschiedlich die Umsetzung sein kann: Während die Laufweite mit einem Minimum an CSS festgelegt werden kann, ist die Gestaltung eines flüssigen Layouts komplexer: Nicht nur müssen wir Seitenzoom, Textvergrößerung und die Kombinationen von beiden überprüfen, wir müssen hier besonders intensiv mit verschiedenen Browsern und Browserversionen testen — ebenso wie mit unterschiedlichen Bildschirmauflösungen. Die Lösung mit JavaScript funktioniert inzwischen recht stabil; mittlerweile habe ich aber auch andere Lösungen gesehen, die ohne JavaScript auskommen und stattdessen mit Media-Queries arbeiten. Insgesamt handelt es sich bei diesem Erfolgskriterium um sehr testintensive Anforderungen, so dass eine 100%ige Erfüllung schwer zu überprüfen ist. (siehe Demo)

Mehr als die Hälfte der Erfolgskriterien auf Konformitätsstufe AAA sind umgesetzt worden bzw. nicht anwendbar oder werden in Kürze umgesetzt sein. Auf dem Webauftritt sind beispielsweise folgende Punkte bereits erledigt:

Die Position einer einzelnen Seite innerhalb des Webauftritts (Erfolgskriterium 2.4.8) wird über mehrere Wege vermittelt: In der Navigation wird die Position mit Farbe, border (für benutzerdefinierte Farbeinstellungen) und einem Icon gekennzeichnet; ergänzt werden die Kennzeichnungen mit einem Brotkrumenpfad. Besonders tückisch war aber die Abbildung der Position auf der Strukturebene: Die Subnavigation auf der linken Seite musste als integrativer Bestandteil der Hauptnavigation ausgespielt werden, um die Anforderungen aus dem Erfolgskriterium in Verbindung mit der Linearisierbarkeit zu erfüllen.

Darstellung der Navigation mit und ohne CSS
Die Subnavigation wird als Teil der Hauptnavigation ausgespielt.

Im konkreten Layout hatte die dadurch notwendige absolute Positionierung einen starken Einfluss auf den Fluss von Inhalt (rechts) und Info-Bereich (unten links). Es bedürfte eines Fine-Tunings mit JavaScript, um das Layout stabil zu halten.

Für möglichst eindeutige Linktexte (Erfolgskriterium 2.4.9) werden Icons eingesetzt, mit denen interne von externen Links unterschieden werden können oder die aktuelle Position in der Navigation gekennzeichnet wird. Die Grafiken wurden aus zwei Gründen als IMG im HTML eingebunden (statt als CSS-Hintergrundgrafik): Zum einen sollten sie bei benutzerdefinierten Farbeinstellungen wahrnehmbar sein und zum anderen benötigen sie einen Alternativtext. Hier musste ich einen etwas ungewöhnlichen Weg gehen und die Icons in den Links einbauen, um der Anforderung zu genügen.

Analyse eines Links: Im A-Element ist ein IMG-Element und der Linktext zu sehen

An einigen Stellen — etwa beim Vergleich zwischen WCAG 2.0 und BITV 2.0 — biete ich Auswahlmöglichkeiten an. Obwohl es sehr verlockend war, die Anzeige der ausgewählten Inhalte dynamisch zu gestalten, habe ich die Änderung von Inhalten nur nach expliziter Bestätigung durch den Nutzer (Erfolgskriterium 3.2.5) vorgesehen. Um genau zu sein, besteht die abhängige Auswahl von Inhalten zunächst aus einer Auswahlliste und Schaltfläche, die mit Progressive Enhancement vereinfacht wird; Inhalte der Seite werden aber nicht dynamisch ausgetauscht.

Nicolai:

Wenn deine Webseite also weitestgehend barrierefrei ist, willst du dir das irgendwie zertifizieren lassen?

Jan:

Nein, von wem denn? In Deutschland gibt es kein anerkanntes Zertifizierungsverfahren. Und wenn es ein solches Verfahren gäbe, würde es wahrscheinlich immer den falschen Eindruck vermitteln, nämlich dass die Barrierefreiheit in irgendeiner Weise vollendet sei.

Wenn es eines Tages Zertifizierungen für barrierefreies Webdesign geben sollte, dann muss man sich hier aber an der WCAG 2.0 orientieren und entweder ein A (für weniger Barrierefreiheit), ein AA (für mehr Barrierefreiheit) und AAA (für eine umfassende Barrierefreiheit) vergeben.

Nicolai:

Gibt es besondere Highlights auf der Seite?

Jan:

Das Rad habe ich nicht neu erfunden. Die eingesetzten Techniken sind seit Jahren bekannt. Es wurden aber viele Kriterien der Barrierefreiheit sehr detailliert berücksichtigt, die auf den ersten Blick nicht erkennbar sind. Eine der größten Herausforderungen war es, diese vielen Aspekte in Einklang zu bringen.

Wichtig sind natürlich die Inhalte. Viele Beiträge stammen aus den Jahren 2001 bis 2003 und mussten an die WCAG 2.0 angepasst werden. Leider habe ich einige Artikel aus dem Angebot rausnehmen müssen, weil sie so nicht mehr vertretbar waren. Insgesamt hat die redaktionelle Arbeit die meiste Zeit in Anspruch genommen.

Inzwischen gab es eine erste Feedbackrunde. Gut fand ich, dass vor allem blinde Nutzer besser zurechtkamen. Auch das flexible Layout, d.h. die Anpassung von Schriftgröße und Fenstergröße, funktioniert gut. Und wenn man mir mitteilt, dass die Farben gut gewählt sind, muss ich an die vielen Runden denken, die ich gedreht habe, bis die Anforderungen an Kontrastverhältnisse und "visuell akzeptabel" eine ausreichend große Schnittmenge aufwiesen. Gerade beim Design wird sehr deutlich, wie viele Meinungen es zu vermeintlichen Kleinigkeiten geben kann.

Das Highlight ist, dass die Seite endlich online ist. Sie ist öffentlich und nicht perfekt, aber entwickelt sich täglich weiter. Und sie gibt hoffentlich neue Impulse, das Web barrierefreier zu machen.

Kommentare

Fritz Weisshart
am 30.11.2011 - 19:55

Hallo,

kann es sein, dass die Skiplinks auf http://www.barrierefreies-webdesign.de/ nicht funktionieren? Zumindest nicht mit Safari und Chrome?

Permanenter Link
Jan Hellbusch

Jan Hellbusch (Autor)
am 01.12.2011 - 09:58

Danke für den Hinweis. Ist in der Entwicklungsumgebung gefixt und geht beim nächsten Update online.

Permanenter Link

Die Kommentare sind geschlossen.