Die Zukunft mitgestalten: 6 Tipps für Barrierefreiheit im Internet

Niemanden ausschließen, alle involvieren!
Warum Barrierefreiheit wichtig ist und wie wir sie umsetzen können.

Junge Eltern kennen diese Momente, wenn sie eingeschränkten Zugriff auf ihr Smartphone haben: Mit einer Hand den Kinderwagen schieben, mit der anderen das Handy halten und eine wichtige WhatsApp-Nachricht schreiben. Zugleich ist es ein sonniger Tag und die Sonne scheint direkt auf das Display. Kaum sichtbar, was auf dem Bildschirm passiert. Es ist Ende des Monats, das Datenvolumen ist fast aufgebraucht, die Website lädt sehr langsam, welche die wichtige Information, die gerade benötigt wird, nur langsam lädt. Nun ist sie endlich geladen, aber diese eine wichtige Information ist kaum auffindbar, weil die Website unstrukturiert aufgebaut ist. Immerhin muss die Person den Laufweg im Auge behalten, den Kinderwagen mit einer Hand schieben und jetzt hängt die Seite wieder. Frustrierend.

Die junge Mutter/der junge Vater ist „temporär behindert.“ Somit erhält der Begriff „Barrierefreiheit im Internet“ einen anderen Blickwinkel.

Denn meist werden Behinderungen mit folgenden Eigenschaften gleichgesetzt:

• Blindheit / Farbenblindheit
• Taubheit / Hörprobleme
• Dauerhafte Mobilitätseinschränkungen
• Kognitives Defizit

Jedoch betreffen dies auch Menschen ohne dauerhafte Beeinträchtigung:

• Blindheit / Farbenblindheit = Schlechte Lichtverhältnisse (zu hell/zu dunkel); Augen werden mit dem Alter schlechter
• Taubheit / Hörprobleme = Umgebung ist sehr laut; Ton darf gerade nicht genutzt werden (Büro, Bahn, …)
• Mobilitätseinschränkungen = Einkaufstaschen in der Hand, Kinderwagen, Arm gebrochen, Krücken, …
• Kognitives Defizit = Website hat eine schlechte Inhaltsstruktur – Informationen sind kaum auffindbar; verwirrende Menü-Bezeichnungen; ein Gespräch lenkt von Inhalten ab, …

Körperliche Beeinträchtigungen betreffen uns alle. Egal ob wir eine angeborene Behinderung haben, zeitweise eingeschränkt sind oder weil wir mit dem Alter schlechter sehen oder hören: Wir alle wollen ein optimales Erlebnis bei der Nutzung von Webinhalten erfahren und niemand will sich ausgeschlossen fühlen. Wie Tim Berners Lee so schön gesagt hat: „Die Macht des Webs liegt in seiner Universalität. Der Zugang für alle Menschen, unabhängig von einer Behinderung, ist ein wesentlicher Aspekt.“

All das würde eigentlich schon reichen, um sich nun das Ziel zu setzen: „Wir wollen unseren Usern das Leben leichter machen!“ Neben dem Goodwill gibt es handfeste Erkenntnisse, die den Schritt in die Barrierefreiheit vorantreiben sollen: Google honoriert Barrierefreiheit mit einer besseren Auffindbarkeit.

Darüber hinaus hat der Bundestag beschlossen, dass bis Herbst 2020 alle Seiten von öffentlichen Einrichtungen barrierefrei sein müssen. Dies betrifft Krankenhäuser, Bibliotheken, städtische Verwaltungen, etc. Bis Sommer 2021 betrifft das auch mobile Applikationen.

Wo fangen wir an? Müssen wir unseren Auftritt komplett neu aufsetzen?

