Ein Problem bei der Berücksichtigung von Sehbehinderung in der Gestaltung barrierefreier Webangebote ist die Vielfalt der Augenerkrankungen, die es fast unmöglich macht, "typische" Situationen zu beschreiben. Manche Sehbehinderte setzen Vergrößerungssysteme ein, andere verändern die Systemeinstellungen für Bildschirmfarben, -schriftarten und -größen. Manche sind farbfehlsichtig, andere blendempfindlich und wiederum andere keins von beiden. Einige setzen eine unterstützende Sprachausgabe ein, während andere mit den Bordmitteln des Browsers zurecht kommen, und auch bei gleicher objektiver Einschränkung kann die individuelle Wahrnehmung und der Umgang mit der eigenen Beeinträchtigung durch die Betroffenen sehr unterschiedlich sein. Insgesamt bedeutet Barrierefreiheit vor dem Hintergrund einer Sehbehinderung, dass Webdesigner einige Kriterien zur besseren Lesbarkeit berücksichtigen müssen.
Einen Eindruck, wie sich Sehbehinderung auf die visuelle Wahrnehmung auswirkt, kann mit den folgenden beiden Simulatoren gewonnen werden:
Die meisten Webdesigner befassen sich nur am Rande mit den Anforderungen von Menschen mit Sehbehinderungen. Dabei gibt es für die farbliche Gestaltung einige Kriterien, die für die Barrierefreiheit zu beachten sind, allen voran die kontrastreiche Gestaltung. Im Folgenden werden Werkzeuge aufgelistet, die bei der farblichen Gestaltung von Webseiten und bei der Einhaltung von Mindestkontrasten unterstützen:
![[extern, englisch]](../../lib/img/en.gif)
Web Accessibility Toolbar für Internet Explorer und Opera integriert, mit dem weitergehende Aspekte der Barrierefreiheit überprüft werden können. Colour Contrast Analyser, wird für die Analyse von Textelementen anhand des DOM ebenfalls angeboten.Die Richtlinien zur Barrierefreiheit von Webseiten werden in den Web Content Accessibility Guidelines 2.0 (WCAG2) 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.
Nach dem ![[extern, deutsch]](../../lib/img/de.gif)
WCAG2-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 WCAG2-Erfolgskriterium 1.4.6 soll das Kontrastverhältnis sogar 7:1 betragen. Ob diese Kontrastverhältnisse eingehalten werden, kann mit den oben verlinkten Werkzeugen geprüft werden.
Welche der Erfolgskriterien für Kontraste angewandt wird, hängt von der angestrebten Konformitätsstufe der Barrierefreiheit ab. In der WCAG2 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 WCAG20 lässt 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 im 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 TP-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 past 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 WCAG2 macht aber auch zwei Ausnahmen für die Kontrastanforderung. Für folgende Inhalte einer Seite gibt es keine Anforderungen für ein minimales Kontrastverhältnis:
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 ( WCAG2-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ählt 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 z.B. 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.
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.
Wenn den Kontrastanforderungen - aus welchen Gründen auch immer - nicht genügt werden können, kann der ![[intern]](../../lib/img/intern.gif){kind=small}
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 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.
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 WCAG2-Erfolgskriterien 1.3.1, 1.3.3 und 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.
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:
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
Ä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 den Artikel Die etwas besseren Listen.
Ausführliche Informationen zur Mehrfachkennzeichnung finden Sie in Das Rückgrat eines Webauftrittes: Die Navigation.
Im WCAG2-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:
text-align ausgerichtet und nicht im Blocksatz gestaltet werden. Wenn Blocksatz verwendet wird, dann sollte der Nutzer diesen ausschalten können.max-width.line-height.letter-spacing zu erfolgen und nicht durch das Einfügen von Leerzeichen wie in "H a l l o W e l t!".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.
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 Formularelement zu erkennen.
Es ist in der zweiten Darstellung deutlich erkennbar, wo sich der Tastaturfokus befindet.
Nach dem 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 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 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.
Dieser Beitrag wurde von Jan Eric Hellbusch in 2003 verfasst und in Mai 2009 komplett überarbeitet. Hellbusch ist Autor der beiden gleichnamigen Titel " Barrierefreies Webdesign". Mit "2bweb.de" bietet er Schulung und Beratung für barrierefreies Internet.
Weiterführende Informationen:
Lesen Sie, warum ich mich an die Standards halte und warum das Layout mit Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.
Die ![[intern]](../../lib/img/intern_hellblau.gif){kind=small}
Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.
Verwenden Sie Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.
![[intern]](../../lib/img/intern_dunkelblau.gif){kind=small}
