Barrierefreiheit und Inklusion in Design-Teams etablieren 

Öffentliche Einrichtungen haben Zugänge zu ihren Gebäuden, die auch Menschen mit motorischen Einschränkungen nutzen können. Ampeln haben auditive Indikatoren für sehbehinderte Menschen für Rot- und Grünphasen. In den Nachrichten wird gegendert, um niemanden kategorisch auszuschließen. 

Als Senior Designerin habe ich schon in unterschiedlichsten Projekten mitgewirkt. Doch das Thema Zugänglichkeit „für alle“ war eher nebensächlich und wurde vom Experience Team daher stiefmütterlich behandelt. Bei Zielgruppenanalysen wurde auf spezifische Kriterien von Nutzern der Webseite geachtet – dabei waren die Personas nie kognitiv oder motorisch eingeschränkt, geschweige denn wurde darauf geachtet, wie der Lebensalltag der Menschen aussehen könnte. Barrierefreiheit wurde als technisches Kriterium betrachtet, während die Struktur des Contents den Website-Redakteuren überlassen wurde. Die Aufgabe des Designers bestand meist darin, die Konzepte der UX-Kollegen ästhetisch und ansprechend zu gestalten, um vor allem den Stakeholdern zu gefallen.

Die Verpflichtung zur Barrierefreiheit im Internet ist nicht nur ethisch, sondern auch zunehmend gesetzlich vorgeschrieben. Ab Mitte 2025 wird es durch das Barrierefreiheitsstärkungsgesetz für einige Dienstleister zur Pflicht in Deutschland, gewisse Standards in digitalen Produkten einzuhalten.  

Wenn über Barrierefreiheit gesprochen wird, geht es meist um Menschen die permanent durch gewisse Vorerkrankungen oder genetisch bedingt eingeschränkt sind. Wir sprechen da auch immerhin von mindestens 7,8 Mio. Menschen in (Stand: 2022; Quelle), also fast 10% aller Menschen hierzulande, die einige Webseiten nicht oder nur teilweise benutzen können. Es geht aber längst nicht mehr nur darum, die technischen Voraussetzungen für bspw. Screenreader. Jeder Einzelne von uns ist irgendwann im Leben mal temporär oder situativ eingeschränkt – dabei wollen wir aber doch auch nicht auf unsere Lieblingswebsites oder Apps verzichten. 

Gehen wir hier mal genauer ins Detail: 

Motorische Einschränkungen 

Abseits von bekannten dauerhaften motorischen Einschränkungen gibt es temporäre und situative Einschränkungen, die je nach Kontext der Webseite wichtig werden: 

• Gebrochener Arm oder Hand und dieser befindet sich jetzt in einem Gips: Das Eintippen von Daten beispielsweise beim Arzt mit nur einer Hand wird mühselig – wie könnte dieser Mensch trotzdem das Formular ausfüllen? 

• Man entwickelt einen Grauen Star und sitzt aktuell auf der Warteliste für eine Operation: Das Internet zu nutzen wird schwerfallen, je kontrastärmer und komplizierter das Interface ist. 

• Eine Ohrenentzündung, die zu akutem Hörverlust führt, aber in absehbarem Zeitraum abheilt: Telefonisch einen Termin beim Arzt auszumachen kann Menschen daher unerwartet schwerfallen. Eine andere Option muss her.
  

Situative Einschränkungen 

Alle Eltern kennen das: Sobald man mit Kleinkind auf dem Arm das Haus verlässt, in der anderen Hand den Kinderwagen oder Einkäufe – und schon wird es schwierig ans Telefon zu gehen oder „mal schnell“ was zu Googeln. 

• Man sitzt im Auto. Berufsverkehr. Neue Stadt. Die Navigation auf dem Handy muss so eindeutig und deutlich sein, dass man mit den Augen auf der Straße bleiben kann. 

• In der Bahn möchte man sich unbedingt dieses eine Video anschauen, aber man hat seine Kopfhörer vergessen. Schwierig, wenn es keine Untertitel gibt …

  

Es gibt aber auch dauerhafte kognitive Einschränkungen, die oft nicht gerade gründlich mitbedacht werden: 

• Dyslexie/Legasthenie/Lese- und Rechtschreibschwäche (Das betrifft immerhin 12,1 % aller erwerbsfähigen Menschen in Deutschland und macht es grade ihnen schwer, Sachverhalte in Textform zu verstehen und zu verarbeiten. Quelle) 

