Accessibility im Web: Was ist Barrierefreiheit und warum ist sie für UX Designer und Developer so wichtig?

von Patrick Söllner und Marina Hoyer Tzaneti

Barrierefreiheit im Web ist mehr als nur ein Schlagwort: Accessibility für Websites spielt im UX Design und Development eine zentrale Rolle. Höchste Zeit also, das Thema Web-Barrierefreiheit genauer unter die Lupe zu nehmen. Was ist Accessibility? Warum ist Accessibility wichtig? Was ist ein WCAG Test? Was müssen UX Designer und Developer über Accessibility im Web wissen? Diese und mehr Fragen beantwortet euch unser Experte Patrick Söllner in unserem heutigen Blogpost.

‍

1. Was ist Accessibility?

Unter Accessibility versteht man, dass Menschen mit Beeinträchtigungen auf Informationen, Produkte und Dienstleistungen zugreifen können. Dazu gehören etwa Personen mit Seh-, Hör-, kognitiven oder motorischen Einschränkungen.

Accessibility wird auch als Barrierefreiheit oder Zugänglichkeit bezeichnet.

Im Alltag wird Barrierefreiheit zum Beispiel durch Rollstuhlrampen, Blindenschrift (Braille), Gebärdensprache oder Untertitel ermöglicht. Diese Hilfsmittel erlauben es Menschen mit Beeinträchtigungen, sich in der physischen Welt zurechtzufinden und effektiv zu kommunizieren.

‍

2. Accessibility Web: Was ist Accessibility auf einer Website?

Für die Web-Accessibility werden Webseiten und Anwendungen so gestaltet, dass sie von allen Menschen unabhängig ihrer Fähigkeiten genutzt werden können. Dies erfordert das Einhalten von Standards und Richtlinien wie den Web Content Accessibility Guidelines – auch bekannt als WCAG.

Die WCAG sind in drei Stufen unterteilt:

• WCAG Stufe A: Die einfachsten Regeln und Richtlinien, die befolgt werden sollten, um eine grundlegende Barrierefreiheit einer Website zu gewährleisten.
• WCAG Stufe AA: Die meisten Regeln und Richtlinien, die befolgt werden sollten, um eine gute Barrierefreiheit einer Website zu gewährleisten.
• WCAG Stufe AAA: Die anspruchsvollsten Regeln und Richtlinien, die befolgt werden sollten, um eine ausgezeichnete Barrierefreiheit einer Website zu gewährleisten.

Jemand, der sehbehindert ist, benötigt möglicherweise Screenreader oder Alternativtexte (Bildbeschreibung). Eine Person mit motorischen Beeinträchtigungen braucht dagegen beispielsweise eine Tastaturnavigation.

Mein Tipp: Wer auf der sicheren Seite sein will, kann einen WCAG Test durchführen lassen. Der BIK WCAG Test ist ein Verfahren, das die Barrierefreiheit einer Website auf Basis der WCAG 2.1 Richtlinien prüft.

‍

3. Warum ist Accessibility wichtig?

Barrierefreiheit online ist von großer Bedeutung, um Inklusion zu fördern und gleichen Zugang zu Informationen zu gewährleisten. Es gibt zahlreiche Gründe, die für Accessibility im Web sprechen.

Accessibility: Statistiken & Zahlen

Etwa 7,8 Millionen Menschen in Deutschland sind laut des Statistischen Bundesamtes schwerbehindert. Das bedeutet, dass mindestens 9,4% der deutschen Bevölkerung möglicherweise keinen Zugang zu einer nicht-barrierefreien Website haben.

Ein Beispiel: In Deutschland benötigen 335.000 sehbehinderte Menschen Screenreader oder Alternativtexte. 319.000 Personen sind hörgeschädigt und auf Untertitel oder Transkripte angewiesen.

Meine Meinung: Es ist wichtig zu beachten, dass diese Statistiken nur Menschen mit einem Schwerbehindertenausweis beinhalten. Die tatsächlichen Zahlen sind wahrscheinlich viel höher.

‍

Business Case: Barrierefreiheit & UX Design

Barrierefreies Design kann die Nutzererfahrung verbessern, die Kundenzufriedenheit steigern und das Markenimage stärken. Es ermöglicht zudem den Zugang zu einer breiteren Zielgruppe, erhöht den Traffic auf der Website und trägt daher zu höheren Einnahmen bei.

Meine Meinung: Barrierefreiheit sollte bei der Entwicklung eines Produkts nicht nur aus geschäftlichem Interesse beachtet werden, sondern ist für mich vielmehr eine ethische Verpflichtung.

Accessibility Web: Gesetz & Kundenerwartungen

In Deutschland gibt es Gesetze, die Barrierefreiheit im Web vorschreiben. Hierzu gehören das Behindertengleichstellungsgesetz (BGG) und die Europäische Barrierefreiheitsrichtlinie (EAA). Obwohl diese Gesetze derzeit hauptsächlich in öffentlichen Einrichtungen durchgesetzt werden, könnte sich das in Zukunft ändern. Zudem achten Kunden immer mehr auf Barrierefreiheit und können sich durchaus für Unternehmen entscheiden, die die Einhaltung der WCAG Richtlinien priorisieren.

‍

Inklusion

Artikel 3 Absatz 3 des Grundgesetzes besagt: Niemand darf wegen seines Geschlechts, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religiösen oder politischen Anschauungen benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden.

Die Gewährleistung des Zugangs zu Informationen für alle ist also nicht nur eine Frage der Praktikabilität oder Einhaltung von WCAG-Vorschriften, sondern auch eine moralische Verpflichtung. Inklusion fördert Empathie, Vielfalt und soziale Gerechtigkeit.

