Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

WCAG 2.0-Erfolgskriterien und Sehbehinderung veröffentlicht in 2003/2009

Die Richtlinien zur Barrierefreiheit von Webseiten werden in den Web Content Accessibility Guidelines ()WCAG) 2.0 beschrieben. Die Richtlinien und die dazugehörigen Techniken sind recht umfassend und bieten unzählige Kriterien und Hinweise zur Umsetzung barrierefreier Webseiten.

Obwohl sich die Richtlinien der Barrierefreiheit im Wesentlichen auf Technik beziehen, so gibt es einige Anforderungen, die das Screendesign beeinflussen. Auf der einen Seite geht es um die Wahl von Farben, die die Wahrnehmung durch Menschen mit verschiedenen Seheinschränkungen sicherstellen sollen, und zum anderen um die Verwendung von Formatierungen in Ergänzung zu Farbschemata.

Kontrastreiche Gestaltung

Nach dem Intern: WCAG 2.0-Erfolgskriterium 1.4.3 soll die visuelle Präsentation von Text und Schriftgrafiken ein Kontrastverhältnis zwischen Vordergrund- und Hintergrundfarbe von mindestens 4,5:1 aufweisen. In dem erweiterten Intern: WCAG 2.0-Erfolgskriterium 1.4.6 soll das Kontrastverhältnis sogar 7:1 betragen. Ob diese Kontrastverhältnisse eingehalten werden, kann geprüft werden.

Kontraste / Farben

Welches der Erfolgskriterien für Kontraste angewandt wird, hängt von der angestrebten Konformitätsstufe der Barrierefreiheit ab. In den WCAG 2.0 werden die Erfolgskriterien in drei Konformitätsstufen unterteilt: A, AA und AAA. Die minimalen Kontrastanforderungen sind bei Stufe AA und die erweiterten Kontrastanforderungen bei Stufe AAA angesiedelt.

Die obengenannten Kontrastanforderungen gelten für Texte und Schriftgrafiken, wobei für großformatigen Text geringere Anforderungen formuliert werden. Ein Text oder eine Schriftgrafik ist dann großformatig, wenn die Schriftgröße mindestens 18 Punkt beträgt (nicht fett) oder mindestens 14 Punkt groß ist (fett):

Die WCAG 2.0 lassen allerdings an dieser Stelle offen, wie "Punkt" am Bildschirm zu messen sei und vor allem welche Punkt-Einheit zugrundegelegt wird. Am Bildschirm werden Schriftgrößen üblicherweise in Pixel und nicht in Punkt gemessen; die Messung von Punkt müsste mit einem Typometer vorgenommen werden. Problematischer sind die verschiedenen Systeme: Während das in Europa gängige Didot den Punkt als 0,376mm definiert, wird mit dem in Nordamerika verwendete Pica-System der Punkt mit 0,35147mm festgelegt. Somit sind 18 Pica-Punkte gleich 16,82226 Didot-Punkte und 14 Pica-Punkte sind 13,08398 Didot-Punkte. Zu allem Überfluss wird in DTP-Anwendungen mit einem PostScript-Punkt gearbeitet, wobei ein PostScript-Punkt gleich 1,00375001 Pica-Punkt sind. Welche Schriftgröße ist denn nun maßgeblich? Hier passt ein Kommentar von Jared Smith:

The answer is that there is no answer. There is no direct comparison between print points and screen rendered points. Knowing that there isn't a way to do this exactly, you can just use the following and just say it's gospel truth because someone at WebAIM said so.

Default font size:1em= 100%= 16px= 12pt= 16PSpt
Large font:1.5em= 150%= 24px= 18pt= 24PSpt
Large/bold font:1.166em= 116.66%= 18.66px= 14pt= 18.66PSpt

