Dieser Beitrag gehört zur Artikelserie Richtlinien für barrierefreie Webinhalte WCAG 2.0. Er soll die Erfolgskriterien, Bedeutung und Umsetzung der Richtlinie 1.4 Unterscheidbar darstellen sowie Website Beispiele aufzeigen.
„Machen Sie es Benutzern leichter, Inhalt zu sehen und zu hören einschließlich der Trennung von Vorder- und Hintergrund.“
Erfolgskriterien der Richtlinie 1.4
- 1.4.1 Benutzung von Farbe: Farbe wird nicht als einziges visuelles Mittel benutzt, um Informationen zu vermitteln, eine Handlung zu kennzeichnen, eine Reaktion zu veranlassen oder ein visuelles Element zu unterscheiden. (Stufe A)
Anmerkung: Dieses Erfolgskriterium spricht ausdrücklich die Farbwahrnehmung an. Andere Formen der Wahrnehmung werden in Richtlinie 1.3 behandelt einschließlich programmtechnischer Zugriff auf Farbe und andere visuelle Darstellungskodierungen. - 1.4.2 Audio-Steuerelement: Wenn Audioinhalt auf einer Webseite automatisch für mehr als 3 Sekunden abgespielt wird, dann gibt es entweder einen Mechanismus, um die Wiedergabe zu pausieren oder zu beenden, oder es gibt einen Mechanismus, um die Lautstärke unabhängig von der allgemeinen Systemlautstärke zu regeln. (Stufe A)
Anmerkung: Jeglicher Inhalt, der dieses Erfolgskriterium nicht erfüllt, kann die Möglichkeit eines Benutzers beeinträchtigen, die ganze Seite zu nutzen. Daher muss jeglicher Inhalt auf einer Webseite (egal ob er dazu benutzt wird, andere Erfolgskriterien zu erfüllen oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsbedingung 5: Nicht störend. - 1.4.3 Kontrast (Minimum): Die visuelle Darstellung von Text und Bildern von Text hat ein Kontrastverhältnis von mindestens 4,5:1 mit folgenden Ausnahmen: (Stufe AA)
- 1.4.4 Textgröße ändern: Mit Ausnahme von Untertiteln und Bildern eines Textes, kann Text ohne assistierende Technik um bis zu 200 Prozent geändert werden, ohne dass dabei Inhalt oder Funktionalität verloren geht. (Stufe AA)
- 1.4.5 Bilder eines Textes: Wenn die benutzten Techniken die visuelle Präsentation bewirken können, dann wird Text statt Bilder eines Textes dazu benutzt, Informationen zu vermitteln mit den folgenden Ausnahmen: (Stufe AA)
- 1.4.6 Kontrast (erhöht): Die visuelle Präsentation von Text und Bildern eines Textes hat ein Kontrastverhältnis von mindestens 7:1, mit folgenden Ausnahmen: (Stufe AAA)
- 1.4.7 Leiser oder kein Hintergrund-Audioinhalt: Für aufgezeichneten, reinen Audioinhalt, der (1) hauptsächlich Sprache im Vordergrund enthält, (2) kein Audio-CAPTCHA oder ein Audio-Logo ist und (3) bei dem es sich nicht um eine Vokalisierung handelt, die hauptsächlich als musikalischer Ausdruck bestimmt ist wie beispielsweise Singen oder Rappen, gilt mindestens eines der Folgenden: (Stufe AAA)
- 1.4.8 Visuelle Präsentation: Für die visuelle Präsentation von Textblöcken gibt es einen Mechanismus, um das Folgende zu erreichen: (Stufe AAA)
- 1.4.9 Bilder eines Textes (keine Ausnahme): Bilder eines Textes werden nur rein dekorativ benutzt oder dann, wenn eine bestimmte Präsentation von Text unentbehrlich für die zu vermittelnden Informationen ist. (Stufe AAA)
Anmerkung: Wortbildmarken (Text, der Teil eines Logos oder Markennamens ist) werden als unentbehrlich betrachtet.
Bedeutung der Richtlinie
Die Richtlinie sagt aus, dass bei der Gestaltung der Website die Inhalte für jeden klar, deutlich und unterscheidbar zu sehen sein sollen. Dies betrifft sowohl die farbliche Gestaltung, Kontraste als auch die Gestaltung von Schriftform. Da beispielsweise ein Teil der Internetnutzer farbenblind sind oder eine Rot-Grün-Schwäche haben, ist die sorgfältige Farbwahl bei einer Website sehr wichtig.
Die farbliche Gestaltung der Website ist nicht nur für Farbenblinde sinnvoll, im Prinzip kann jeder Nutzer davon profitieren. Generell ist es für Nutzer auf Dauer anstrengend Texte am Computer zu lesen. Eine Verbesserung des Kontrastes hilft dabei, dass Texte leichter am Bildschirm gelesen werden können. Auch die Silver Surfer sollten nicht ausser Acht gelassen werden bei der Farbgebung, denn häufig haben diese nicht mehr ihre vollständigen Sehfähigkeiten und sind nicht in der Lage, Farben klar zu sehen oder zu unterscheiden.
Die Benutzung von Farbe ist ebenso ein sehr gutes Hilfsmittel, um Informationen visuell zu vermitteln und vereinfacht zudem die Usability einer Website. So sind Pflichtfelder häufig rot markiert oder bei der Eingabe werden eventuelle Fehler rot angezeigt. Da Sehbehinderte die Farben häufig nicht unterscheiden können, sollte das Pflichtfeld auch in Textform als solches gekennzeichnet sein, z. B. durch einen textlichen Hinweis à la „Mit einem Asterisk (*) gekennzeichnete Felder sind Pflichtfelder und müssen ausgefüllt werden“.
Umsetzung der Richtlinie
Damit die Inhalte einer Website von jedem Nutzer wahrgenommen werden können, sollte bei der Gestaltung der Website besonders auf die Benutzung von Farben geachtet werden.
In Hinblick auf die Trennung von Technik und Inhalt sollte immer CSS zur Gestaltung des Layouts eingesetzt werden, um spätere Änderungen leichter anpassen zu können. Dies ist beim Einsatz von Inline-CSS im HTML nicht der Fall. Bei der Farbwahl sollten komplementäre Farbkombinationen vermieden werden, da sie zu wenig Kontrast bieten. Die Kombination rot-grün sollte ebenfalls nicht benutzt werden, wie anhand des folgenden Beispiels dargestellt wird. Die Grafik zeigt, wie unterschiedlich die Wahrnehmung eines Bildes sein kann, wenn eine Sehschwäche vorhanden ist.
Ein Nutzer mit vollem Sehvermögen würde eine acht auf dem Bild erkennen (links). Ein Nutzer mit einer Dyschromatopsie (Rot-Grün-Schwäche) hingegen würde eine drei sehen (rechts).
Beim Einsatz von Farbe muss sichergestellt werden, dass die farbig dargestellten Informationen auch in Textform erhältlich sind. Bei einem Formular mit Pflichtfeldern, welche rot gekennzeichnet werden, muss der Nutzer auch in textlicher Form darauf aufmerksam gemacht werden. Blinde können die Informationen dadurch über eine Braille-Zeile oder einen Screenreader ausgeben lassen.
Das Erfolgskriterium 1.4.3 sagt aus, dass der Kontrast zwischen Text und Hintergrund ausreichend groß sein sollte, damit Nutzer, die in ihrem Sehvermögen beeinträchtigt sind, den Text besser wahrnehmen können. Dabei sollte der Kontrast mindestens 4,5:1 betragen (Stufe AA). Ausnahmen hiervon sind z. B. großer Text und Bilder von großem Text, bei denen das Verhältnis mindestens 3:1 sein sollte. Zur Berechnung des Kontrastes zweier Farben stehen diverse Tools im Internet zur Verfügung, beispielsweise der Luminosity Colour Contrast Ratio Analyser.
Das Erfolgskriterium 1.4.4 beschäftigt sich mit der Anpassung der Textgröße. Demnach soll ein Text ohne assistierende Technik um bis zu 200 Prozent geändert werden können, ohne dass es zu Überlagerungen von Inhalten auf der Seite kommt.
Beispiele zur Richtlinie
Um die Erfüllung der Erfolgskreterien zur Richtlinie 1.4 Unterscheidbar zu überprüfen, kann das Tool Vischeck genutzt werden. Dieses simuliert verschiedene Arten der Farbenblindheit. Im Nachfolgenden sind einige Beispiele genannt, in denen die Farbenblindheit mit Hilfe von Vischeck simuliert wurde.
Die Benutzung von Farbe zur Gestaltung der Website wurde bereits in der Richtlinie 1.3 Anpassbar erwähnt. Als Beispiel für das Hervorheben durch Farbe ist in diesem Artikel ein Formular gewählt, bei dem Pflichtfelder rot markiert sind. Dementsprechend ist deren Kennzeichnung für Farbenblinde nicht erkennbar.
Ebenso ist es wichtig, einen ausreichenden Kontrast herzustellen, damit Informationen klar und deutlich unterschieden werden können. Viele Menschen mit Farbfehlsichtigkeit haben häufig Schwierigkeiten, Texte zu lesen, welche keinen deutlichen Kontrast zum Hintergrund haben. Das nachfolgende Beispiel zeigt einen Online-Lieferservice, der bei der Auswahl der Schriftfarbe und des Hintergrundes keinen ausreichenden Kontrast berücksichtigt hat. Die Links im unteren Seitenbereich besitzen eine rote Schriftfarbe (Hexadezimalfarbe #E23131) auf rotem Hintergrund (#980001) und sind dadurch kaum oder gar nicht zu erkennen. Das Kontrastverhältnis zwischen Hintergrund- und Schriftfarbe beträgt hier lediglich 2:1.
Online Lieferservice mit starkem Rot-Anteil
Der Einsatz sehr ähnlicher Farben von Text und Hintergrund kann auch problematisch im Hinblick auf die Platzierung in Suchmaschinen sein. Solche Links können als verborgene Links eingestuft und als Verstoß gegen die Google Webmaster Richtlinien gewertet werden. Hier wäre der Einsatz von kontrastreicheren Farben demnach auch aus SEO-Sicht sehr empfehlenswert.
Laut dem Erfolgskriterium 1.4.4 sollte ein Text um bis zu 200 Prozent geändert werden können. Ein gutes Beispiel ist hierfür die Homepage des Hauptbahnhof Wiens. Hier gibt es auf der Seite die Möglichkeit die Textgröße anzupassen, siehe folgendes Beuspiel:
Ändert der Nutzer die SChriftgröße mit Hilfe der Vergrößerungshilfe auf der Startseite, wird der Text vergrößert ohne das es dabei zu Überlagerungen von Inhalten auf der Seite kommt:
Die Inhalte und Erfolgskriterien der Richtlinie 1.4 Unterscheidbar sind in der deutschen Übersetzung nachzulesen unter www.w3.org.
Der nächste Artikel beschäftigt sich mit der WCAG 2.0 Richtlinie 2.1 Per Tastatur zugänglich.