Website und Barrierefreiheit – so einfach gehts

Barrierefreiheit bei Websites bedeutet, dass diese ohne Probleme für sämtliche Menschen zugänglich ist.

26.07.2018 - aktualisiert am 07.11.2019.

Dies umfasst Menschen mit Beeinträchtigungen wie gehörlose oder blinde. Barrierefreies Design heisst deshalb, dass die Website auch für Menschen mit Beeinträchtigungen konsumiert werden kann und dies ohne Einbussen. Aus diesem Grund sollten Website und Barrierefreiheit im Einklang miteinander stehen, wie beispielsweise der Bund in einer Checkliste zusammenfasst.

Prolog

Eine für mich unvergessene Begegnung in Bolivien hat mich zum Verfassen dieses Artikels gebracht. Als ich vor einiger Zeit die Silberminen von Potosi besichtigte, durfte ich dies zusammen mit der komplett blinden Anne aus Deutschland erleben. Ich bekomme beim Schreiben darüber immer noch Hühnerhaut, wenn ich darüber nachdenke. Wir haben uns auch nach der Besichtigung noch stundenlang unterhalten, bis ich sie dann auf ihre Reisen angesprochen habe.

Ich: Wie buchst du eigentlich deine Flüge – kannst du dies vollkommen selbständig?

Anne: Ganz einfach, ich rufe meinen Papa an!

Ich: Aber gibt es nicht Screenreader, die dir den Inhalt der Airline-Website vorlesen und du dann den Flug wählen kannst?

Anne: Doch schon, aber bei den meisten ist das Problem, dass es in Spalten organisiert ist. Mein Screenreader liest den Inhalt dann aber von oben nach unten und nicht von links nach rechts, wie das für sehende normal ist. Somit ist es für mich bislang leider nahezu unmöglich, Flüge selber zu buchen.

Ich: Wie orientierst du dich eigentlich in einer Stadt oder Region, die du nicht kennst?

Anne: Mein Handy ist da mega wichtig. Ich habe den Bildschirm meistens dunkel, damit mir andere nicht ständig auf das Display gucken können. Dann fahre ich mit dem Finger über das Display und das Handy liest mir dann vor, was sich jeweils an dieser Stelle befindet.

Ich: Oh – die Stimme liest aber ganz schön schnell vor.

Anne: Ja, das stimmt. Du kannst es anfangs nicht verstehen, aber wenn du es trainieren würdest, so wie ich das mal machen musste, geht das mit der Zeit problemlos.

Ich: Nutzt du auch GPS, um dich zu orientieren oder ist das zu kompliziert?

Anne: Auf jeden Fall! Mein Wunsch für die Zukunft ist jedoch, dass GPS bis auf einen Meter genau wird. Ich habe leider immer wieder das Problem, wenn ich nach einem Ort suche und diesen dann eigentlich gemäss Karte gefunden habe, ich dann noch 4 Meter in alle Richtungen suchen muss (beispielsweise nach der Eingangstür in ein Gebäude), bis ich dann wirklich am Ziel bin.

Website und Barrierefreiheit

Kontrast und Farben

Ein gutes Tool, um die Farben des Vorder- sowie des Hintergrunds miteinander abzustimmen und den Kontrast zu prüfen, ist der Contrast Checker (wie soll diese Website auch sonst heissen). Wenn der Kreis bei „AA“ grün ist, ist der Kontrast gut. Besser ist natürlich, wenn „AAA“ ebenfalls grün ist.

Schrift

Website und Barrierefreiheit basieren zu einem grossen Teil auf der gewählten Schrift. Die Schrift ist das A und O einer Website und fällt sofort auf. Ist sie dick, dünn, mit Serifen, ohne Serifen? Es gibt tausende mögliche Schriftarten zur Auswahl, viele davon gratis. Google Fonts sind ein guter Start, sollten aber aus Gründen des Datenschutzes auf dem eigenen Server eingebunden werden. Dünne Schriftarten wirken zwar edel, können dir aber bezüglich Kontrast und Lesbarkeit einen Strich durch die Rechnung machen.

Grundsätzlich gilt es, die richtige Mischung zwischen gut lesbarer und edler Schrift zu finden. Zudem empfehle ich, für Fliesstext eine Sans-Serif-Schrift zu verwenden, weil diese meistens besser lesbar ist als eine mit Serifen wie der Klassiker Times New Roman.

Links

Bei Links solltest du beachten, dass die Namensgebung zentral ist. Wenn der Website-Besucher also „Hier klicken“ sieht, kann sich alles mögliche dahinter verbergen. Wenn der Link aber beispielsweise „Offerte anfragen“ heisst, ist klar, was passiert, wenn der User darauf klickt.

Zudem würde ich das beliebte Ziel-Attribut bei Links, target=“_blank“, bei sämtlichen Links weglassen. Du möchtest vermutlich auch nicht vorgeschrieben bekommen, welche Äpfel du im Supermarkt kaufen musst. Genau so solltest du es auch dem User überlassen, ob der Link im gleichen Fenster oder Tab geöffnet werden soll oder nicht.

Zu guter Letzt: Links immer unterstreichen. Wie soll sonst ein farbenblinder Mensch erkennen, dass es sich aufgrund deiner blauen Linkfarbe im Text um einen Link handelt? Ist der Link jedoch unterstreichen, ist das ganze besser lesbar und verständlicher, wie der Vergleich in der folgenden Grafik gut darlegt. Einmal unterstrichen, einmal nicht unterstrichen.

Link unterstrichen

Formulare

Diese können ebenfalls besser oder schlechter umgesetzt werden, was die Barrierefreiheit betrifft. Heutzutage gilt es ebenfalls als schön, wenn der Platzhalter-Text für das Formularfeld im Feld drin platziert ist. Dies spart Platz und der Text verschwindet, sobald der Benutzer in das Feld klickt und einen Wert eintippt.

Grosser Nachteil dieser Lösung ist jedoch, dass diese durch Screenreader, welche Blinde häufig nutzen, nicht korrekt interpretiert werden können und ich somit von dieser Art der Umsetzung abrate. Die beste Lösung ist, die Feldbeschriftung ganz einfach oberhalb des Feldes anzuzeigen, so wie das in der folgenden Grafik ersichtlich wird.

Audit zur Barrierefreiheit einer Website

Diese Aspekte (Kontraste, Farben, Schrift, Links sowie Formulare) können nun mittels Accessilibity-Tools für eine Website auditiert werden. Ich habe dies mal mittels WAVE gemacht – hier das Ergebnis in der Übersicht:

WAVE-Audit Barrierefreiheit

Zwei tolle Checklisten bezüglich Accessible Design (beide in Englisch) gibts hier:
Human Made | Accessible Design: A Process
Maja Benke | Checklists for Accessibility

Weitere Artikel zu WordPress

WordPress 5.0 ist da! 09.12.2018
WordPress 5.0 und Gutenberg ja oder nein? 10.10.2018
Schnelle WordPress-Website (Infografik) 29.06.2018 – aktualisiert am 08.11.2019.
WPML Lifetime-Account war einmal 10.04.2018
WordPress-Wartung: 50 regelmässige Aufgaben 01.02.2018
Die wichtigsten Punkte zu WordPress-Sicherheit 30.12.2017 – aktualisiert am 08.11.2019.
WordPress-Update fehlgeschlagen – was tun? 27.12.2017
10 Gründe, warum WordPress die richtige Wahl ist 05.11.2017 – aktualisiert am 30.11.2019.