3 Gründe, warum barrierefreies Webdesign gutes Design ist

3 Gründe, warum barrierefreies Webdesign gutes Design ist

Die Arbeitswelt hat sich verändert. Der Übergang hin zu hybriden Arbeitsmodellen wird von der Notwendigkeit begleitet, Barrierefreiheit am Arbeitsplatz neu zu denken. Wir dürfen jedoch auch nicht außer Acht lassen, wie sich der Übergang zu einer in erster Linie digitalen Arbeitsumgebung auf unsere Kunden und Verbraucherinnen auswirkt. Es muss sichergestellt werden, dass alle und jeder mit dem Unternehmen auf seine Weise interagieren kann — und da kommt barrierefreies Webdesign ins Spiel.  

Ihre Webseite ist nicht mehr nur eine Option des medialen Outputs. Für viele Organisationen ist sie aktuell der erste Kontaktpunkt, den die Nutzer mit ihnen machen — wenn sie es nicht bereits vorher schon war. Vergleicht man Januar 2020 mit Januar 2021 lässt sich ein Zuwachs von Online-Transaktionen um 39,7 % feststellen. Auch wenn wir zu einer neuen Normalität übergehen, werden Online-Transaktionen — seien sie sozialer oder finanzieller Natur — schnell zu einem neuen Standard werden.  

Unternehmen können es sich nicht mehr länger leisten, Webdesign nicht als zentralen Bestandteil ihrer Geschäftsstrategie anzusehen. Sie haben möglicherweise bereits Anstrengungen unternommen, um Ihr aktuelles Ranking in Suchmaschinen zu verbessern oder Ihre Konvertierungsrate zu erhöhen. Barrierefreiheit sollte genauso viel Bedeutung beigemessen werden. Niemand sollte sich beim Zugang zu Ihrer Webseite Barrieren gegenübersehen. 

Im Grunde ist barrierefreies Webdesign einfach gutes Webdesign. Wie wird Barrierefreiheit aber definiert?

Bei Barrierefreiheit geht es darum anzuerkennen, dass unterschiedliche Nutzerinnen gegebenenfalls unterschiedliche Wege brauchen, um an dasselbe Ziel zu gelangen. Wir müssen diese Wege bieten und gut gestalten. Wir sind fest davon überzeugt, dass die Arbeit für alle Beteiligten funktionieren sollte. Wir sehen Barrierefreiheit als eine wichtige Stellschraube dafür an.  

Anne-Sofie Nielsen, CTO, Peakon

Barrierefreies Webdesign definieren

Barrierefreies Webdesign wird üblicherweise anhand der Richtlinien Web Content Accessibility Guidelines (WCAG) bewertet. Es gibt zwar eine Vielzahl von Faktoren, die vier Hauptbereiche sind jedoch: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. 

Jeder dieser Bereiche ist bedeutend und sie bedingen sich alle gegenseitig. Sieht man sich die WCAG genauer an, stellt man fest, dass jeder dieser Bereiche weitere Unterkategorien beinhaltet. Die vier zentralen Prinzipien der Barrierefreiheit sollten jedoch Ihre Strategie prägen. 

Die vier Prinzipien barrierefreier Webinhalte

Statt unsere eigenen Definitionen aufzustellen, wollen wir die Definition der WCAG zugrunde legen. Denn solche Standards helfen dabei, dass Konsistenz und Kompatibilität in barrierefreiem Design über verschiedene Webseiten hinweg entsteht.

  1. Wahrnehmbarkeit: Informationen und die Benutzeroberfläche werden so aufbereitet, dass die Benutzerinnen sie wahrnehmen können.
    • Das heißt, dass die Nutzer in der Lage sein müssen, die dargestellten Informationen wahrzunehmen (es kann nicht für all ihre Sinne nicht wahrzunehmen sein).
  2. Bedienbarkeit: Die Benutzeroberfläche und die Navigation sind bedienbar.
    • Das bedeutet, dass die Nutzerinnen in der Lage sein müssen, die Benutzeroberfläche zu bedienen (es dürfen keine Interaktionen verlangt werden, die der Nutzer nicht leisten kann).
  3. Verständlich: Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein.
    • Das heißt, dass die Nutzerinnen in der Lage sein müssen, die Informationen und die Bedienung der Benutzeroberfläche zu verstehen (die Inhalte und die Bedienung darf nicht über ihr Verständnis hinausgehen). 
  4. Robustheit: Die Inhalte müssen robust genug sein, dass sie von einer Vielzahl von User Agents (darunter auch digitale Assistenten) verlässlich interpretiert werden können.
    • Das bedeutet, dass die Nutzer auch dann in der Lage sein müssen, auf die Inhalte zuzugreifen, wenn sich die Technologie weiterentwickelt.

