12 Tipps für Barrierefreiheit in deinem Konzept

Barrierefreiheit hilft nicht nur den beeinträchtigten Personen, sondern jedem deiner Nutzer. Einiges an deinem Konzept kannst du so gestalten, dass alle deine Nutzer eine gute Usability und entsprechend eine gute User Experience erfahren. Dabei solltest du darauf achten, dass jeder Dialog, jede Seite deines Produkts barrierefrei ist, denn Barrierefreiheit ist eines der 7 Dialogprinzipien.

Auch achtet Google vermehrt auf Barrierefreiheit und ratet deine Seite entsprechend gut oder schlecht. Aber du solltest es nicht für Google machen, sondern für deine Nutzer und Kunden.

Barrierefreiheit für Farbenblinde

Farbblindheit ist nicht so selten, wir du das vielleicht in deinem Alltag annimmst. Gerade die rot – grün – Blindheit ist vor allem unter Männern häufiger verbreitet, als du vielleicht denkst. Was kannst du nun tun, um deine Software auch für Farbblinde barrierefrei zu machen?

 

 

 

Mit dem Web Disability Simulator für Chrome, kannst du selbst simulieren, wie deine Website wirkt. Mit diesem Tool kannst du diverse Einstellungen vornehmen, die dir zumindest schnell eine entsprechende Rückmeldung geben.

Die Farbe ist kein Alleinstellungsmerkmal

Häufig werden rot und grün verwendet, wenn es darum geht dem Nutzer Feedback zu geben. Meist wird ein Fehler rot markiert und eine Erfolgsmeldung ist grün. Aber das allein reicht nicht aus. Du solltest die Usability Indikatoren mixen. Ähnlich wie im Straßenverkehr. Dort haben alle Schilder zwei oder drei Indikatoren.

 

 

Du könntest entsprechend deine Fehlermeldung auch mit einem Icon davor oder mit einer entsprechenden Schrift versehen. Das Gleiche gilt natürlich auch für Erfolgsmeldungen

 

Merke: Nutze Farbe nie als alleinigen Indikator. Verwende zusätzlich Icons, Text Dekorationen (unterstreichen, fett, usw.) oder Schrift, um etwas klar zu machen.

Barrierefreiheit für Blinde und Sehbeeinträchtigte

Blinde und andere Sehbeeinträchtige verwenden unterschiedliche Tools, um Websites zu bedienen und an ihre Informationen zu gelangen. Darunter finden sich Lupen, Zoomfunktionen oder auch Screenreader. Du solltest dich auf jeden Fall etwas mit der Funktionsweise dieser Tools vertraut machen, damit du nachher auch genau weißt, worauf du achten muss. Allerdings kommt an dieser Stelle auch einiges auf deinen Frontend – Entwickler an Arbeit zu. Spreche an dieser Stelle mit deinem Kollegen, wie ihr die einzelnen Probleme am besten lösen könnt.

Hierarchische Struktur

Nicht nur Steve Krug fordert hierarchische Strukturen innerhalb einer Seite, sondern auch die Barrierefreiheit. Ein Screenreader kann so eingestellt werden, dass er zu den Überschriften, der jeweiligen Seite geht. Dort kann der Blinde dann wahrnehmen, was sich unter dem jeweiligen Absatz verbirgt. Teile deine Website also in Hierarchien ein. Wichtig, der Seitenname steht immer als <h1> am Anfang der Seite. Zudem darfst du die Hierarchie nicht verletzen.

Kontraste

Kontraste sind für die Barrierefreiheit enorm wichtig. Dabei gilt es den Wert 4,5:1 nicht zu unterschreiten. Als wirklich absolutes Minimum ist im BitV2 – Test für Barrierefreiheit ein Verhältnis von 3:1 definiert.

Alternative Texte für Bilder, Videos und Dateien

Moderne Seiten verfügen über Bilder und Videos. Gerade auch was SEO (Search Engine Optimization) angeht, sind Bilder unerlässlich. Damit auch blinde Menschen etwas von den Bildern haben, empfiehlt es sich diese mit alternativen Texten zu versehen. In dem alternativen Text beschreibst du, was auf dem Bild zu sehen ist. Achte darauf, dass die Bilder prägnant beschrieben sind und die wichtigen Informationen erhalten bleiben.

Bei rein dekorativen Bildern solltest du dafür sorgen, dass diese auch so gekennzeichnet sind. Dadurch wird der Screenreader dann nicht vorlesen. Barrierefreiheit bedeutet auch unnütze Informationen auszublenden.

Barrierefreiheit für Hörbeeinträchtigte

Untertitel oder Gebärdensprache

Bei Videos solltest du vor allem für hörbeeinträchtigte Menschen einen Hilfestellung geben. Dazu sollten deine Videos auch immer einen Untertitel besitzen. Einige Programme fügen einen solchen Untertitel schon automatisch hinzu. Alternativ kannst du auch dasselbe Video mit Gebärdensprache anbieten. Wenn du Untertitel einem Video hinzufügst. Achte auf eine leicht verständliche Sprache um barrierefrei zu sein.

