HelloDesign®
Mosbacher Straße 9, 65187 Wiesbaden
info@hellodesign.de+49 151 420 18517

Digitale Barrierefreiheit im User Experience Design: Apps und Websites inklusiver gestalten.

Durch Barrierefreiheit im UX-Design können Menschen mit Behinderungen auf digitale Produkte und Dienstleistungen zugreifen und mit ihnen interagieren – unabhängig von ihren Fähigkeiten oder Einschränkungen.

Frau vor rosanem Hintergrund, Accessibility Icons sind kreisförmig um ihren Kopf herum angeordnet
Durch Barrierefreiheit im UX-Design können Menschen mit Behinderungen auf digitale Produkte und Dienstleistungen zugreifen und mit ihnen interagieren – unabhängig von ihren Fähigkeiten oder Einschränkungen. 

Accessibility oder auf deutsch Barrierefreiheit im analogen Raum, z.B. durch Rampen und Aufzüge für Menschen mit Rollstuhl, kennt jeder, doch was ist mit digitaler Barrierefreiheit gemeint? Es geht grundsätzlich darum, die digitale Welt so zu gestalten, dass sie für möglichst viele Nutzer:innen zugänglich ist. Digitale Produkte sollten keine Hürden aufweisen, die ihre Nutzung einschränken könnten - sowohl von Usern mit als auch ohne Behinderung.

Verständnis von Barrierefreiheit im UX-Design

Barrierefreiheit im User Experience Design bezieht sich auf die Praxis, digitale Benutzeroberflächen und Interaktionen so zu gestalten, dass sie von allen Menschen genutzt werden können, unabhängig von ihren Fähigkeiten oder Beeinträchtigungen. Dies umfasst verschiedene Aspekte wie Sehbehinderungen, Hörbeeinträchtigungen, motorische Einschränkungen, kognitive Beeinträchtigungen und mehr. Durch Priorisierung der Barrierefreiheit geben UX-Designer:innen Menschen die Möglichkeit, sich aktiv einzubringen, zu navigieren und Aufgaben effektiv und vor allem autonom zu erledigen.

Die Vorteile einer barrierefreien User Experience

Inklusion: Barrierefreies Design ermöglicht es Menschen mit Behinderungen, vollständig an digitalen Erlebnissen teilzunehmen. Gleichzeitig werden Hindernisse für Informationsvermittlung und Interaktion minimiert. Personen mit Behinderung wird außerdem die autonome Nutzung digitaler Produkte erleichtert.

Verbesserte Benutzbarkeit: Eine barrierefreie UX kommt allen Benutzer:innen zugute, indem sie die allgemeine Nutzerfreundlichkeit verbessert, Benutzeroberflächen intuitiver, reduzierter und leichter navigierbar macht.

Erschließung neuer Zielgruppen: Eine barrierefreie UX ermöglicht es, mehr Menschen auf das digitale Produkt z.B. eine Website zuzugreifen. So werden unmittelbar potentielle Zielgruppen erschlossen und der Radius zukünftiger Kunden des Unternehmens erweitert.

Rechtliche und ethische Konformität: Viele Länder haben gesetzliche Anforderungen an digitale Barrierefreiheit. Die Einhaltung dieser Standards zeigt außerdem ein Engagement für ethische Designpraktiken. So sind in Deutschland z.B. die wichtigsten Grundsätze für ein barrierefreies Webdesign im Behindertengleichstellungsgesetz festgehalten. Dies wird durch das BITV 2.0 ergänzt, die Verordnung zur Schaffung barrierfreierer Informationstechnik.

Schlüsselprinzipien des barrierefreien UX-Designs

Es lassen sich drei Schlüsselprinzipien für ein barrierefreies UX-Design definieren, die bei der Gestaltung von digitalen Produkten beachtet werden sollten.

Wahrnehmbarkeit: Es muss sichergestellt werden, dass alle User den Inhalt wahrnehmen können. Zum Beispiel indem Alternativen für nicht textbasierte Elemente wie Bilder oder Videos angeboten und klare und konsistente visuelle Hinweise verwendet werden.

Bedienbarkeit: Die digitalen Benutzeroberflächen müssen für User mit unterschiedlichen Fähigkeiten bedienbar sein. Zum Beispiel indem Optionen für die Tastaturnavigation angeboten werden, die Abhängigkeit von zeitlich begrenzten Interaktionen minimiert wird und Designelemente vermieden werden, die Krampfanfälle oder andere körperliche Reaktionen auslösen können.

Verständlichkeit: Durch die Verwendung von prägnanten und beschreibenden Inhalten oder informativer Fehlermeldungen können Informationen auf logische und konsistente Weise vermittelt werden. Auch Personen mit einem niedrigeren Bildungsniveau, geringerer Sprachbeherrschung oder geistigen Behinderungen sollten die Inhalte verstehen.

