Design vor Code: Barrierefreiheit von Grund auf berücksichtigen

Caitlin Geier

Von Caitlin Geier

10. Mai 2017

Barrierefreiheit von Anfang an

Dies ist ein zweiteiliger Begleitbeitrag, der auf dem Vortrag basiert, den Caitlin auf der CSUN 2017 gehalten hat. Der Vortrag und die Beiträge richten sich in erster Linie an Designer, wobei der Schwerpunkt auf dem User-Experience-Design liegt. In Teil 1 geht es um die Grundsätze der Usability und die Rolle des Designers im Team.

Wenn Sie bereits Erfahrungen mit digitaler Barrierefreiheit gesammelt haben, wissen Sie, dass es nicht so einfach ist, wie es aussieht. In vielen Ländern wird die Umsetzung der Vorgabe, eine Website oder App barrierefrei zu gestalten, durch festgelegte Richtlinien vereinfacht. Doch ganz gleich, ob Sie sich an die „Web Content Accessibility Guidelines“ (WCAG) oder andere Vorgaben halten – die Richtlinien können kompliziert sein und zahlreiche Grauzonen enthalten, die sich mit dem technologischen Fortschritt ändern.

WCAG ist der am weitesten verbreitete Leitfaden, daher werde ich ihn in diesem Blogbeitrag als Beispiel heranziehen. WCAG umfasst eine Reihe von Anforderungen, die sich auf visuelles Design, Informationsarchitektur, Inhalte und Code beziehen. Viele (wenn auch nicht alle!) dieser Anforderungen fallen eindeutig in den Zuständigkeitsbereich des Designers. Schon ein Teil der WCAG-Anforderungen ist eine Menge Lernstoff. Ich arbeite seit fast zwei Jahren als Designer bei Deque und betrachte mich keineswegs als Experten.

Meine Zeit bei „ Deque “ hat mir viel Gelegenheit gegeben, darüber nachzudenken, was es wirklich bedeutet, barrierefreies Design zu erlernen und anzuwenden. Zu diesem Zweck habe ich fünf Schlüsselbereiche herausgearbeitet, auf die man sich zu Beginn beschäftigen sollte, um eine solide Grundlage für die Integration von Barrierefreiheit in die eigene Designpraxis zu schaffen.

Schlüssel Nr. 1: Die Prinzipien der Benutzerfreundlichkeit verstehen

Wenn Sie im Designbereich tätig sind, haben Sie sich wahrscheinlich schon zumindest ein wenig mit den Grundprinzipien des User-Experience-Designs und der Usability beschäftigt. Das Ziel des User-Experience-Designs besteht darin, ein System so zu gestalten, dass es sowohl den Anforderungen der Zielgruppe an das System entspricht (Funktionalität) als auch für diese einfach und lohnenswert zu bedienen ist (Usability). Um bei der Gestaltung den Fokus auf Usability zu legen, muss man zumindest die Grundlagen dafür verstehen, was etwas benutzerfreundlich macht.

Ebenso dreht sich ein Großteil der Barrierefreiheit darum, sicherzustellen, dass Websites, Apps, Produkte und physische Räume für Menschen mit Behinderungen nutzbar sind. Ein beträchtlicher Teil der WCAG befasst sich ausschließlich mit der Nutzbarkeit digitaler Inhalte für Nutzer mit Behinderungen – es soll sichergestellt werden, dass Informationen verständlich sind, dass sie eine Bedeutung vermitteln und dass die Art und Weise, wie assistive Technologien (wie beispielsweise ein Screenreader) auf die Informationen zugreifen, für den Nutzer sinnvoll ist.

Es ist ein weit verbreiteter Irrglaube, dass eine barrierefreie Website nicht benutzerfreundlich sein kann und umgekehrt. Ich würde argumentieren, dass Barrierefreiheit ein Teilbereich der Benutzerfreundlichkeit ist – das Ziel der Barrierefreiheit ist es ja, Websites, Gebäude, Geräte usw. für Menschen mit Behinderungen nutzbar zu machen. Wenn Ihre Website beispielsweise die WCAG-Richtlinien genau befolgen würde, ein Nutzer mit einem Screenreader die Seite jedoch als schwer bedienbar empfände, würde ich Ihre Website nicht als wirklich barrierefrei betrachten.