Nein – das definitiv nicht. Man kann Schritt für Schritt vorgehen und sich im ersten Schritt damit auseinandersetzen, wie barrierefrei die aktuelle Seite schon ist. Im Browser „Chrome“ kann man mit Hilfe des Entwickler-Tools „Lighthouse“ Seiten auf Barrierefreiheit prüfen. Unter „Audits“ ist der Reiter „Accessability“ verfügbar. Google prüft die Seite und gibt Tipps, was an der Seite noch verbessert werden kann. Konkret: Lädt die Seite schnell? Ist sie SEO-freundlich (hat also einen sinnvollen Aufbau von Inhalten)? Ist ein sauberer Code implementiert ist (ist das HTML-Markdown strukturiert und nicht überladen)? Ist eine gute Usability vorhanden (Kontraste, textliche Hinweise bei Errors, usw.)?

Basierend auf den Richtlinien des World Wide Consortiums (W3C), ergeben sich unter anderem folgende sechs Punkte, die dabei helfen, Barrierefreiheit erfolgreich umzusetzen. Das W3C unterscheidet in drei Konformitätsstufen (A, AA, AAA)*.

 

• Farbkontraste

Sind schwache Farbkontraste gegeben, fällt es Usern schwer den Inhalt schnell zu konsumieren, da Text und Hintergrund zu einer Fläche verschwimmen.
Als Stichprobe habe ich von der Startseite k-zwoelf.com die Call to Action Box „Kommunikation verändert“ auf der Seite webaim.org getestet. Geprüft werden die Hintergrundfarbe und -Sättigung im Vergleich zur Schriftfarbe auf Hintergrund. Schriften die „größer“ oder „fetter“ sind, werden ebenfalls leichter wahrgenommen und mit in den Kontrast Ratio eingerechnet.

Laut dem W3C sollte das Kontrastverhältnis zwischen Text und Hintergrund mindestens 4,5 zu 1 betragen (Konformitätsstufe AA.). Für die Entwicklung einer Seite bedeutet dies, dass Farben und Schriften rechtzeitig auf die Kontrasthöhe geprüft und mitbedacht werden sollten.

 

• Wichtige Informationen mit Icons, Schrift und Farbe unterstützen

Unter „wichtige Informationen“ fallen zum Beispiel Warnfelder, die dem User signalisieren sollen, dass bestimmte Eingaben benötigt werden. Meist werden Warnfelder nur rot umrandet. Jedoch, wenn eine Farbblindheit vorliegt, könnte das Rot zum Beispiel gar nicht als Warnung erkannt werden. Ein Symbol (z.B. Warndreieck) ist sprechender und erzeugt keinen Frust.

 

 

• Nutzung von Fokusindikatoren
  
  Fokusindikatoren sind (meist blaue) Umrandungen, die um Interaktionsflächen wie Buttons oder Textfelder erscheinen, wenn man sich mit der Tastatur durch eine Website navigiert. „Wann mache ich das schon mal?“ Erstens: sollten wir nie nur von uns ausgehen und zweitens: öfter als man denkt. Füllt man Textfelder aus, wie das vorherige Beispiel von PayPal, so nutzt man öfter als man denkt die Tab-Taste, um in das nächste Feld zu gelangen. Wäre hier kein Fokusindikator hinterlegt, würde das Feld nicht sichtbar werden. Blinde Menschen nutzen die Tastatur in Kombination mit einem Bildschirmlesegerät, um sich durch eine Seite zu navigieren. Aber auch eine kurzfristige Einschränkung wie eine Sehnenscheidentzündung kann einen dazu zwingen, die Maus vorerst nicht zum Navigieren zu nutzen. Auch hier sollte man darauf achten, dass diese Indikatoren einen hohen Kontrast aufzeigen und schnell sichtbar sind.
  W3C: Fokusindikatoren

 

• Bezeichnungen oder Anweisungen bei Formularfeldern und Eingaben verwenden
  „Was sollte ich nochmal in das Feld schreiben?“ Formulare userfreundlich zu gestalten, ist immer wieder eine Herausforderung. Welche Felder werden benötigt und wie sollen sich diese verhalten? Auch ich habe schon aus „Platzmangel“ oder Wunsch nach „Ästhetik“ zu der Lösung gegriffen, dass die Bezeichung des auszufüllenden Feldes schon in das Feld integriert wird – was auch nicht verkehrt ist. Nur was soll geschehen, wenn der User nun beginnt, das Feld auszufüllen, bzw. der Cursor nun in das Feld gesetzt wurde? Es sollte noch immer ersichtlich sein, was in das jeweilige Feld eingetragen werden soll. Die App Headspace hat das im Registrierungsbereich schön gelöst:
  