Vibrationen

Eine andere Möglichkeit die vor allem mobile Geräte bieten, ist die Vibration. Wenn du eine native Anwendung baust, in der zum Beispiel normalerweise bei einem bestimmten Ereignis ein Ton zu hören ist, ergänze diesen auch um eine Vibration. So kann auch der Hörbeeinträchtigte dieses Ereignis wahrnehmen. Gerade im Spielebereich gibt es den Einsatz von Vibrationen seit dem Nintendo 64 und ist daraus kaum mehr wegzudenken.

 

Barrierefreiheit für motorisch Eingeschränkte Personen

Große Flächen zum Klicken

Wer kennt es nicht. Die nervigen What’s App der lieben Eltern. Alle Eltern haben eins gemeinsam. Sie sind älter als ihr Kind. Meine Eltern sind mittlerweile auch jenseits der 60. Mit dem Alter lassen vor allem feinmotorische Fähigkeiten nach. Auf mobilen Geräten kann dies zu Problemen führen. Achte also darauf, dass deine Klickflächen immer ausreichend groß sind. Dazu gibt es mehrere Richtlinien zum Beispiel für die Fläche eines Button. Ich sag es mal so. Die Fläche sollte keine 36px unterschreiten. Das ist allerdings meine persönliche Meinung. Andere Richtlinien sprechen hier auch von 42px oder 44px oder auch nur 30px.

 

 

Tastatur und Maus

Bei dem Umgang mit Maus und Tastatur kann es zu weiteren Problemen kommen. Jemand der viele Ego-Shooter spielt kann wahrscheinlich mit einer Maus besser umgehen, als jemand, der den Computer nur im Büro für Excel nutzt. Auch hier gilt: Nutze große Flächen, damit auch ungeübte oder motorisch beeinträchtigte Personen mit der Maus die Klickfläche sauber treffen können.

Des weiteren achte im Web darauf, dass alle Elemente auch mit der Tastatur erreichbar sind. Sehbeeinträchtigte Personen nutzen die Maus weitaus weniger und Blinde gar nicht. Sie können nur über die Tastatur an die jeweiligen Elemente navigieren.

Barrierefreiheit für kognitiv beeinträchtigte Personen

Cognitive Load

Wer es schafft den Cognitive Load zu reduzieren, hat nicht nur eine barrierefreie Software, sondern meist auch eine besser Usability und User Experience. Auch hier gilt, weniger ist oft auch mehr. Konzentriere deinen Content auf das Ziel des Nutzers. Präsentiere nichts, was deinen Nutzer lediglich verwirrt und ihm keinen Mehrwert bietet. Jede Information die er verarbeiten muss, erhöht seinen Cognitive Load. Für kognitiv beeinträchtigt Menschen, die sind sehr schwer konzentrieren können, ist es wichtig, dass nicht zu viel Ablenkung vom Wesentlichen entsteht.

Einfache und verständliche Sprache

Die Sprache ist für deinen Nutzer sehr wichtig. Wenn du deinen Content barrierefrei gestalten möchtest, empfehle ich dir, eine einfache Sprache zu verwenden. Indikatoren für eine einfache Sprache sind:

• Keine Fremd- oder Fachwörter
• Nur Hauptsatz und max. ein Nebensatz
• Anzahl der Kommas reduzieren
• Keine Einschübe

Falls du ein anschauliches Beispiel für eine einfach Sprachen anschauen willst, empfehle ich dir ein Kinderbuch für die 1. Klasse.

Barrierefrei für technische Beschränkungen

Responsiv

Achte darauf das deine Anwendung auch mit kleineren Geräten als deinem Desktop Monitor mit 27 Zoll zu bedienen sind. Immer mehr Menschen haben in Ihrem Haushalt keinen Desktop PC mehr. Also liegt es an die deine Website responsiv zu machen. Das bedeutet weitaus mehr, als ein fluides Grid System zu nutzen. Manchmal musst du auch Interaktionen entsprechend anpassen.

Dein System kann nur barrierefrei sein, wenn es auch entsprechend responsiv ist.

Hover – Effekte

Mobile Geräte haben keinen Cursor. Somit gibt es dort auch keine Hover – Effekte. Einige Browser unterstützen dies zwar auch mobil, aber wirklich durchgesetzt hat es sich nicht. Daher gilt:

Keine wichtigen Informationen die zur Zielerreichung deines Nutzers dienen kommen in eine Toolbox oder in den Title eines Elements, welcher durch Hover ausgelöst wird.

Du kannst Hover – Effekte nutzen, allerdings brauchst du dann für deine mobile Variante eine andere Lösung.

Bedenke allerdings, dass auch Blinde, welche mit der Tastatur navigieren, diese Effekte dann vorgelesen bekommen müssen.