Wenn in diesem Fall ein Nutzer eines Screenreaders zwar auf die Website zugreifen könnte, deren Nutzung ihm jedoch sehr schwerfällt, ist die Website wahrscheinlich für niemanden wirklich benutzerfreundlich. Es ist zudem sehr wahrscheinlich, dass die WCAG nicht wirklich im Sinne ihrer Grundprinzipien befolgt wurden, da ein Großteil der WCAG speziell auf die Benutzerfreundlichkeit ausgerichtet ist. Eine Herangehensweise an die Gestaltung der Website, bei der der Nutzer im Mittelpunkt steht – indem sichergestellt wird, dass die Navigation sinnvoll ist, nützliche Hilfetexte und Fehlermeldungen enthalten sind, die Reihenfolge der Inhalte logisch angeordnet ist usw. – kann wesentlich dazu beitragen, dass eine Website wirklich barrierefrei wird.

Zu verstehen, was eine Website benutzerfreundlich macht, ist ein wichtiger erster Schritt, um die Barrierefreiheit der Website zu gewährleisten. Jakob Nielsens 10 Heuristiken, die als allgemein anerkannter Standard zur Beurteilung der Benutzerfreundlichkeit einer Website gelten, decken sich tatsächlich weitgehend mit den WCAG. Wenn Sie sich die Zeit nehmen, die Prinzipien der Benutzerfreundlichkeit zu verstehen und anzuwenden, haben Sie bereits einen großen Teil der Barrierefreiheit abgedeckt.

Schlüssel Nr. 2: Die Nutzer verstehen

Ein wesentlicher Aspekt bei der Gestaltung einer benutzerfreundlichen Website ist es, zu verstehen, wie Menschen Websites nutzen – und insbesondere, welche Zielgruppen Ihre Website besuchen. Ebenso ist es für die Barrierefreiheit einer Website entscheidend zu verstehen, welche Arten von Behinderungen bei Menschen auftreten können und wie Menschen mit Behinderungen auf Websites zugreifen und Inhalte betrachten. Nutzer mit Behinderungen verwenden häufig assistive Technologien wie Bildschirmleseprogramme und erweiterte Tastaturen, um das Internet zu nutzen.

Es ist wichtig zu beachten, dass zu jedem beliebigen Zeitpunkt 15 bis 20 % der Weltbevölkerung entweder eine vorübergehende oder eine dauerhafte Behinderung haben. Fast jeder Mensch auf diesem Planeten wird irgendwann in seinem Leben eine Behinderung haben, sei es etwas Vorübergehendes wie ein gebrochener Arm oder etwas Dauerhaftes wie ein fortgeschrittener Hörverlust im Alter. Behinderungen sind zudem nicht immer offensichtlich – viele Menschen haben unsichtbare Behinderungen, wie Lernbehinderungen (zum Beispiel Legasthenie) oder Erkrankungen, die sie leicht erschöpfen (wie Depressionen oder Mononukleose).

Es gibt viele verschiedene Arten von Behinderungen, genauso wie es viele verschiedene Arten von Menschen gibt. Es dauert lange, bis man die Feinheiten der verschiedenen Behinderungskategorien und -arten versteht. Der beste Einstieg sind praktische Erfahrungen – sprechen Sie mit Ihren Nutzern! Meine Faustregel lautet: Pro fünf Personen, die ich für Nutzerforschungsaktivitäten rekrutiere, sollte eine Person mit einer Behinderung dabei sein. Beziehen Sie beispielsweise bei der Rekrutierung für einen Usability-Test eine ältere Person mit ein, die an Arthritis leidet und sehbehindert ist. Suchen Sie bei Nutzerinterviews einen Screenreader-Nutzer aus und erfahren Sie, welche Probleme dieser bei der Nutzung des Internets hat. Wenn Sie selbst keine Nutzerforschung betreiben, aber einen Kollegen haben, der dies tut, arbeiten Sie mit ihm zusammen, um Nutzer mit Behinderungen in seine Forschung einzubeziehen, und bitten Sie darum, bei den Sitzungen dabei sein zu dürfen.

