Barrierefreiheit in der UI/UX Gestaltung

Barrierefreiheit

In Europa teilen etwa 87 Millionen Menschen eine Gemeinsamkeit: ihre Lebensrealität ist von einer Vielzahl an individuellen Fähigkeiten und Bedürfnissen geprägt, die nicht immer mit den Standards konventioneller Webstrukturen übereinstimmen. Die Idee von Barrierefreiheit im digitalen Raum, auch als Accessibility bekannt, zielt darauf ab, digitale Inhalte für jede Person zugänglich zu gestalten – ungeachtet körperlicher, technischer oder geistiger Unterschiede. Dieser Ansatz betrifft jedoch nicht nur Menschen mit bestehenden Einschränkungen; er knüpft vielmehr an die Gewissheit, dass jede:r von uns irgendwann auf eine barrierefreie Umgebung angewiesen sein kann, sei es aufgrund von Krankheit, Verletzung oder im Laufe des Alterungsprozesses.

Barrierefreiheit im Web umsetzen

Man kennt möglicherweise das allgegenwärtige WC-Symbol oder das Symbol für Behinderten-Parkplätze. Diese Symbole sind universell verständlich und erleichtern unseren Alltag, indem sie klare Informationen ohne aufwendige Erklärungen bieten – sei es der Standort einer Toilette oder die Reservierung eines Parkplatzes für Menschen mit Behinderungen. Ähnlich fungieren Webstandards, die die Struktur und Funktionalität verschiedener Elemente im Internet definieren. Von der Gestaltung von Webseiten bis hin zu Videos oder Bildern – sie legen fest, wie bestimmte Inhalte präsentiert und zugänglich gemacht werden sollen.

Barrierefreiheit im Web fokussiert sich darauf, dass Websites so gestaltet sind, dass sie von einer möglichst breiten Palette an Nutzern verwendet werden können, unabhängig von vorhandenen Einschränkungen. Das beinhaltet eine klare Lesbarkeit für Menschen mit Sehbehinderungen sowie eine benutzerfreundliche Gestaltung, die auch Personen mit motorischen Beeinträchtigungen eine problemlose Nutzung ermöglicht.

Die Web Content Accessibility Guidelines (WCAG) 2.2 beschreibt 4 Prinzipien, die man beachten sollte, wenn man Barrierefreiheit im Web umsetzen möchte:

1. Wahrnehmbarkeit

Inhalte sollten so gestaltet sein, dass sie von allen User:innen gleichermaßen wahrgenommen werden können. Dazu gehört zum Beispiel eine anpassbare Schriftgröße, oder dass alternative Textbezeichnungen für Bilder vorhanden sind.

2. Bedienbarkeit

Inhalte sollten so gestaltet sein, dass es allen User:innen möglich ist, jederzeit zur gewünschten Information zu gelangen. Hierzu gehört unter anderem, dass Links auch mit der Tastatur bedienbar sind oder Videos unterbrochen und neu gestartet werden können.

3. Verständlichkeit

Inhalte sollten so gestaltet sein, dass die dort enthaltenen Inhalte verständlich sind und die Bedienung nachvollziehbar ist. Dies betrifft beispielsweise die Sprache der Website oder die Struktur der Informationen.

4. Robustheit

Inhalte sollten so implementiert sein, dass sie von aktuellen und zukünftigen Benutzertools (z.B. Screen Reader) genutzt werden können.

Wie kann ich als UI/UX Designer für gute Accessibility sorgen?

1. Richtige Wahl von Farben und Kontrasten

Es ist wichtig, Inhalte nicht ausschließlich durch Farben zu kennzeichnen – beispielsweise Fehlermeldungen. Denn viele Menschen sind farbenblind und würden den Kontext einer Nachricht möglicherweise nicht erfassen. Eine bessere Herangehensweise wäre die Kombination aus Text und einem Icon, um die Aussage zu betonen. Auf diese Weise wird der Inhalt für farbenblinde Personen ebenso zugänglich wie für Menschen ohne Seheinschränkungen. Gemäß den WCAG-Richtlinien sollte das Kontrastverhältnis zwischen Text und Hintergrund bei 4,5:1 liegen, um ein AA-Rating für die Zugänglichkeit zu erreichen.

2. Textabschnitte kurz halten und mit Bildern unterstreichen

Bei der Darstellung von Text sind mehrere Aspekte zu beachten, beginnend bei der Auswahl der Schriftart. Ideal ist eine klare Schrift, die auch in kleinen Größen gut lesbar ist – wobei eine minimale Größe von 12px empfohlen wird, die jedoch je nach Schrift variieren kann (Wir verwenden in unseren Projekten meistens eine minimale Textgröße von 16px). Zudem erleichtern Textblöcke mit schmaler Breite, insbesondere für Menschen mit Lese- oder Sehschwierigkeiten, das Lesen. Deshalb wird von den WCAG empfohlen, die Anzahl der Zeichen pro Textzeile auf unter 80 zu begrenzen und Textmodule nicht auf gesamter Seitenbreite anzulegen.

3. Klare Fokus States

Einige Menschen navigieren durch Websites, indem sie ihre Tastatur anstelle einer Maus verwenden. Hierbei sind klare Fokus-States der Elemente entscheidend, um Nutzern anzuzeigen, welche Elemente sie aktuell mit der Tab-Taste ausgewählt haben. Wenn dieser Aspekt vernachlässigt wird, schließen wir nicht nur eine beträchtliche Anzahl von Nutzern aus, die darauf angewiesen sind, sondern sorgen auch für Frustration bei denen, die diese Methode freiwillig nutzen.

4. Konsistente Userführung

Es ist essenziell, dass Nutzer nicht darüber nachdenken müssen, wie sie sich auf einer Website zurechtfinden. Barrierefreies Design sollte vorhersehbar sein, damit Nutzer sich nicht fragen müssen, wie bestimmte Elemente funktionieren oder wie die Benutzeroberfläche auf anderen Seiten aussieht. Eine konsistente Platzierung und Reihenfolge von Navigationspunkten auf der Website ist entscheidend. Funktionale Elemente sollten zudem über verschiedene Seiten hinweg einheitlich agieren.