(pt's are points on in HTML and PSpt are points in Photoshop)

And before anybody corrects me, yes I know this is system dependent.

Die Anforderungen nach ausreichendem Kontrast gelten auch dann, wenn statt einer Hintergrundfarbe für Text eine Hintergrundgrafik eingesetzt wird.

Die WCAG 2.0 macht zwei Ausnahmen für die Kontrastanforderung. Für folgende Inhalte einer Seite gibt es keine Anforderungen für ein minimales Kontrastverhältnis:

  1. Nebensächliche Texte und Schriftgrafiken wie z.B. inaktive Steuerelemente, dekorative Inhalte und Text, der Teil eines Bildes mit anderen wesentlichen Inhalten ist, und
  2. Logos und Markennamen.

Definition von Vordergrund- und Hintergrundfarbe

Eine weitere, die Farben von Seiteninhalten betreffende Anforderung ist es, die Übernahme der benutzerdefinierten Farben sicherzustellen und zwar auch dann, wenn diese nur in den Systemeinstellungen des Betriebssystems vorgenommen wurden (Intern: WCAG 2.0-Erfolgskriterium 1.4.8). In der Konsequenz bedeutet diese Anforderung, dass für besonders wichtige Inhalte einer Seite auf jegliche Vordergrund- und Hintergrundfarbe verzichtet werden soll. Hierzu zählen der Hauptinhalt (z.B. ein Artikel) und Formularelemente. Für andere Inhalte gilt diese Anforderung nicht (z.B. Navigationsleisten).

Der Verzicht auf die explizite Angabe von Vordergrund- und Hintergrundfarben für wichtige Inhalte ist kein absolutes Kriterium, sondern ist im Zusammenhang mit Stilwechsler, Anleitungen für Nutzer und der zugrundegelegten Technik anzusehen. Die Anforderung zielt insbesondere auf Mängel in bestimmten Browsern ab, die benutzerdefinierte Farben nur teilweise übernehmen. Eine "normale" HTML-Seite lässt sich in allen gängigen Browsern farblich anpassen. Bei bestimmten Techniken, etwa in Fenstern, die mit JavaScript erzeugt werden, ist aber gänzlich auf Vordergrund- und Hintergrundfarbe zu verzichten: Mozilla-Browser übernehmen nicht immer die benutzerdefinierten Farben des Nutzers.

Auf jeden Fall ist aber sicherzustellen, dass Inhalte nicht "unsichtbar" werden, wenn Nutzer eigene Farben einsetzen. Textinhalte und insbesondere Schriftgrafiken benötigen sowohl eine Hintergrund- als auch eine Vordergrundfarbe. Bei Schriftgrafiken ist z.B. auf Transparenz zu verzichten, weil Nutzer möglicherweise die Hintergrundfarbe selbst bestimmt haben. Es ist sicherzustellen, dass die Grafiken vor jeglichem Hintergrund ausreichende Kontraste aufweisen.

Zwei Darstellungen einer (teilweise transparenten) Grafik Bei Standardfarben sind die Kontraste deutlich; bei benutzerdefinierten Farbeinstellungen gehen Informationen verloren

Um Texte stets bei benutzerdefinierten Farben wahrnehmen zu können, genügt es meistens, wenn sowohl Vordergrund- als auch Hintergrundfarbe definiert werden. Wenn auf die Farbgebung bei Texten im Sinne der Anforderung verzichtet wird, so kann mit Rahmen (border-top, border-right, border-bottom und border-left) im CSS gearbeitet werden, um Bereiche farblich zu kennzeichnen. Bei Schriftgrafiken können auch Glow-Effekte eingesetzt werden.

Style switcher

Wenn den Kontrastanforderungen - aus welchen Gründen auch immer - nicht genügt werden können, kann der Intern: Einsatz eines Stilwechslers (engl.: style switcher berücksichtigt werden. Das Steuerelement, das die kontrastreiche Seite aufruft, muss selbst kontrastreich sein. Ein Stilwechsler ist dabei als Behelf zu sehen, wenn eine Seite nicht barrierefrei gestaltet werden kann.

Es ist allerdings zu betonen, dass Stilwechsler die Barrierefreiheit nicht ersetzen können. Eine Ausnahme besteht für die Erfordernis nach Kontrastminderung: Wenn im Allgemeinen die Kontrastanforderungen eingehalten werden sollten, so gibt es einzelne Behinderungen, die eine Abschwächung von Kontrastverhältnissen für die Lesbarkeit erfordern. Es wird daher in den Extern, englischsprachig: Erläuterungen zum Erfolgskriterium 1.4.3 empfohlen, einen sogenannten "color picker" zu berücksichtigen, die die Bestimmung von Vordergrund- und Hintergrundfarben durch den Nutzer erlaubt.

Visuelle Gestaltung

Neben den Kontrastanforderungen gibt es einige basale Anforderungen an die visuelle Gestaltung, die den Einsatz von Farbschemata und Typografie betreffen. Insbesondere geht es um die Mehrfachkennzeichnung nach dem WCAG 2.0-Erfolgskriterien Intern: 1.3.1, Intern: 1.3.3 und Intern: 1.4.1: Farblich gekennzeichnete Inhalte müssen sowohl auf der visuellen Ebene als auch auf der Strukturebene zusätzlich gekennzeichnet werden, d.h. Farbe kann und soll eingesetzt werden, um Informationen zu kennzeichnen, aber sie darf nicht das alleinige Merkmal sein, das die Information hervorhebt oder von anderen Informationen unterscheidet. Diese Anforderungen gehören alle zur Konformitätsstufe A.

Mehrfachkennzeichnung

Die Mehrfachkennzeichnung bedeutet, dass jedes Element einer Seite, das sich farblich von anderen Elementen unterscheidet, mindestens ein zweites Unterscheidungsmerkmal benötigt. Die farblich gekennzeichneten Inhalte müssen visuell bei benutzerdefinierten Farben wahrgenommen und ebenso strukturell in einem Screenreader erfasst werden können. Wenn eine zusätzliche Formatierung oder eine strukturelle Auszeichnung nicht möglich ist, dann muss die zusätzliche Kennzeichnung textlich erfolgen.

Einige Beispiele:

Beispielgrafik "Radio" mit Ergänzung von Farbformatierungen Die Überschrift ist in Großbuchstaben dargestellt; die Links sind fett und unterstrichen sowie mit einem vorangestellten Symbol gekennzeichnet.

Bei der Mehrfachkennzeichnung geht es stets um zwei Szenarien: Wenn Farbe eingesetzt wird, muss

  1. eine zusätzliche Formatierung und/oder Text berücksichtigt werden, damit die durch Farbe vermittelte Information auch bei benutzerdefinierten Farben wahrgenommen werden kann, und
  2. eine strukturelle Auszeichnung und/oder Text berücksichtigt werden, damit die durch Farbe vermittelte Information auch in einem Screenreader wahrgenommen werden kann.

Ähnlich wie bei der Verwendung von Farbe zur Kennzeichnung von Informationen, soll insbesondere im Hinblick auf Screenreader die Verwendung von anderen Formatierungen wie Schriftgröße oder Unterstreichung als alleiniges Merkmal verzichtet werden. Hier ist zwar die visuelle Unterscheidung gewährleistet, aber auf der Strukturebene fehlt i.d.R. die Möglichkeit, den Unterschied der Formatierung zu erkennen. Es bedarf einer textlichen Ergänzung zur Formatierung.

Auch in Schaubildern (z.B. "rote und blaue Kurve") darf nicht alleine durch Farbe unterschieden werden. Neben Farbe kann ein Muster (z.B. "eine gestrichelte rote und eine durchgezogene blaue Kurve") zur Unterscheidung eingesetzt werden.

Bei Aufzählungspunkten (z.B. "rote und grüne Punkte") können unterschiedliche Formen eingesetzt werden ("rote Kreise und grüne Quadrate"). Ausführliche Hinweise zu Symbolen als Informationsträger und die Gestaltung barrierefreier Listen finden Sie in dem Artikel Extern: Die etwas besseren Listen.

Ausführliche Informationen zur Mehrfachkennzeichnung finden Sie in der Serie zu Navigationsleisten.

Textgestaltung

Im Intern: WCAG 2.0-Erfolgskriterium 1.4.8 finden sich weitergehende Anforderungen an die Textgestaltung, die die Lesbarkeit fördern. Was Webseiten angeht, so handelt es sich um Angaben, die im CSS berücksichtigt werden sollten:

Wenn die eingesetzte Technik kein CSS unterstützt, etwa in einem E-Mail-Newsletter, dann sollen Absätze durch eine Leerzeile getrennt werden und Überschriften sollen durch zwei Leerzeilen davor und eine Leerzeile dahinter erkennbar gemacht werden. Aufzählungszeichen in Listen sollen den üblichen Konventionen zur Ordnung entsprechen, d.h. es sollen unterschiedliche Aufzählungszeichen für verschiedene Ebenen einer Aufzählung genutzt werden und entsprechende Einrückungen bei verschachtelten Listen vorgenommen werden.

Sichtbarer Fokus

Teil der visuellen Gestaltung ist auch der sichtbare Tastaturfokus, wobei es bei dieser Anforderung nicht unbedingt um Sehbehinderung, sondern um Tastaturnutzer geht. Während Mausnutzer den Mauszeiger als Orientierung für die Navigation haben, was oft auch durch Hover-Effekte ergänzt wird, haben Tastaturnutzer oft keine besondere Möglichkeit, den aktuell fokussierten Link oder das fokussierte Formularelement zu erkennen.

Zwei Darstellungen einer Navigationsleiste Es ist in der zweiten Darstellung deutlich erkennbar, wo sich der Tastaturfokus befindet

Nach dem Intern: Erfolgskriterium 2.4.7 soll die Hervorhebung des Tastaturfokus unbedingt berücksichtigt werden. Wenn ein Hover-Effekt für einen Link oder ein Formularelement im CSS aufgenommen wurde, dann kann dieser Effekt meist sehr leicht ergänzt werden. Aus einem

a:hover {...}

kann ohne Weiteres ein

a:hover, a:focus {...}

werden. Allerdings müssen dabei einige Extern: Aspekte für die browserübergreifende Darstellung berücksichtigt werden.

Im Gegensatz zur Steuerung des Mauszeigers ist die Erkennbarkeit des Fokus von der Webgestaltung abhängig und sollte hervorgehoben werden. Je nach Browser erhalten fokussierte Links beispielsweise einen gepunkteten Rahmen, der aber auf dunklem Hintergrund nur schwer erkennbar ist. Auch sind Extern: fokussierte grafische Links oft nicht erkennbar. Es sollten zusätzliche Wechsel der Hintergrundfarben und/oder Rahmen eingesetzt werden, um die Fokussierung visuell hervorzuheben. Keinesfalls sollte der sichtbare Fokus z.B. mit der CSS-Pseudoklasse :focus {outline: none} unterdrückt oder gar mit JavaScript entfernt werden, wie dies einige Content-Management-Systeme machen.

Es versteht sich von selbst, dass gerade der sichtbare Fokus den Anforderungen an die Kontrastverhältnisse genügen muss. Dabei sollte auch bei einer Fokussierung per Tastatur der Unterschied zum umgebenden Text deutlich erkennbar sein. Zu empfehlen ist hier ein Unterschied im Kontrastverhältnis von mindestens 3:1.