Das Ziel der Einbeziehung verschiedener Nutzertypen besteht nicht nur darin, zu verstehen, wie andere Menschen die Welt sehen, sondern auch darin, Empathie zu entwickeln. Nutzerforschung ist für alle, die an einer Website oder einer Anwendung arbeiten, von großem Nutzen, da sie allen Beteiligten hilft, die Nutzer der Anwendung besser zu verstehen, und ihnen somit ermöglicht, die Anwendung so zu gestalten und zu entwickeln, dass sie besser auf diese Nutzer zugeschnitten ist. Dies ist bei der Arbeit mit Nutzern mit Behinderungen von doppelter Bedeutung, da viele Softwareentwickler möglicherweise keinerlei Erfahrung im Umgang mit Menschen mit Behinderungen haben.

Es gibt auch einige Übungen, die wenig Aufwand erfordern und dazu beitragen, das Verständnis innerhalb Ihres Teams zu fördern – wenn Sie beispielsweise an einer Website arbeiten, versuchen Sie doch einmal, diese ausschließlich mit der Tastatur zu bedienen, und fordern Sie Ihre Teamkollegen auf, dasselbe zu tun. Bewerten Sie Designs, indem Sie mithilfe eines Tools wie der Chrome-Erweiterung „NoCoffee“ verschiedene Sehbehinderungen simulieren. Wenn Sie mehrere Optionen für ein visuelles Design bewerten, gehen Sie an einem sonnigen Tag nach draußen und prüfen Sie, welche Option trotz der Blendung durch die Sonne am besten zu erkennen ist.

Ein Screenshot von NoCoffee, der die Auswirkungen von „Vision Ghosting“ auf Audible.com simuliert
Ein Screenshot von NoCoffee, der die Auswirkungen von „Vision Ghosting“ auf Audible.com simuliert

Und denken Sie daran: Sie sind nicht Ihr Nutzer. Sie haben weder dieselben Bedürfnisse wie Ihre Nutzer noch dieselben Erfahrungen. Dies gilt insbesondere für viele Nutzer mit Behinderungen, da diese wahrscheinlich Technologien nutzen, die Sie nicht regelmäßig oder gar nicht verwenden.

Schlüssel Nr. 3: Arbeiten Sie mit Ihrem Team zusammen

Im vorigen Abschnitt habe ich darüber gesprochen, wie Sie Ihr Team in das Kennenlernen von Nutzern mit Behinderungen einbeziehen können. Als Designer digitaler Produkte sind Sie wahrscheinlich nicht die einzige Person, die an der Definition, Gestaltung, Programmierung und Auslieferung der Produkte beteiligt ist, an denen Sie arbeiten. Vielleicht arbeiten Sie in einem großen Designteam oder sind als Designer in ein Entwicklungsteam eingebunden. Vielleicht widmen Sie sich einem einzelnen Projekt oder arbeiten gleichzeitig an mehreren Projekten. Unabhängig davon, wie Sie arbeiten, sollten Sie wissen, dass die Verantwortung für die Barrierefreiheit einer Website oder Anwendung nicht allein bei Ihnen liegt.

Es gibt viele Aspekte der Barrierefreiheit, für die Sie als Designer verantwortlich sind. Die von Ihnen gewählten Farben, die Gestaltung des Hauptmenüs, die verwendeten Symbole – all diese gestalterischen Entscheidungen können sich auf die Barrierefreiheit des Endprodukts auswirken. Als Designer gehören Sie wahrscheinlich zu den Ersten, die mit einem Produkt in Berührung kommen. Die Entscheidungen, die Sie treffen, können weitreichende Auswirkungen darauf haben, wie barrierefrei Ihr Produkt bei der Auslieferung ist.

