Eine barrierefreie Website zu erstellen ist eine Haltung – keine Modeerscheinung

Was bedeutet eigentlich Accessibility? Ist Accessibility nur ein Trend? Warum ist sie so wichtig? Was versteht man unter einem WCAG-Test? Und welche Kenntnisse müssen Crafft UX-Designer*innen und Entwickler*innen in Bezug auf Barrierefreiheit im Web sich aneignen?

Accessibility, Barrierefreiheit, Zugänglichkeit

Gemäss Mozilla bedeutet Accessibility, dass Personen mit unterschiedlichen Einschränkungen, wie Seh-, Hör-, geistigen oder motorischen Beeinträchtigungen, ungehinderten Zugang zu Informationen, Produkten und Dienstleistungen haben. Sie stellt sicher, dass alle Nutzer:innen, unabhängig von ihren Fähigkeiten, digitale Inhalte nutzen können. Accessibility wird auch als Barrierefreiheit oder Zugänglichkeit bezeichnet.

Rollstuhlrampen, Blindenschrift (Braille), Gebärdensprache oder Untertitel sind Beispiele, was Barrierefreiheit im Alltag bietet. Hilfsmittel wie diese erlauben es Menschen mit Beeinträchtigungen, sich in der physischen Welt zurechtzufinden und effektiv zu kommunizieren.

Welche Standards gibt es im Web?

Um Web-Accessibility zu gewährleisten, werden Webseiten und Anwendungen so entwickelt, dass sie für alle Menschen, unabhängig von ihren Fähigkeiten, zugänglich sind. Dies setzt die Einhaltung von Standards und Richtlinien wie den Web Content Accessibility Guidelines (WCAG) voraus.

Gemäss des World Wide Web Consortium W3C wird WCAG 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.

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.

Warum ist Online Accessibility wichtig?

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

Mehr Reichweite durch barrierefreie Webentwicklung

Laut dem Bundesamt für Statistik leben in der Schweiz etwa 1,8 Millionen Menschen mit einer oder mehreren Behinderungen. Dazu gehören sowohl körperliche als auch psychische oder geistige Beeinträchtigungen sowie deren Kombinationen. Rund 15 Prozent der Bevölkerung ab 15 Jahren sind in ihren Seh-, Hör-, Geh- oder Sprechfähigkeiten funktionell eingeschränkt. Besonders verbreitet sind Sehbehinderungen: Über zehn Prozent der über 40-Jährigen sind von leichten bis schweren Sehbeeinträchtigungen betroffen.

Implementierung von Accessibility steigert die Benutzererfahrung

Die Integration von Barrierefreiheit in das UX-Design verbessert das gesamte Nutzererlebnis. Indem sie sich auf Klarheit, Einfachheit und intuitive Navigation konzentrieren, können Designer*innen Websites erstellen, die nicht nur zugänglich, sondern auch für alle Nutzer*innen ansprechend sind. Dies erfordert einen Perspektivwechsel, bei dem die Inklusion im Vordergrund steht, ohne dass die Ästhetik darunter leidet.

Stärke dein Markenimage durch Barrierefreiheit

Als Side Effect stärkt eine barrierefreie Website auch ihr Markenimage – wer heute auf Inklusion setzt, wird als sympathisches, faires und modernes Unternehmen wahrgenommen. Durch Anwenden von technischen Anpassungen tragen Sie dazu bei, dass das gesellschaftliche Verantwortungsbewusstsein gefördert wird und sämtliche Kunden deine Marke uneingeschränkt erfahren können. Gleichzeitig erreichst du somit ein breiteres potenzielles Kundenspektrum.

Barrierefreiheit und SEO für eine erfolgreiche Website

Google liebt deine barrierefreie Website. Unsere Informations-Architekten achten auf klare Strukturen und der Inhalt wird präzise beschrieben. Dies führt zu einer höheren Auffindbarkeit deiner Website.

Accessibility verbessern: Wie kann ich als Entwickler zur Verbesserung von Accessibility beitragen?

Im Entwicklerteam von Crafft tauschen wir uns regelmässig darüber aus, was wir verbessern können. Es gibt verschiedene Möglichkeiten und ich versuche, hier nicht zu technisch zu klingen. Zur Accessibility einer Website tragen u.a. bei:

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. Als Digitalagentur setzen wir zudem auf barrierefreie Webentwicklung. Damit in jedem Projekt Accessibility zu tragen kommt, nutzen wir beispielsweise im Frontend Libraries wie react-aria, welches von Adobe erstellt wurde und auf semantischem HTML aufbaut.

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, Modal, Navigationsmenüs oder Audio und Video.

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.

Barrierefreie 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 grossartige Möglichkeit, direkt barrierefreie Komponenten zu entwickeln und damit gute Praktiken zu fördern.

React-Aria ist beispielsweise eine Reihe anpassbarer, barrierefreier Komponenten, die mit mehreren Frontend-Frameworks verwendet werden können. Diese Komponenten können nach deinen Design-Wünschen angepasst werden. Dennoch musst du damit keine Kompromisse in Bezug auf Accessibility eingehen, da wir im Hintergrund den Code so optimieren, dass das Benutzererlebnis für alle gewährleistet ist.

Barrierefreiheit vom Anfang im Webdesign integrieren

Wir arbeiten eng mit unseren Design- und Produktexperten zusammen. Als Entwickler kann ich da bereits in der Startphase Einfluss nehmen und frühzeitig auf Themen wie die Analyse von Farbkontrasten, die Überprüfung der Komplexität von Inhalten und vieles mehr hinweisen.

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 und Tools, 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 ausgewählten 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. Wir verwenden react-aria, um sicherzugehen, dass sämtliche Komponenten barrierefrei funktionieren. Zusätzlich nutzen wir die Möglichkeit, Einschränkungen wie verschwommenes Sehen, Farbenblindheit und weitere Möglichkeiten zu simulieren. Ausserdem automatisieren und integrieren wir Teile des Prozesses in den Entwicklungs-Workflow unserer Komponenten .

Automatisiertes testen der Accessibility

Automatisiertes Testen bedeutet die Verwendung von Software für einen Accessibility-Test. Mit Tools wie Playwright und Testing Library testen wir die Anwendung mit Queries, die darauf ausgelegt sind, das Verhalten von Benutzern anstatt von Maschinen zu imitieren. Ein Beispiel dafür ist, mit der Tastatur durch ein Formular zu navigieren.

Fazit: Accessibility im Web

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. Ausserdem förderst du damit eine inklusivere und gerechtere Gesellschaft, welche den Websei­ten­zu­griff für alle ermöglicht. 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 und diese gemäss den besten Praktiken umzusetzen.