5 Punkte, um einer barrierefreien Webseite näherzukommen.
Ganz kurz und knapp. Es gehören folgende Punkte dazu:
- Ausreichender Kontrast zwischen Vorder- und Hintergrundfarbe
- Links und Schaltflächen über die Tastatur bedienbar
- Screenreader-Kompatibilität
- Nutzung von verständlicher Sprache
- Barrierefreie Bedienbarkeit von Formularen
Meine Kund*in fragte mich:
Was heißt das genau, eine barrierefreie Webseite? Was genau ist eine barrierefreie Webseite in Bezug z. B. auf Gestaltung meines Webauftritts, Erstellung meiner Texte und Inhalte? Kann man dann später nachrüsten?
UND:
Brauche ich eine barrierefreie Website?
Ich habe das zum Anlass genommen, mein bisher vorhandenes Wissen darüber als Blogartikel zu verpacken. Sharing is Caring. So hoffe ich, mein Wissen an alle Interessierte einfach weitergeben zu können.
Ich fange mal hinten an bei „Muss ich eine barrierefreie Website haben?“
Meine Antwort lautet Jaein. Mal wieder ist es nicht so eindeutig.
Rechtlich gesehen (ACHTUNG: Ich bin keine Anwältin und spreche nur aus Erfahrung) gilt die Pflicht ab sofort für Unternehmen ab 10 Mitarbeitern oder 2 Mio. Umsatz. Je nachdem, was eher zutrifft. B2B Websites und rein private Websites sind davon ausgenommen, auch sie haben keine gesetzliche Pflicht.
Mein ganz großes ABER:
Ich finde ein gewisses Maß an Barrierefreiheit generell immer wichtig. Denn es kommt allen Menschen zugute, weil mit den Basics einfach Nutzerfreundlichkeit hergestellt wird:
Zum Beispiel durch guten Kontrast zwischen Schrift und Hintergrund.
Eine Website muss gut lesbar sein, egal ob mit einer Sehbeeinträchtigung oder nicht.
Daher sollte die Schrift immer groß genug dargestellt werden.
Zusätzlich sollte die Website eine einfache Navigation und Nutzerführung haben. Alle Deine Kunden werden sich länger auf Deiner Seite aufhalten und mehr interagieren und eben nicht gleich wieder abspringen, wenn Du sie einfach und logisch durch Deine Seiten leitest.
Für mich sind das wirklich „Hygienefaktoren“. Darüber hinaus macht es auch für SEO Sinn, beschreibende und für den Inhalt wichtige Bilder mit einem ALT-Text zu versehen. So können Screenreader wiedergeben, was auf den Bildern zu sehen ist. Der in der Sicht eingeschränkte Nutzer kann die Bilder also „hören“.
On top dazu muss die Seite mit der Tastatur bedienbar sein, Formulare sollten auch per Screenreader lesbar sein. Was dem Screenreader oft gar nicht passt, sind zum Beispiel Headline, die sich selber Buchstabe für Buchstabe aufbauen, oder Teilsätze, die sich abwechseln/rotieren. Sicher habt ihr sowas schon mal gesehen. Sieht fancy aus, macht Screenreadern aber oft ein Problem.
Da gibt es noch ganz viele, auch technische Einzelheiten zu beachten.
Ein weiteres Thema sind Animationen und Bewegtbild.
Der sehr aufschlussreiche und informative Blog von gehirngerecht-digital schreibt, warum das so wichtig ist:
„Sie verursachen manchmal Probleme mit assistiven Technologien, überdecken Inhalte und lösen sogar Migräne oder im schlimmsten Fall epileptische Anfälle aus!“
Für barrierefreie Websites müssen hier verschiedene Zeiten und Grenzen eingehalten werden.
Am wichtigsten dabei ist:
Alle Animationen über 5 Sekunden müssen vom User gestoppt werden können. Das betrifft vor allem auch Videos, Slider oder GIFs, die auf Autoplay laufen.
Ehrlicherweise sind Autoplay Videos für alle User eher nur nervig.
Ein sehr beliebter Effekt, den Du sicher kennst, ist der Parallax-Effekt. Hier bewegen sich Vorder- und Hintergrund unterschiedlich, um so eine räumliche Illusion zu erzeugen. Das kann bei einigen Menschen Schwindel auslösen. Sparst Du Dir den Effekt, verbinden noch mehr Nutzer Deine Website mit einem angenehmen Erlebnis. Zusätzlich sparst Du wieder Ladezeit und somit Ressourcen.
Du siehst also, dass auch hier wieder Nachhaltigkeit, Barrierefreiheit und Nutzerfreundlichkeit ineinander greifen.
Vom Nutzerbedürfnis über das Design und die Technik zum Inhalt:
Barrierefreiheit fängt nicht erst bei der Gestaltung und der Umsetzung einer Website an, sondern schon bei den Inhalten: Denn auch Texte können zum Beispiel in leichter Sprache verfasst werden. Sie verzichten auf komplizierte Formulierungen und Fachwörter. Oder erklären letztere.
Mit dem LanguageTool kannst Du bereits beim Erstellen Deiner Texte ein Feedback zur leichten Sprache erhalten. Ich habe es mal für diesen Artikel getestet und bin nicht wirklich zufrieden damit. Mach Dir gern Dein eigenes Bild!
Manche Websites stellen den Nutzern auch PDFs zur Verfügung.
Die PDF-Dateien müssen auch entsprechenden Richtlinien zur Barrierefreiheit folgen, wie den geltenden Standards der EN 301 549 und WCAG 2.2.
Fragst Du Dich jetzt:
Ist meine Website barrierefrei?
Teste das ganz einfach aus:
Zum Beispiel mit google Lighthouse in Deinem Browser oder hier per Google Pagespeed
Im Chrome Browser mit Lighthouse:
- Öffne ein neues Inkognito-Fenster und gehe im Menü zu Anzeigen: Entwicklertools und in dem neuen Fenster auf den Reiter „Lighthouse“.
- Am besten lässt Du den Test für Mobil und danach für Desktop laufen. So deckst Du alle Nutzersituationen ab.
- Du wirst nicht nur ein Ergebnis zur Ladezeit und SEO bekommen, sondern auch zur Barrierefreiheit. So kannst Du direkt sehen, an welchen Stellen Verbesserungsbedarf besteht.
Umfänglich weißt Du dann noch nicht Bescheid, es gibt einzelne Tools für die unterschiedlichen Bereiche, um noch tiefer einzusteigen. Dieser Test bietet Dir aber eine sehr gute Übersicht mit konkreten Punkten, die Du verbessern kannst.
Wenn Du direkt auf Deiner Seite sehen willst, was die Barrierefreiheit einschränkt, wo Du optimieren kannst, kannst Du auch diesen Test bei wave laufen lassen.
Kleiner Insight:
Meine Website liegt auch erst bei einem Score von 87. Also noch Luft nach oben, und wieder was zu tun 😉
Und noch ein Insight, der Dich vielleicht ein wenig beruhigt: Selbst die Seite der Aktion Mensch liegt zurzeit bei einem Wert von 89.
Ich selber stehe gerade noch am Anfang meiner Reise zur Barrierefreiheit, unterstütze Dich aber gern bei Fragen oder gebe Dir Tipps, wenn Du nicht weiterkommst. Denn, wie ich oben schon geschrieben habe, sind viele Aspekte der Barrierefreiheit auch für alle Nutzer relevant.
Hier kannst Du Beispiele für Webdesign ansehen, das meine Kund*innen glücklich gemacht hat. Oder teste Deine Seite ganz kostenlos und schnell mal auf Barrierefreiheit.