Jeder dieser Kategorien ist allein genommen recht einfach. Letztlich sollte jede Webseite:

  • mit den verschiedenen menschlichen Sinnen wahrnehmbar sein (Wahrnehmbarkeit),
  • mit verschiedenen Eingabemethoden benutzbar sein (Bedienbarkeit),
  • leicht zu interpretieren sein (Verständlichkeit) und
  • mit unterschiedlichen Technologien zu verwenden sein (Robustheit).

Das letzte der vier Prinzipien, die Robustheit, beinhaltet auch die Anpassung an technologische Assistenten, wenn sie sich weiterentwickeln. Weiterentwicklung funktioniert nicht, wenn die grundlegenden Bausteine nicht vorhanden sind. Wo fängt man also am besten an?

Das Internet basiert auf der Idee, dass jeder etwas beitragen kann. Und es ist sehr nachsichtig. Das bedeutet, dass häufig Seiten geschrieben werden, die funktionieren, aber nicht barrierefrei sind. Das Problem liegt darin, dass sich selten die Mühe gemacht wird, Seiten barrierefrei zu gestalten — denn es kostet Zeit. Es ist schwierig. Genau deshalb muss ein größeres Augenmerk darauf gelegt werden.

Albert Fernández, Senior Frontend Engineer, Peakon

3 Tipps für das Erstellen barrierefreier Webseiten

Wie bereits erwähnt, ist barrierefreies Webdesign einfach gutes Webdesign. Wenn eine Webseite barrierefrei gestaltet wird, wird sichergestellt, dass sie reibungslos und schnell für alle Nutzerinnen funktioniert, damit sie sie so verwenden können, wie es ihnen beliebt. Noch besser ist, dass Ihnen barrierefreies Design eine neue Perspektive auf Ihre Seite gibt und Sie so besser sehen können, was gut funktioniert und was überflüssig ist.

Die Aussage, dass barrierefreies Webdesign einfach gutes Design ist, ist jedoch aus praktischer Sicht nicht besonders hilfreich. Deshalb haben wir drei Tipps herausgearbeitet, die Ihnen helfen werden, Ihr Projekt für barrierefreies Design in Gang zu bringen — oder zu optimieren, was Sie schon haben. 

Ich habe mit Albert Fernández, Senior Frontend Engineer bei Peakon, gesprochen, um einen tieferen Einblick in die Thematik zu bekommen. Wie er sagt: „Ich bin vor fast vier Jahren zu Peakon gekommen und war in jedem Projekt involviert, das sich mit Barrierefreiheit befasst hat.“ Seine Perspektive hilft, um besser zu verstehen, was es bedeutet, barrierefreies Webdesign von Grund auf anzugehen.

Barrierefreies Webdesign hat viele Ausprägungen.

1. Verantwortung für den aktuellen Stand der Dinge übernehmen

Ganz gleich, ob Sie noch nie über Barrierefreiheit nachgedacht haben oder sie bereits in Ihre Webentwicklungsstrategie integriert haben, Sie müssen Ihre aktuellen Prozesse in jedem Fall einer genauen Prüfung unterziehen. Je nah dem, wie groß Ihr Unternehmen ist, gibt es dafür verschiedene Möglichkeiten:

  • eine interne Prüfung der Einhaltung der WCAG-Standards
  • verwenden Sie automatisierte Instrumente, die die Einhaltung der WCAG überprüfen
  • lassen Sie eine externe Prüfung durchführen
  • befragen Sie Ihre Mitarbeiter, um weitere Ideen und Meinungen zu erhalten.

