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 20.11.2021.

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.

Beratung für barrierefreie Webseiten

Unverbindlich anfragen

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.

Weitere Informationen zu barrierefreiem Farb-Kontrast

Farb-Kontrast für Text

Überschriften (Titel)

Jede Seite sowie jeder Beitrag sollte eine sinnvolle Struktur mittels Überschriften aufweisen. Dies hilft dir nicht nur bezüglich SEO, sondern auch für die Barrierefreiheit.

Weitere Informationen zu barrierefreien Überschriften

Beispiel von guten Überschriften

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.

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.

Weitere Informationen zu barrierefreien Formularen

Beispiel eines guten und barrierefreien Formulars

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:

accessiBe – Die professionelle Lösung

Ein Tool, welches dir die Umsetzung von Barrierefreiheit auf deiner Website sehr stark erleichtern kann, heisst accessiBe. Ein Blick auf die Funktionen lohnt sich auf jeden Fall.

Checklisten und weitere Ressourcen zur Barrierefreiheit

Einige tolle Checklisten und Ressourcen bezüglich Accessible Design (in Englisch) gibts hier:
Human Made | Accessible Design: A Process
Maja Benke | Checklists for Accessibility
Accessibility Developer Guide
Lina Witzel und Werner Hänggi | Barrierefreie Software: Warum wir uns mehr darum bemühen sollten, 22.02.2020
Stefan Brechbühl | Weshalb Barrierefreiheit keine Option ist, 26.02.2020
Andreas Uebelbacher | Projektleitende von Barrierefreiheit überzeugen, 01.07.2021