Außerdem sollten die Platzhaltertexte in den Feldern einen hohen Kontrast aufweisen (dies zieht sich durch alle Informationen durch, die man dem User geben will). Sind die Texte zu hell auf weißer Fläche, ist dieser Hilfetext für manche Personengruppen kaum lesbar. Lässt man die Feldbeschreibung weg, weiß zum Beispiel ein User mit Screenreader gar nicht, was er ausfüllen muss.
Free Code Camp: Barrierefreie Formfelder und W3C Keyboard Navigation

 

• Sinnvolle Alt-Texte für Bilder verwenden
  
  Stellen wir uns vor, eine Seite lädt statt Bildern nur graue Flächen. Wir wissen gar nicht, was uns die Bilder vermitteln wollen würden. Deswegen ist es gut, wenn die Bilder „sprechend“ beschrieben werden. Hierfür gibt es das Attribut „Alt-Text“, die häufig sehr stiefmütterlich behandelt werden. Jedoch sehr wichtig sind für Menschen, die blind und auf einen Screenreader angewiesen sind. Bilder können so beschrieben werden: „Abbildung eines Screenshots von der App Headspace in der Formularfelder zu sehen sind“. Außerdem hilft das Google dabei, diese Bilder besser zu verorten und besser auffindbar zu machen. Für den sehbehinderten User ist es sehr frustrierend, wenn das Bild mit „Screenshot-2.jpg“beschrieben wird – und Google kann damit auch nichts anfangen.
  W3C: Alt-Attribute benutzten

 

• Ein korrektes Mark-up verwenden
  Die Nutzung eines korrekten Marku-ups sollte im Online-Bereich mittlerweile in Fleisch und Blut übergegangen sein. Hierdurch werden Inhalte hierarchisch definiert. Eine <H1> kennzeichnet die Headline und somit die wichtigste Aussage auf einer Seite. So liest Google und so lesen auch Screenreader Texte. HTML-Tags sind nicht nur zur Gestaltung zu nutzen, sondern um Inhalte eben strukturiert aufzubereiten. Was will ich als Kernaussage vermitteln, welche weiteren Texte erklären meine Headline und welche weiteren Inhalte sind da, um evtl. weiterführende Informationen zu vermitteln? Das bedeutet auch, dass man sich schon vor dem Erstellen einer ersten Code-Zeile Gedanken darüber machen sollte, wie der Zielgruppe Inhalte vermittelt werden sollen. So kann man eine ungedordnete Informationsflut vermeiden.
  WebAim: Semantische Struktur

 

 

* Konformitätsstufen laut W3C:

Stufe A: Für die minimale Konformitätsstufe erfüllt die Webseite alle Erfolgskriterien der Stufe A, oder es wird eine konforme alternative Version bereitgestellt.

Stufe AA: Für die mittlere Konformitätsstufe erfüllt die Webseite alle Level A und Level AA Erfolgskriterien, oder es wird eine Level AA-konforme alternative Version bereitgestellt.

Stufe AAA: Für die „beste“ Konformitätsstufe erfüllt die Webseite alle Level A, Level AA und Level AAA Erfolgskriterien, oder es wird eine Level AAA konforme alternative Version bereitgestellt.

 

Quellen und hilfreiche Links zum Nachlesen:

Incluse Design: Microsoft gibt Anweisungen zur Barrierefreiheit

Für`s Auto oder Joggen: Podcast-Folge zur Barrierefreiheit

Wie Barrierefreiheit zur Wirtschaftlichkeit beiträgt

Barrierefreiheit von öffentlichen Seiten

Kontrast Check

Wie strukturierte Daten funktionieren