Du hast keine Lust dich durch die ganzen Anforderungen der Web Content Accessibility Guidelines zu wühlen, willst aber verstehen worum es geht? Kein Problem, wir haben das für Dich übernommen und die wichtigsten Punkte zusammengefasst.
Die WCAG1 bestehen aus 4 Prinzipien: Webinhalte sollen wahrnehmbar, bedienbar, verständlich und robust sein. Jedes Prinzip wird noch einmal unterteilt in mehrere Richtlinien, für die es dann in der nächsten Ebene konkrete Anforderungen gibt.
Welche Anforderungen am Ende auch wirklich erfüllt werden müssen hängt vom Level der Barrierefreiheit ab, das erreicht werden soll. Die WCAG gibt 3 unterschiedliche Level vor: A (niedrigste Stufe), AA (mittlere Stufe) und AAA (höchste Stufe).
Das erste Prinzip der Web Content Accessibility Guidelines (Prinzip der Wahrnehmbarkeit) beschäftigt sich mit der Wahrnehmung von Inhalten. Es besagt, dass die Inhalte eines User Interfaces auch mit Einschränkungen wahrnehmbar sein müssen. Sie dürfen also nicht für alle verfügbaren Sinne unsichtbar sein. Aber wie setzen wir das um?
Bei Farbenblindheit werden Informationen zum Problem, die rein durch Farbe vermittelt werden. Nehmen wir Linkstyles, die sich nur durch Farbe vom Fließtext unterscheiden als Beispiel. Ist der Kontrast nicht stark genug, dann sind diese Links für einige Nutzer einfach nicht sichtbar. Durch hinzufügen von Icons, Hintergrundflächen oder Unterstrichen werden Links zusätzlich markiert und so auch für Betroffene Personen erkennbar.
Das bedeutet zusammengefasst, dass Inhalte auf mehrere Arten präsentiert werden sollen. Unterschiedliche Wege der Präsentation erreichen verschiedene Nutzergruppen.
Dadurch werden nicht nur User mit Einschränkungen erreicht, es bietet zusätzlich auch Vorteile für alle anderen User. Ein Video kann z.B. klassisch mit Ton und Bild betrachtet werden. Bei einer Hörschwäche sind die User allerdings auf Untertitel angewiesen. Untertitel sind aber auch dann nützlich, wenn die User aus anderen Gründen den Ton nicht einschalten können.
Das Prinzip der Wahrnehmbarkeit beschäftigt sich direkt mit der Darstellung der Inhalte eines Webproduktes. Dabei bezieht es sich beispielsweise auf konkrete Inhalte wie Bildmaterial, Video- und Audiodateien. Es setzt sich aber auch mit der Hierarchie und Struktur und die eindeutige Erkennbarkeit von Inhalten auseinander.
Da die Wahrnehmbarkeit auch stark von visuellen Punkten abhängig ist, können wir als Designer einige der Punkte aus dem ersten Prinzip bereits im Layout mit einplanen. Eine genaue Checkliste für das Layout findet ihr hier.
Bei nicht-textlichen Inhalten handelt es sich um Inhalte, die zum Verständnis eine textliche Beschreibung benötigen. Das sind z.B. Bilder, eingebettete Audio- und Video Files, Graphen, Formular-Elemente. Als Werkzeuge nutzen wir zur Umsetzung die ALT- und TITLE- Attribute von Bildern. Richtig angewendet unterstützen diese beschreibenden Elemente beispielsweise Screen Reader dabei, Inhalte an den User weiter zu geben.
Mit zeitbasierten Medien sind Audio- und Videodateien gemeint. Egal ob zuvor aufgenommen, oder als Live-Stream. Mit Hilfe von Untertiteln und beschreibenden Audiospuren wird sichergestellt, dass jeder Nutzer alle wichtigen Informationen erhält. Microsoft Design zeigt mit dem Video Inclusive: The Film nicht nur, wie sie die Theorie von inklusivem Design in die Tat umsetzen. Das Video ist ein gutes Beispiel für barrierefreie Medien.
Hier geht es darum, dass Inhalte auf unterschiedliche Arten wahrgenommen werden können. Und das, ohne dabei Informationen zu verlieren oder strukturelle Nachteile zu haben. Es gibt mehrere Arten, ein User Interface zu "konsumieren". Assistive Technologien wie Screenreader oder Magnifier sollen im Arbeitsprozess mit bedacht werden.
Wie wirkt sich das auf unsere Projekte aus?
In der Umsetzung betrifft das unter anderem die Seitenstruktur, die auch immer ohne das Styling noch Sinn ergeben muss. Oder aber Komponenten, die zur Interaktion dienen. Wenn sich beispielsweise Links rein farblich vom restlichen Text unterscheiden, dann können sie bei einer Farbenblindheit schwer erkennbar sein.
Dem User wird es leicht gemacht, Inhalte zu sehen und zu hören. Texte sind lesbar und die Kontraste sind stark genug definiert. Dieses Thema betrifft die Designer beim Aufsetzen des Layouts besonders. Viele der Punkte können und müssen schon während der Gestaltung mit eingeplant werden.
Das Prinzip der Bedienbarkeit ist das 2. Prinzip der WCAG. Es besagt, dass Komponenten und Navigation in User Interfaces von den Nutzern bedienbar sein müssen. Es darf also nicht passieren, dass zur Benutzung von Webseiten und Applikationen Interaktionen notwendig sind, die von Usern nicht ausführbar sind. Das ist doch eigentlich logisch, oder?
Stimmt. Im Grunde ist die Bedienbarkeit für uns als UX-Designer ein klares Ziel. Allerdings geht es hier nicht nur darum, dass unsere User einfach von Punkt A zu Punkt B finden. Eine gut durchdachte Seitenstruktur ist die Basis, die aber auch für alle zugänglich sein sollte.
Hast Du schon einmal versucht, im Web nur über das Keyboard zu deinem Ziel kommen? Das ist nicht immer ganz einfach und manchmal auch ziemlich frustrierend.
Alle Inhalte sind über die Tastatur erreichbar. Außerdem kann die Seite per Tastatur navigiert werden, der User kommt ohne Einschränkungen von einem Bereich zum nächsten.
User mit kognitiven, motorischen und visuellen Einschränkungen brauchen mitunter zusätzliche Zeit um Inhalte zu lesen und Aufgaben zu erfüllen. Gibt es Funktionen mit zeitlicher Einschränkung, kann das schwierig werden.
Denk zum Beispiel an Warenkörbe die sich nach einiger Zeit wieder leeren oder Formulare, die nach Ablauf einer Zeit zurückgesetzt werden. Den Usern soll die Möglichkeit gegeben werden, diese Zeitlimits anzupassen oder abzuschalten. Inhalte, die sich automatisch aktualisieren, können pausiert, abgeschaltet oder ausgeblendet werden.
Menschen mit fotosensibler Epilepsie reagieren sensibel auf bestimmte visuelle Reize2. Lichtblitze, blinkende Animationen aber auch kontrastreiche statische Bilder mit z.B. Gittermustern können Anfälle oder Migräne auslösen. Deswegen sollen solche Inhalte im Webcontent vermieden werden.
Die Seite ist so strukturiert, dass sie ohne Probleme auf unterschiedliche Arten navigierbar ist. Das bedeutet, dass einzelne Seiten einen aussagekräftigen Titel haben. Der Zweck von Links ist klar formuliert und kann auch von Screenreadern weitergegeben werden. Es gibt klare Überschriften, die den Content verständlich strukturiert.
Das dritte Prinzip der WCAG ist das Prinzip der Verständlichkeit. Wie der Name schon erwarten lässt, besagt es, dass Inhalte und Navigation für die User verständlich sein müssen.
Werkzeug des Prinzips sind unter anderem eine einfache Sprache und eine klar verständliche Navigationsstruktur.
Um Fehler zu vermeiden werden Hilfestellungen geboten. Das können z.B. Erklärungen bei Formularen oder Beispieltexte bei Eingabefeldern sein.
Die Inhalte sind in einfacher Sprache geschrieben oder sie werden zusätzlich in einfacher Sprache angeboten. Komplizierte Begriffe und Abkürzungen werden erklärt und beschrieben. Damit sich Screenreader auf der Seite zurecht finden, ist die Sprache jeder Seite definiert.
Hier ist es wichtig, dass der Inhalt einer Seite nicht ohne Vorwarnung seinen Kontext ändert. Wird beispielsweise eine Eingabe getätigt, dann sollte der User auf eventuelle Veränderungen vorbereitet sein. Ein Beispiel wäre eine Kalenderfunktion mit mehreren Arten von Terminen. Wird ein neuer Termin angelegt und die Art während der Eingabe geändert, dann ändert sich nur ein Teil des Eingabeformulars. Nicht aber der gesamte Aufbau.
Die Art und Weise der Navigation wird konsequent durchgezogen. Sie verändert sich nicht in unterschiedlichen Bereichen
Zusätzliche Informationen und klare Formulierungen unterstützen den Nutzer bei seinen Aufgaben. Sollten doch Fehler gemacht werden, dann werden diese klar ausgezeichnet und erklärt. Beispieleingaben und Markierungen helfen den Nutzern dann dabei, den Fehler zu beheben.
Das letzte Prinzip spricht von “Robustheit”. Robust sind Inhalte und Daten dann, wenn sie von Usern mit unterschiedlichen technischen Voraussetzungen verwendet werden können.
Diese Richtlinie gibt vor, dass für Daten eine maximale Kompatibilität mit “aktuellen und zukünftigen” User Agents, insbesondere aber assistiven Technologien, gegeben sein muss. Dafür soll zum einen vermieden werden, dass in der Entwicklung keine Maßnahmen umgesetzt werden, die diese Technologien unbrauchbar machen oder sie umgehen. Es muss außerdem sichergestellt werden, dass Informationen standardisiert bereitgestellt werden, damit assistive Technologien sie erkennen und richtig interpretieren können.
Quellen:
1 W3C | Web Content Accessibility Guidelines (WCAG) 2.0
2 D. Hermes, D. Kasteleijn-Nolst Trenité, J. Winawer | Gamma oscillations and photosensitive epilepsy
Sie wollen mehr erfahren?
Dann schreiben Sie uns. Wir freuen uns immer über den Austausch zum Thema Barrierefreiheit.
Einfach mal sprechen?
Mein Name ist Billy Thiemann, langjähriger Entwickler, Digitalisierungsexperte und Geschäftsführer von LEANATIC.
Lassen Sie mir Ihre E-Mail-Adresse oder Telefonnummer da – Ich freue mich darauf, Sie kennenzulernen.