Wenn du dich für eine Analyse hinsichtlich der Barrierefreiheit deiner Software interessiert kannst du dir unsere UX-Analyse ansehen.

Best Practices für barrierefreies UX/UI-Design

Wie kann eine Anwendung der genannten Prinzipien konkret aussehen? Ein besonders anschauliches Beispiel hierfür bietet Apple mit den integrierten Accessibility Features. Den Usern werden zahlreiche Optionen geboten, das eigene Apple Produkt auf die jeweiligen Bedürfnisse anzupassen. Es können Einstellungen entsprechend dem Hör- und Sehvermögens, Mobilität und kognitiven Belastbarkeit der User vorgenommen werden. 

Ansicht der Apple Accessibility Features für das Sehvermögen.

Apple bietet den Usern zahlreiche Möglichkeiten, das Produkt auf ihr persönliches Sehvermögen anzupassen, z.B. durch Einstellungen der Textgrößen oder die Verwendung einer Lupen oder Zoom Funktion.

Ansicht der Apple Accessibility Features für Mobilität.

Menschen mit eingeschränkter Mobilität bietet Apple unter anderem die Möglichkeit, per Eye Tracking Funktion auf ihrem Ipad zu navigieren.

Als UX-Designer können wir bei der Gestaltung von digitalen Produkten enorm viel Einfluss nehmen, neben der Auswahl entsprechender Farben und Schriften kann auch über die Einbindung von Transkriptionen und alternativer Texte aktiv die Barrierefreiheit beeinflusst werden. Auch die regelmäßige Durchführung von User Testings ist ein wichtiges Werkzeug, um die Accessibility digitaler Produkte zu verbessern. Daneben gibt es zahlreiche kostenlose und zahlungspflichtige Tools um die Barrierefreiheit einer Website zu testen, wie z.B. das kostenfreie Tool Lighthouse, das in den Chrome Developer Tools integriert ist.

Kontrast und Farbe: Das beinhaltet unter anderem die Verwendung eines ausreichenden Farbkontrasts, um Personen mit Sehbehinderungen gerecht zu werden. Oder den Verzicht darauf, wichtige Informationen ausschließlich durch Farbe zu vermitteln.

Beispiel: Website Integrationsfachdienst Köln

Die Website Integrationsfachdienst Köln in der Standard Kontrasteinstellung.
Die Website Integrationsfachdienst Köln in einer angepassten gelb-schwarzen Kontrasteinstellung.

Die Website des Integrationsfachdienst Köln bietet den Usern die Möglichkeit, die Kontrasteinstellungen der gesamten Website anzupassen. Die vier verschiedenen Optionen erhöhen durch die starken Kontraste so die Lebarkeit der Website enorm.

Typografie: Durch die Auswahl lesbarer Schriftarten und -größen, wird es Nutzer:innen mit Sehbehinderungen oder z.B. Legasthenie ermöglicht den Inhalt eines digitalen Produktes bequem zu lesen und zu verstehen.

Beispiel: Website Integrationsfachdienst Köln

Die Website Integrationsfachdienst Köln zeigt eine integrierte Funktion zur Einstellung der Schriftgröße.

User haben die Möglichkeit die Schriftgröße der Website durch eine simple Einstellung im Menü anzupassen.

Tastaturzugänglichkeit: Indem alle Funktionen einer digitalen Anwendung über die Tastatur zugänglich sind, können auch User mit motorischen Behinderungen ohne Maus navigieren.

Untertitel und Transkriptionen: Über die Bereitstellung von Untertiteln für Videos und Transkripte für Audioinhalte, wird Nutzer:innen mit Hörbehinderungen entgegen gekommen.

Beispiel: Website Integrationsfachdienst Köln

Die Website Integrationsfachdienst Köln zeigt eine integrierte Funktion zum Vorlesen lassen von Texten.

Die Website des Integrationsfachdienst Köln bietet den Usern die Möglichkeit sich die Inhalte der Seite vorlesen zu lassen.

Alternativer Text: Durch das Einfügen beschreibender Alternativtexte für Bilder, können Bildschirmlesegeräte den visuellen Inhalt für Benutzer:innen mit Sehbehinderungen vermitteln.

Usertesting: Mit dem Durchführen regelmäßiger Zugänglichkeitstests, kann User-Feedback gesammelt und die entsprechenden Funktionen kontinuierlich verbessert werden.

Fazit

Barrierefreiheit im UX-Design ist ein Designansatz, der digitale Erlebnisse in integrative und vor allem befähigende Erlebnisse verwandelt. Durch die Berücksichtigung von Zugänglichkeitsprinzipien und Best Practices können UX-Designer:innen sicherstellen, dass ihre Produkte und Dienstleistungen für jeden zugänglich sind, unabhängig von Fähigkeiten oder Behinderungen einer Person. 

Digitale Barrierefreiheit im User Experience Design: Apps und Websites inklusiver gestalten.
Julia Reinemann
June 5, 2023