• Dyskalkulie (Menschen, die mit Zahlen nicht umgehen können und ihnen keinen Wert zuweisen können, ca. 3-7% aller Kinder und Jugendlichen, die auch im Erwachsenenalter solche Probleme aufweisen. Quelle ) 

• Sehbehinderung (ca. 350.000 Menschen in Deutschland, die entweder teilweise, sehr stark oder komplett blind sind. Quelle) 

• Epilepsiebedingte kognitive Dysfunktion 

• ADHS 

• Demenz/Alzheimer 

• Autismus 

• …
  

Eine schier nicht endende Liste an Kriterien. Daher ist es umso wichtiger, Barrierefreiheit ganzheitlich zu betrachten und Web Content Accessibility Guidelines (WCAG) nicht nur dann einzuhalten, wenn diese explizit vom Auftraggeber gefordert sind, sondern diese als Grundsatz – genauso wie Gestaltgesetze – in die Designarbeit mit einzubeziehen. 

Aus meiner Sicht liegt die Hauptverantwortung für die Einhaltung dieser Standards zu 60-80% bei den Bereichen UX, UI und Frontend. Um bei den wichtigsten Kriterien Unterstützung zu bieten, existieren umfassende Kataloge im Internet, wie beispielsweise dieser: https://www.a11yproject.com/checklist/  

Hier ein paar konkrete Beispiele: 

1. Kontrast 

Kontrast ist essenziell. Mittlerweile gibt es einige Webtools, als auch Figma Plugins (wie beispielsweise Stark) die einem enorm dabei helfen, den richtigen Kontrast für Text und interaktive Elemente zu finden.  

In dem folgenden Beispiel werden unterschiedliche Schriftfarben auf weißem oder farbigem Hintergrund dargestellt. Dabei ist zu betonen, dass Kontrast nicht nur die Schriftfarbe zum Hintergrund betrifft, sondern auch die interaktiven Flächen im Verhältnis zum dahinterliegenden Hintergrund, wie es beispielsweise bei Buttons oder Formularfeldern der Fall ist. 

2. Farben 

Unabhängig von dem notwendigen Kontrast sollte auch die Auswahl der Farben so erfolgen, dass sie beispielsweise Menschen mit Autismus nicht überfordern (bewusstes Einsetzen von sanften Farben). Außerdem sollte bei der Darstellung von wichtigen Informationen (z.B. Fehlmeldungen, Erfolgsmeldungen, Warnungen) darauf geachtet werden, dass die Übermittlung von Informationen nicht ausschließlich durch Farbe, sondern mit Hilfe von Icons, Text oder anderer visueller Aufarbeitung geschieht. 

3. Die Verwendung der richtigen Komponenten 

Oft werden Basiskomponenten nicht nach deren eigentlichen Verwendungszwecken verwendet. Ein gutes Beispiel dafür sind Buttons und Links, die häufig fälschlich benutzt werden: 

Button auf Webseiten ist dafür da, eine Aktion auszulösen. Wie ein richtiger Knopf eben: 

• Ein Formular abschicken 

• In einem Prozess einen Schritt weiter gehen während Daten in der Datenbank gespeichert werden 

• Sich in sein Nutzerkonto einloggen  

Er ist keine „wichtigere“ Variante des Links und sollte nicht als solcher verwendet werden. Buttons werden nur da eingesetzt, wenn sie an der visuellen Gestalt der Webseite etwas ändern (z.B. Inhalte abbilden, der vorher nicht da war) oder eine Aktion auslösen.

Links navigieren. Der klassische Hyperlink im Web war knallig blau und unterstrichen. Der Mauszeiger ändert sich beim Mouseover. Es bestellt keine Waschmaschine und ändert auch nichts am Interface (außer, dass es auf eine andere URL navigiert). Links sollten demnach nicht wie Buttons aussehen, oder wie es häufig heißt „Call to Actions“, also sehr prominent aussehende Links (meist mit einer farbigen Fläche hinterlegt).  

4. Focus Indicators und Keyboard Navigation 

Der Focus Indicator ist besonders hervorzuheben, da er von Designer:innen gerne vergessen wird. Dabei handelt es sich um eine visuelle Darstellung der interaktiven Elemente (Links, Buttons, Formularfelder, …), wenn diese per Sprach- oder Keyboardeingabe angesteuert werden. Übrigens wird gerade die Keyboardsteuerung gerade im Business-Kontext sehr häufig verwendet, da man sich Shortcuts speichern kann, sich per Tab schneller durch Formulare arbeiten kann.  