“For many, technology built with accessibility in mind makes things easier. For people with disabilities, technology makes things possible.”

‍

4. Accessibility verbessern: Wie können Developer zur Verbesserung von Accessibility beitragen?

Entwickler spielen eine wichtige Rolle bei der Verbesserung der Barrierefreiheit. Es gibt verschiedene Möglichkeiten, wie sie zur Accessibility einer Website beitragen können.

Semantisches HTML

Ein anderes Wort für Semantik ist Bedeutung. Die Verwendung von semantischen HTML Elementen kann Barrierefreiheit und SEO verbessern. Semantische Elemente geben Inhalten Kontext und Bedeutung, was es Screenreadern und anderen Hilfsmitteln erleichtert, die Inhalte zu interpretieren.

Die Verwendung von semantischen Elementen macht das HTML-Dokument auch für andere Entwickler lesbarer. Viele Elemente unterstützen bereits nativ gewisse Funktionen, die ansonsten erst entwickelt werden müssen. Ein paar Beispiele hier sind dialog, details, audio und video.

Mein Tipp: Denke zuerst an semantische Elemente, bevor du eine eigene Komponente erstellst. Du kannst diese Elemente auch an die eigenen Anforderungen anpassen und erweitern.

WAI-ARIA Patterns

Die Web Accessibility Initiative Accessible Rich Internet Applications WAI-ARIA bietet eine Sammlung von Design Patterns, die dazu beitragen können, Barrierefreiheit in Web-Anwendungen zu verbessern. Diese Patterns umfassen Rollen, Zustände und Attribute, die das Verhalten und die Struktur von Komponenten beschreiben. Zwei häufig verwendete Patterns, die dort beschrieben werden, sind Tabs und Carousels.

Mein Tipp: Prüfe vor der Entwicklung einer Komponente die Liste der vorhandenen Patterns und verwende sie als technische Richtlinie. Du findest eine ausführliche Liste auf der WAI-ARIA Seite.

Komponentenbibliotheken

Komponentenbibliotheken bieten vorgefertigte UI-Elemente, die leicht in eine Webanwendung integriert werden können. Oft wird eine Komponentenbibliothek entwickelt, um UI-Elemente zwischen mehreren Plattformen oder Projekten zu teilen – vielleicht sogar als Teil des Design Systems deines Unternehmens. Dies bietet eine großartige Möglichkeit, direkt barrierefreie Komponenten zu entwickeln und damit gute Praktiken zu fördern.

Headless UI ist beispielsweise eine Reihe anpassbarer, barrierefreier Komponenten, die mit mehreren Front-End-Frameworks verwendet werden können. Diese Komponenten erfordern kein bestimmtes Design und bieten nur eine Beispiel-Implementierung. Sie können als barrierefreie Basis für die Entwicklung eigener Komponenten verwendet werden.

Mein Tipp: Arbeite eng mit deinem Design- und Produktteam zusammen. Als Entwickler hast du bereits großen Einfluss. Allerdings müssen einige Schritte im Vorfeld durchgeführt werden, wie z.B. die Analyse von Farbkontrasten, die Überprüfung der Komplexität von Inhalten und vieles mehr.

‍

5. Accessibility Test: Wie kann Testing helfen, Accessibility zu gewährleisten?

Testing ist unerlässlich, um sicherzustellen, dass eine Website oder Anwendung barrierefrei ist. Hier sind einige Möglichkeiten, um Barrierefreiheit zu testen.

Manuelles Testen

Manuelle Tests beinhalten die Überprüfung der Anwendung und das Testen mit Hilfsmitteln wie Screenreadern oder der Navigation über die Tastatur. Eine weitere bewährte Methode ist das Einladen von echten Nutzern, um einen Accessibility-Test durchzuführen.

Zusätzlich gibt es Tools für Entwickler, wie das Accessibility Addon für Storybook, die Google Lighthouse Browser-Erweiterung oder Axe DevTools, um manuell zu testen.

Mein Tipp: Du kannst Storybook als Testplattform sowohl für manuelle als auch für automatisierte Tests verwenden. Dabei hast du die Möglichkeit, Einschränkungen wie verschwommenes Sehen, Farbenblindheit und weitere zu simulieren. Außerdem kannst du Teile dieses Prozesses automatisieren und in den Entwicklungs-Workflow deiner Komponenten integrieren.

Automatisiertes Testen

Automatisiertes Testen bedeutet die Verwendung von Software für einen Accessibility-Test. 

Mit Tools wie Playwright und Testing Library kannst du deine Anwendung mit Queries testen, die darauf ausgelegt sind, das Verhalten von Benutzern anstatt von Maschinen zu imitieren. Ein Beispiel dafür wäre, mit der Tastatur durch ein Formular zu navigieren. Alternativ kannst du auf einen Label-Text klicken, um das Eingabefeld zu fokussieren.

Mein Tipp: Ich empfehle bei automatisierten UI-Tests einen Ansatz mit Fokus auf den Nutzer.

‍

Fazit

Accessibility im Web ist nicht nur eine rechtliche Anforderung, sondern eine moralische Verpflichtung. Barrierefreies UX Design ermöglicht es Menschen mit Beeinträchtigungen, den gleichen Zugang zu Informationen wie jeder andere zu erhalten und fördert damit eine inklusivere und gerechtere Gesellschaft. Durch die Priorisierung der Barrierefreiheit bei der Entwicklung und dem Testen von Anwendungen können wir sicherstellen, dass Millionen mehr Menschen unsere Anwendung nutzen können. Es liegt also an uns allen, den Stellenwert von Barrierefreiheit im Web zu erkennen.