In einer perfekten Welt würden Sie alle vier Methoden zu unterschiedlichen Zeitpunkten anwenden. Um das Webdesign in Hinblick auf Barrierefreiheit voranzubringen, müssen auch Fehler und Schwachstellen anerkannt werden. Sie haben sich möglicherweise darüber Gedanken gemacht, wie das Hauptmenü mit Screen-Reader-Programmen verwendet werden kann. Haben Sie aber auch bedacht, wie diese Benachrichtigungen lesen oder ob Bilder entsprechend konsistent im Feld „Alt Text“ betitelt wurden? Verantwortung zu übernehmen heißt, das gesamte Nutzererlebnis einer Person in Betracht zu ziehen: 

„Der Workshopleiter war blind. Das war eine sehr aufschlussreiche Erfahrung für uns. Es war unangenehm mit anzusehen, wie er sich durch die Peakon-Seite quälte. Es hat uns jedoch auch gezeigt, wie wichtig das Thema ist. Wie wussten es zwar schon, wir haben dem jedoch nicht die Bedeutung beigemessen, die es hätte haben sollen. Danach haben wir dafür gesorgt, dass wir das ändern.“

Albert Fernández, Peakon

2. Grenzen Sie die Definition von barrierefreiem Webdesign nicht zu stark ein

In manchen Fällen stellen Sie möglicherweise fest, dass auch der WCAG-Standard nicht unbedingt bedeutet, dass Ihre Seite voll und ganz barrierefrei ist. Implementieren Sie keine Änderungen, nur um ein Kriterium zu erfüllen — überlegen Sie zuerst, ob es benutzerfreundlich ist. Dazu können Sie für den Anfang Folgendes tun:

  • Nutzen Sie einen Screen Reader, um zum Kontaktformular zu navigieren und es auszufüllen.
  • Nutzen Sie die Tastatur, um zwischen vier verschiedenen Seiten hin- und her zu navigieren.
  • Finden Sie einen längeren Textabschnitt und lassen Sie ihn sich mittels eines Screen Readers vorlesen.

Waren diese Aufgaben einfach zu erledigen? Und wichtiger noch: hat es sich effizient angefühlt? 

Die Peakon-Umfrage ist ein gutes Beispiel dafür, barrierefreies Webdesign neu zu denken. Wie oben ersichtlich wird, ist das Instrument zur Sprachauswahl in der Peakon-Umfrage in der oberen linken Ecke platziert. Damit können die Nutzerinnen jederzeit die Sprache ändern, auch wenn die Umfrage bereits begonnen wurde. Sehenden Nutzern fällt sie kaum auf.

Aufgrund ihrer Position hören die Nutzerinnen, die Screen Reader verwenden, vor jeder einzelnen Frage der Umfrage, welche Sprache aktuell ausgewählt ist — in den Worten von Albert: „Das ist super nervig.“ Zum Glück hat das Team eine einfache aber effektive Lösung finden können:

„Das Vorlesen ist eine Voraussetzung des Standards WCAG, stimmt’s? Es sagt jedoch nichts darüber, dass nicht auf jeder Seite derselbe Inhalt vorgelesen werden muss. Was wir gemacht haben, ist ganz einfach: Die Sprachauswahl ist immer noch links oben sichtbar, jedoch für Screen Reader nun am Ende der Seite platziert, damit sie nicht auf jeder Seite neu vorgelesen wird, man aber trotzdem noch hinfindet, wenn man die Sprachauswahl nutzen möchte.“

Albert Fernández, Peakon

3. Viele Wege führen nach Rom

