Barrierefreies Web-Design und Web-Konzeption

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 für Web-Konzeption und Design. Das möchten wir in diesem Artikel anders machen.
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.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.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.

Wenn Du es nicht machst, macht es keiner