Die obige Grafik verdeutlicht, dass der Aufwand für die Einbeziehung der Barrierefreiheit auf der „linken“ Seite des Designprozesses (wenn das Produkt noch lediglich eine Skizze ist) deutlich geringer ist als der Versuch, die Barrierefreiheit nachträglich in das Produkt zu integrieren, wenn dieses bereits fast fertiggestellt ist.
Frühzeitig einbeziehen! Je konkreter die Details eines Produkts oder einer Funktion werden, desto schwieriger wird es, zurückzugehen und Probleme zu beheben. Die obige Grafik verdeutlicht, dass der Aufwand für die Einbeziehung der Barrierefreiheit auf der „linken“ Seite des Designprozesses (wenn das Produkt noch lediglich eine Skizze ist) deutlich geringer ist als der Versuch, Barrierefreiheit nachträglich in das Produkt zu integrieren, wenn es bereits fast fertiggestellt ist.

All diese Informationen zur Barrierefreiheit mögen im Moment vielleicht überwältigend klingen, und es ist eine große Verantwortung. Aber diese Verantwortung liegt auch bei den Entwicklern, die die Anwendung programmieren, bei den Mitarbeitern der Qualitätssicherung, die die Anwendung testen, und sogar bei den Projektmanagern, die das Produkt von einer Phase zur nächsten begleiten. Auch Personen außerhalb Ihres Teams können an der Gestaltung von Komponenten beteiligt sein, die das Produkt nutzen wird, oder an der Erstellung von Inhalten oder sogar an der Ausarbeitung von Marken- und Stilrichtlinien für das gesamte Unternehmen – auch sie tragen einen Teil der Verantwortung für die Barrierefreiheit und Benutzerfreundlichkeit des Endprodukts.

Das Wichtigste, was Sie als Designer tun können, um die Barrierefreiheit Ihres Produkts zu verbessern, ist, die Absicht Ihrer Entwürfe den anderen Personen zu vermitteln, die an Ihrem Produkt arbeiten. Das kann bedeuten, Ihre Entwürfe mit Barrierefreiheitsmerkmalen zu versehen, wie beispielsweise Alternativtext für Symbole oder die Angabe, welche Überschriftenebenen verwendet werden sollen. Es kann auch bedeuten, regelmäßige Design-Reviews mit den Entwicklern und QA-Testern in Ihrem Team durchzuführen, in denen Sie diese dazu ermutigen, Fragen zu Ihren Entwürfen zu stellen. Selbst wenn Sie selbst ein wenig Frontend-Programmierung betreiben, können Sie nicht vollständig bestimmen, wie etwas umgesetzt wird und ob die Umsetzung Ihres Entwurfs barrierefrei sein wird. Sie können Entwicklern und QA-Testern einige der Werkzeuge an die Hand geben, die sie benötigen, um die Umsetzung Ihrer Entwürfe barrierefrei zu gestalten, indem Sie ihnen vermitteln, wer das Produkt nutzen wird, wie es genutzt wird und welche Anforderungen an die Funktionsweise gestellt werden müssen, damit es barrierefrei ist.

Hier kann die Einbeziehung von Menschen mit Behinderungen in Nutzerforschungsaktivitäten wie Usability-Tests weitreichende Auswirkungen haben. Eine Entwicklerin in Ihrem Team versteht vielleicht nicht, warum eine Barrierefreiheitsfunktion wichtig ist, aber wenn Sie ihr einen Clip zeigen, in dem ein Nutzer mit einer körperlichen Behinderung versucht – und dabei scheitert –, die Funktion zu nutzen, kann ihr das helfen, es zu verstehen. Ein Kollege, der den Styleguide pflegt, könnte sich dagegen sträuben, Farben anzupassen, um sie barrierefreier zu gestalten, aber wenn Sie ihm demonstrieren, wie diese Farben von einer Person mit Farbenblindheit wahrgenommen würden, könnte Ihnen das helfen, ihn zu überzeugen. Zu Ihrer Rolle als Designer gehört es, zu verstehen, was in Bezug auf Barrierefreiheit in Ihren Verantwortungsbereich fällt und was nicht, und Ihre Teamkollegen zu ermutigen, ebenfalls ihren Teil beizutragen.