Versuch doch einmal auf deiner bestehenden Seite per Keyboard Tab durch die gesamte Webseite zu navigieren. Weißt du immer, wo du dich gerade befindest? Welches Element ist gerade ausgewählt? Typischerweise wird dies durch eine (farbige) Outline/Border gestaltet, die sich um das interaktive Element legt. 

 5. Animationen 

Animationen können für eine große Anzahl von Menschen schlichtweg überfordernd sein. Automatisch abspielende Videos, Slider die ohne manuelles Zutun zum nächsten Bild animieren; Hover-Effekte auf Buttons oder Links bei denen „viel passiert“; sogenannte Mega-Menus, die sich von oben aufklappen und viele einzelne Elemente unterschiedlich animiert sind; Informationen, die sich in einer Karte hinter einer Fläche „verstecken“ und nur per Hover sichtbar werden … Es gibt unendlich viele Möglichkeiten. Dennoch sollte man sich stets vor Augen führen: Eine Webseite muss auch ohne Animationen funktionieren, um eine möglichst große Nutzergruppe abholen zu können.  

 6. Ein Problem = viele Möglichkeiten 😉 

Es ist sehr arrogant zu denken, dass man als UX Architect oder Designer immer den besten Weg kennt eine bestimmte Aufgabe zu lösen.   

Fragt man 10 Menschen, wie die ideale Flugsuche auf einer Webseite aussehen soll, stellt man schnell fest, dass es zahlreiche Unterschiede bei Viel-/Wenigfliegern, Alleinreisenden und Familien gibt. Daher kann beispielsweise eine Flugsuche – je nach Kontext – unterschiedliche Funktionen besitzen. 

Anderes Beispiel: Zur Verdeutlichung der COVID19-Lage in Deutschland wurde 2020 eine Webseite entwickelt, die sehr viele Graphen, Tabellen und vor allem viele Zahlen beinhaltete. Es gab allerdings auch eine alternative Darstellung, dass beispielsweise zahlen lastige Tabellen auch als Text dargestellt werden konnten, was beispielsweise Menschen mit Dyscalculia die Aufnahme und Verarbeitung der gegebenen Informationen enorm erleichterte. 

1. It’s all about the process. 

Ohne einen strukturierten Designprozess keine Barrierefreiheit. Wie schon eben genannt können konsistente Designentscheidungen nur dann entstehen, wenn gewisse Prozesse für das Designteam vorhanden sind.  

• Wer stellt die Einhaltung der Accessibility Richtlinien sicher? 

• Wann und in welcher Form kann Feedback gegeben werden? 

• Welche Standards müssen/wollen wir für unser Produkt einhalten? 

• Wie und wo werden Designentscheidungen und Richtlinien festgehalten? 

• Wie entsteht interdisziplinärer Austausch und kontinuierliche Zusammenarbeit zwischen den Gewerken? 

 2. Ein gutes Design Team ist divers. 

Es besteht aus Menschen mit unterschiedlichsten (kulturellen) Hintergründen, diversen Fähigkeiten und Erfahrungsleveln, um möglichst viele Perspektiven gleich in den Designprozess mit einfließen zu lassen. 

 3. Accessibility Testings sind essenziell. 

UI Testings sind auf der einen Seite natürlich gut und wichtig, allerdings sollten auch Accessibility Testing Sessions mit Menschen durchgeführt werden, die in der Lage sind, in ihrer gewohnten Umgebung und mit gewohnten Mitteln zu testen. Beispielsweise sollten Screen Reader-Tests mit Menschen durchgeführt werden, die täglich auf diese Technologie angewiesen sind. Sammelt Feedback und iteriert eure Designs und Konzepte immer wieder, um sicherzustellen, dass sie für alle Benutzer optimiert sind. 

 4. Schulungen und Ressourcen bilden kontinuierlich weiter. 

Essenziell für gute Arbeit in diesem Bereich sind Weiterbildungen in allen Gewerken des Projekts. Diese können intern von Experten geleitet werden, oder über externe Dienstleister geschehen, wie beispielsweise: 

• https://www.a11y-collective.com/courses-overview/ 

• https://www.deque.com/ 
  

Barrierefreiheit und Inklusion resultieren in einer stringenten User Experience, die Vorteile für alle Nutzer bietet, egal ob Generation X, Y, Z oder Alpha. Egal ob männlich, weiblich oder alles dazwischen und außerhalb. Unabhängig von kognitiven, motorischen und sensorischen Fähigkeiten. Barrierefreiheit sollte integraler Bestandteil unserer Arbeit sein. Denn wenn wir schon nicht die Welt retten, können wir sie zumindest etwas einfacher und besser machen.