Die meisten Artikel zur digitalen Barrierefreiheit und barrierefreien Webseiten beschäftigen sich mit HTML, am Rande mit CSS und JavaScript, aber es gibt relativ wenige Informationen zur barrierefreien Web-Konzeption und Design. Das möchten wir in diesem Artikel anders machen. Barrierefreie Typografie.
Barrierefreie Webseiten gelten zu unrecht als unattraktiv. Tatsächlich gibt es in den Web content Accessibility Guidelines, den maßgeblichen Richtlinien, so gut wie keine harten Vorgaben für die visuelle Gestaltung von Webseiten. Das Meiste spielt sich unter der Oberfläche ab, also im HTML.
Dieser Beitrag wendet sich ausdrücklich an Personen, die das Design/die Konzeption von Benutzer-Oberflächen übernehmen. Natürlich ist es dennoch wichtig, eine kompetente Web-Entwickler:In zu haben, die nicht nur hier und da ein wenig ARIA hinzufügt.
Der Einfachheit halber gehen wir hier davon aus, dass Konzept und Design von einer Person gestaltet werden.
Die WCAG-Dokumente
Dieser Leitfaden kann natürlich nur eine erste Einführung sein. Wir empfehlen auf jeden Fall immer, in die relevanten Dokumente reinzuschauen. Dort werden die Aussagen spezifiziert, außerdem gibt es auch Hinweise auf Besonderheiten und Ausnahmen, die wir hier aus Platzgründen weglassen.
Noch eine kleine Einführung in die Dokumente. Maßgeblich ist die WCAG in der jeweils aktuellen Form. Die WCAG ist kanonisch, sie wird also selten geändert. Sie ist außerdem technik-agnostisch, das heißt, sie ist im Prinzip auf alle denkbaren User Interfaces und Dokument-Formen anwendbar. Sie besteht aus allgemeinen Prinzipien und Guidelines. Interessant sind aber die Erfolgskriterien/Success Criteria, weil dort konkrete Anforderungen formuliert werden.
Jedes Erfolgskriterium ist mit verschiedenen anderen Dokumenten verknüpft. So gibt es die Dokumente „Understanding WCAG 2.x“ und „How to meet WCAG 2.x“. Darin werden die Anforderungen in Bezug auf das Web konkretisiert, Techniken zur Umsetzung gezeigt sowie häufige Fehler.
Weiterhin wichtig sind die Erfolgsstufen/Levels. Alle Erfolgskriterien sind den Levels A, AA und AAA zugeordnet. Möchte man ein Minimum an Barrierefreiheit/Konformanz erreichen, müssen alle Anforderungen auf Level A erfüllt werden. Basis-Standard in den meisten Ländern der Welt ist Level AA. Das heißt, es müssen alle Anforderungen von A und AA erfüllt werden. Level AAA ist der Goldstandard, es müssen alle Erfolgskriterien der WCAG erfüllt werden. In der Praxis wird Level AAA für einen gesamten Web-Auftritt nicht angestrebt, da die Anforderungen nicht immer umsetzbar sind und sich teilweise widersprechen.
In den WCAG gibt es relativ wenige konkrete Anforderungen an Konzept und Design. Das hängt damit zusammen, dass alle Erfolgskriterien testbar sein müssen. Es ist aber schwierig zu sagen, ob eine bestimmte Schriftart lesbar ist und eine andere nicht.
1.1.1 Non-text Content (Level A)
Dieses Erfolgskriterium ist einfach zu beschreiben. Ihr müsst sicherstellen, dass alle Nicht-Text-Elemente, das heißt insbesondere Bilder im Contentbereich, Informationsgrafiken, als Grafik eingebundene Buttons sowie verlinkte Grafiken eine textliche Beschreibung erhalten.
Gerne vergessen wird das bei Social-Media-Buttons.
1.3.1 Info and Relationships (Level A)
Stehen Elemente in einem visuell erkennbaren Verhältnis zueinander, ist diese Struktur auch technisch erkennbar oder wird in Textform beschrieben.
Für Blinde oder Sehbehinderte ist die visuelle Anordnung von Elementen nicht erkennbar. Sie benötigen zusätzliche Informationen, um zu erkenne, ob und wie Elemente miteinander verknüpft sind.
Hier gibt es zahlreiche Möglichkeiten. Wichtig ist vor allem semantischer Code, um etwa Navigation, Fußzeiele und so weiter zu kennzeichnen.
Für Sehbehinderte könnt ihr ausprobieren, was passiert, wenn ihr die Stylesheets der Seite ausschaltet. Sind Element-Blöcke noch erkennbar?
1.3.3 Sensory Characteristics (A)
Eine Information oder Funktion wird nicht über ein einzelnes sensorisches Merkmal vermittelt, z.B. über Farbe, Form, Position und so weiter.
Der Hintergrund ist, dass Blinde, Sehbehinderte oder Personen mit anderen Sinnes-Einschränkungen eine Information eventuell nicht wahrnehmen oder interpretieren können, wenn sie über eine visuelle Form vermittelt wird.
Es ist nicht verboten, Farben, Formen oder die Position von Elementen zur Kommunikation zu verwenden. Es sollte aber zumindest eine weitere, nicht auf dem gleiche Prinzip basierende Information vermittelt werden.
1.3.4 Orientation
Webseiten sollten so gestaltet sein, dass sie nicht auf eine bestimmte Bildschirm-Ausrichtung beschränkt sind. Die Nutzer:In sollte also nicht gezwungen sein, ihr Display auf eine bestimmte Weise zu halten, damit sie eine Webseite oder App nutzen kann.
1.4.1 Use of Color (a)
Farbe wird nicht als einziges Mittel verwendet, um Information zu vermitteln. Es ist also nicht verboten, Farbe einzusetzen. Es muss aber mindestens ein weiterer Weg zur Informations-Vermittlung verwendet werden.
1.4.3 Contrast (Minimum) (AA)
Texte und visuelle Beschriftungen etwa bei Bedien-Elementen oder Informationsgrafiken sollen ein Kontrast-Verhältnis von mindestens 4,5:1 haben.
1.4.5 Images of Text (AA)
Sind Texte in Raster-Grafiken enthalten oder werden Texte über Bilder dargestellt, sollte eine Text-Alternative bereit gestellt werden. Blinde, Seh- und lese-eingeschränkte Personen sind nicht bzw. nur schwer in der Lage, Text in Grafiken oder anderweitig verfremdeten Text zu lesen.
1.4.8 Visual Presentation (AAA)
Hier gibt es strenge Vorgaben für die Darstellung von Text. So wird gefordert, dass eine Zeile maximal 80 Zeichen lang sein sollte , Text soll nicht als Blocksatz gesetzt sein und die Farbe von Text oder Hintergrund müssen von der Nutzer*In einstellbar sein.
Wie oben gesagt ist AAA relativ selten der Default-STandard, insofern muss diese Anforderung nur bei sehr hohen Ansprüchen an die Barrierefreiheit erfüllt werden.
1.4.9 Images of Text (No Exception) (AAA
Bilder von Text sind nur bei bestimmten Ausnahmen wie Logos erlaubt und ansonsten verboten.
1.4.12 Text Spacing (AA)
An dieser Stelle gibt es einige Vorgaben zur visuellen Textgestaltung. Text soll lesbar sein, wenn er um 200 Prozent vergrößert wird, daneben gibt es konkrete Vorgaben zu Zeichen-, Wort- und Zeilenabstand.
Zustände bedenken
Die Vorgaben zu Kontrast und Farbe gelten bei allen Zuständen, es sei denn, das jeweilige Element ist nicht aktivierbar. Das heißt, Kontraste und Farb-Vorgaben müssen etwa auch im aktivierten Zustand, bei Fokus oder Maus Over erfüllt sein.
Checkliste barrierefreies Webdesign und Konzeption
Trennen Sie Struktur HTML, Layout Css un Verhalten JavaScript
Überlegen Sie stets, ob sich eine gewünschte Funktion mit HTML erledigen lässt, bevor Sie zu JavaScript greifen
Setzen Sie ARIA mit Bedacht ein und nur wenn Sie wissen, wie sich die ARIA-Funktionen auswirken werden. Falsch eingesetztes ARIA kann schlimmer sein als kein ARIA
Überlegen Sie stets, dass Informationen semantisch – also maschinenlesbar sein sollen.
Alle Funktionen sollen per Tastatur bedienbar sein.
Das Verhalten einer Website soll stets voraussehbar sein für den Nutzer
Der Nutzer muss die einzelnen Bereiche der Website gut unterscheiden können, zum Beispiel durch Weißraum, Linien oder Farben.
Eine Webseite muss auch funktionieren, wenn ihre Elemente linear, also eines nach dem Anderen angezeigt werden.
In einem Formular müssen Formularfeld und Beschriftung eindeutig maschinenlesbar miteinander verknüpft sein.
Bei dynamischen Inhalten wie Cookie-Bannern oder Menüs muss der assistiven Technologie die eingetretene Änderung sowie die neue Information, z.B. neue Navigationspunkte, mitgeteilt werden.
Tabellen müssen korrekt linearisiert sein, ansonsten sind sie für Blinde nicht verwendbar.
Farben und Farbkombinationen sollten von vorneherein so gewählt sein, dass sie die Mindestkontrastwerte erfüllen. Das gilt vor allem für Fließtext, interaktive Elemente und Infografiken.