Es gibt noch eine andere Erkenntnis aus dem beschriebenen Beispiel: Wenn eine Webseite für alle zugänglich ist, heißt es nicht, dass sie für alle gleich sein muss. Stattdessen bedeutet barrierefreies Webdesign, dass Möglichkeiten geschaffen werden, dasselbe Ziel mit derselben Einfachheit erreichbar zu machen, auch wenn sich die Wege dahin stark unterscheiden.  

In Hinblick auf die Ergebnisse Ihrer Prüfung — sei es extern oder intern —sollten Sie sich überlegen, ob Ihre Lösungen die besten sind, oder ob Sie nicht eventuell zu stark versuchen, die verschiedenen Nutzererlebnisse so ähnlich wie möglich zu gestalten. Hier sind einige wesentliche Bereiche, die Sie für Ihr eigenes barrierefreies Webdesign in Betracht ziehen sollten:

  • Sind die Alt-Text-Beschreibungen Ihrer Bilder in Texten angemessen?
  • Gibt es einen hohen Kontrast zwischen dem Vordergrund und dem Hintergrund, der die Lesbarkeit erhöht?
  • Brauchen Symbole (d. h. Hinweisfelder etc.) Beschreibungen für Screen Reader?
  • Welche Videos haben Sie? Brauchen sie Audiodeskriptionen?

„Die Richtlinien WCAG sagen aus, dass jede Person alle Aktionen ausführen können muss, die jede andere Person ohne jegliche Art der Einschränkung auch ausführen kann. Es muss nicht unbedingt auf dieselbe Art und Weise sein, aber es sollte im selben Kontext sein. Sie sollten nicht drei oder vier Schritte mehr erledigen müssen, um zum selben Ziel zu gelangen.“

Albert Fernández, Peakon

Ein gutes Beispiel dafür, Inhalte aus verschiedenen Perspektiven zu sehen, ist die Datenvisualisierung. Peakons Manager-Dashboard bietet Führungskräften große Datenmengen und bereitet diese auf leicht erfassbare Weise auf. Diese Daten werden normalerweise in einem Graphen dargestellt. Wie Albert jedoch erklärt: „Bei einigen dieser Graphen ist es notwendig, mit der Maus über den Graphen zu fahren, um die Daten und Werte eines bestimmten Zeitpunktes einzusehen. Wie kann man das mit der Tastatur tun?”

Die Lösung für dieses Problem ist ziemlich einfach. Statt eines Graphen können wir einfach eine Tabelle verwenden. Jeder Datenpunkt wird direkt neben dem dazugehörigen Datum eingetragen, wodurch es nicht mehr nötig ist, mit der Maus über den Graphen zu fahren. Diese Lösung ist vielleicht optisch weniger ansprechend, aber sie ist für Tastaturnutzerinnen deutlich intuitiver. 

Planen Sie heute für morgen 

Wenn Sie Ihre Webseite bis auf dieses Niveau herunterbrechen und prüfen, erhalten Sie am Ende eine Seite, die hochgradig anpassbar ist. Wenn neue unterstützende Technologien auf den Markt kommen, stellt solches Webdesign sicher, dass Sie weiterhin technologisch auf dem neuesten Stand sind und an diesen Entwicklungen teilhaben. 

Außerdem bedeutet es auch, dass Sie Ihre Seite durchdacht und mit Weitsicht entwickelt haben. Von dieser Art des Webdesigns profitieren alle, wie Albert sagt:

„Wenn eine Webseite barrierefrei ist, bedeutet das auch für Power-User (Menschen, die alle Tastaturbefehle etc. kennen und nutzen), dass sie die Seite ebenfalls voll und ganz mit ihren Mitteln nutzen können. Eine barrierefreie Webseite ist gut für alle.”

Albert Fernández, Peakon

Bei barrierefreiem Webdesign geht es darum, dass alle auf Augenhöhe mit der Seite interagieren können. Dieses Niveau an Inklusivität sollte ein Eckpfeiler jedes fortschrittlichen Unternehmens sein. Klicken Sie hier und erfahren Sie, wie unsere Engagement-Plattform Ihnen helfen kann, Inklusion und Zugehörigkeit in Ihrer Belegschaft noch heute zu fördern.