Wie geht es weiter?

Wenn Sie sich zunächst mit den Grundsätzen der Benutzerfreundlichkeit befassen und in Nutzerforschung investieren, können Sie sich schnell einen guten Überblick über das Thema Barrierefreiheit verschaffen. Es ist außerdem wichtig, sich bewusst zu machen, dass Barrierefreiheit auch in der Verantwortung Ihrer Kollegen liegt. Der nächste Schritt – und das ist ein großer Schritt – besteht darin, zu verstehen, welche Aspekte der Barrierefreiheit in Ihrer Verantwortung als Designer liegen. Seid gespannt auf den zweiten Teil dieses Beitrags, in dem es um spezifischere Designelemente und -muster geht, die im Hinblick auf Barrierefreiheit besondere Aufmerksamkeit erfordern, sowie um Möglichkeiten, Barrierefreiheit mithilfe von Styleguides und Musterbibliotheken zu gewährleisten.

Caitlin Geier

Caitlin Geier

Caitlin Geier ist UX-Designerin bei Deque. Als UX-Designerin hat sich Caitlins Arbeit im Bereich barrierefreies Design besonders intensiv entwickelt, seit sie bei Deque tätig ist. Es ist ihr ein großes Anliegen, die Nutzer, für die sie gestaltet, zu verstehen, und sie ist stets bestrebt, Elemente der Barrierefreiheit in ihre Arbeit zu integrieren, um sicherzustellen, dass alle Nutzer von inklusivem Design profitieren können.

Erhalten Sie Blog-Beiträge direkt in Ihren Posteingang

Kein Geschwafel, sondern echte Erkenntnisse zum Thema Barrierefreiheit von qualifizierten Experten.

Sie erklären sich damit einverstanden, dass Deque Informationen gemäß den Bestimmungen in DequeDatenschutzerklärungbeschrieben, Informationen von Deque entgegennimmt, nutzt und weitergibt. Sie können Ihre Einwilligung jederzeit widerrufen, indem Sie uns kontaktieren.

Mehr zu diesem Thema

Damit Ihr Unternehmen im Zeitalter der agentenbasierten KI erfolgreich sein kann, sollten Sie Barrierefreiheit als grundlegenden Bestandteil Ihrer KI-Strategie betrachten.

Preety Kumar 100 x 150
29. Juli 2026 Von Preety Kumar

Barrierefreiheit muss bereits von der ersten Eingabe an in die Art und Weise integriert werden, wie KI Code schreibt – sie darf nicht erst im Nachhinein behoben werden. Und da die Behindertengemeinschaft seit Jahrzehnten die Mensch-Computer-Interaktion für verschiedene Eingabe- und Ausgabemodalitäten perfektioniert, ist ihr Fachwissen nicht nur moralisch wichtig, sondern auch technisch unverzichtbar für die Entwicklung einer robusten, zuverlässigen KI, die tatsächlich funktioniert.

Artikel lesen
Abbildung im Stil eines Flussdiagramms, die den Barrierefreiheitsbaum und dessen Einfluss auf die menschenzentrierte und die KI-Agenten-zentrierte Barrierefreiheit veranschaulicht.

Warum digitale Barrierefreiheit für HSBC eine strategische Priorität ist

Logo von Deque
28. Juli 2026 Von Deque Systems

Mali Fernando, Leiterin des Bereichs „Digital Experience and Accessibility“ bei HSBC, erläutert die Rolle der digitalen Barrierefreiheit bei der Schaffung besserer Bankerlebnisse, der Stärkung der Kundenbeziehungen und der Förderung des langfristigen Geschäftserfolgs.

Artikel lesen
HSBC-Logo