Die Texte in diesem Artikel wurden teilweise mit Hilfe künstlicher Intelligenz erarbeitet und von uns korrigiert und überarbeitet. Für die Generierung wurden folgende Dienste verwendet:
Wie wir maschinelles Lernen bei der Erstellung unserer Artikel einsetzenDer Bericht von 2024 The WebAIM Million beleuchtet die jüngsten Fortschritte und Rückschläge bei der Barrierefreiheit im Internet (a18y). Die Publikation hat uns dazu inspiriert, einige unserer Erfahrungen mit der Barrierefreiheit im Web zu teilen.
Angesichts der wachsenden Bedeutung der Barrierefreiheit bei der Gestaltung und Entwicklung moderner Frontends geben wir einen Überblick über die aktuelle Situation, Ressourcen, Werkzeuge und Beispiele für barrierefreie Websites, um die Entwicklung eines integrativen Internets voranzutreiben.
WebAIM berichtet: In den letzten 5 Jahren sind die Seiten mit feststellbaren WCAG-Fehlern nur um 1,9 % von 97,8 %1 zurückgegangen. Der Bericht geht auf die Details der aktuellen Situation ein und liefert positive Beispiele, die wir in diesem Artikel hervorheben werden.
Möchtest du mehr über barrierefreies Design erfahren? Lese unseren Artikel über die Entwicklung von Design-Systemen unter Berücksichtigung der Barrierefreiheit
Bevor wir uns mit der Verbesserung dieser Zahlen befassen, sollten wir uns das Wesen der Barrierefreiheit im Web noch einmal vergegenwärtigen. Die Zugänglichkeit, wie sie in den Web Content Accessibility Guidelines (WCAG) definiert ist, lässt sich in vier übergreifende Prinzipien unterteilen.
MDN bietet eine umfassende Einführung in die Barrierefreiheit zu diesen Themen und definiert in seinem Leitfaden Understanding the Web Content Accessibility Guidelines diese vier Prinzipien wie folgt:
- Perceivable: Die Nutzer:innen müssen in der Lage sein, es in irgendeiner Weise mit einem oder mehreren ihrer Sinne wahrzunehmen.
- Operable: Die Nutzer:innen müssen in der Lage sein, die Elemente der Benutzeroberfläche zu steuern (z. B. müssen Schaltflächen auf irgendeine Weise anklickbar sein - Maus, Tastatur, Sprachbefehl usw.)
- Understandable: Der Inhalt muss für die Nutzer:innen verständlich sein.
- Robust: Der Inhalt muss unter Verwendung von gut angenommenen Webstandards entwickelt werden, die jetzt und in Zukunft in verschiedenen Browsern funktionieren.
Die Notwendigkeit der Barrierefreiheit
Während die Barrierefreiheit langsam auf den Markt drängt, wird sie bei der Entwicklung vielleicht immer noch als nachrangig angesehen. Bedenken wie die Komplexität der Aufgabe, die erforderlichen Ressourcen und die Rentabilität einer umfassenden Implementierung könnten in den Sinn kommen.
Das W3C stellt insbesondere für den geschäftlichen Bereich Ressourcen zur Verfügung, die bei der Umstellung auf Barrierefreiheit bzw. bei der Einführung von Barrierefreiheit in Organisationen und/oder Produkten helfen.
Gleicher Zugang und Inklusion
In erster Linie ist die Barrierefreiheit des Internets jedoch zum Nutzen aller und eine gemeinsame Grundlage für gleichen Zugang und Integration. Das Internet und seine Inhalte sollten für jeden zugänglich und nutzbar sein, unabhängig von einer Behinderung.
Einzelpersonen, kleine Unternehmen und Konzerne sind bereits dabei, auf Prinzipien der Barrierefreiheit basierende Werte zu integrieren, um Websites zu erstellen, die für alle gleichermaßen zugänglich sind.
Bemerkenswerte Design- und Entwicklungsressourcen, die auf diesen Grundsätzen basieren, werden von führenden Organisationen veröffentlicht, darunter IBM, Nordhealth und Atlassian, um nur einige zu nennen.
Wirtschaftlicher Aspekt
Um frühere Annahmen über die Implementierung von Barrierefreiheitsfunktionen in ein Produkt unter wirtschaftlichen Gesichtspunkten in Frage zu stellen, empfiehlt es sich, die folgenden vier Punkte zu berücksichtigen, wenn man eine solche Aufgabe in Angriff nimmt. Diese Erkenntnisse werden die Entwicklung und die Rentabilität des betreffenden Produkts fördern.
- Innovation vorantreiben
- Die Lösung aktueller Probleme mit der Barrierefreiheit führt zu einem besseren Gesamterlebnis für die Nutzer:innen.
- Vielfältige Nutzer:innen und ihre Erfahrungen führen zu besseren Nutzungs- und Analysedaten.
- Steigere die Marke
- Fördere soziale Verantwortung durch praktizierte Barrierefreiheit.
- Diversifiziere die Belegschaft durch den Einsatz barrierefreier Technologie.
- Steigere die Marktreichweite
- Minimierung des rechtlichen Risikos
Diese Ausführungen sind eine verkürzte Zusammenfassung des aufschlussreichen Artikels des W3C [The Business Case for Digital Accessibility] (https://www.w3.org/WAI/business-case/), doch das folgende Zitat von Paul Smyth fasst den wirtschaftlichen Aspekt der Einführung barrierefreier Muster am besten zusammen:
Viele Organisationen werden sich der Tatsache bewusst, dass die Einführung von Barrierefreiheit zu zahlreichen Vorteilen führt - Verringerung rechtlicher Risiken, Stärkung der Markenpräsenz, Verbesserung der Kundenerfahrung und der Produktivität der Mitarbeiter.
Paul Smyth, Head of Digital Accessibility, Barclays, via W3C (Übersetzt)
Verbesserung der Benutzererfahrung
Wie bereits erwähnt, die Lösung aktueller Probleme mit der Barrierefreiheit führt zu einem besseren Gesamterlebnis für die Nutzer:innen. Sowohl Nutzer:innen als auch Power-User werden von den progressiven Verbesserungen profitieren, die insgesamt die Wahrnehmung der Website verbessern werden.
Beliebte primitive Komponentenbibliotheken wie Radix UI sorgen für ein verbessertes Benutzererlebnis, indem sie auf Barrierefreiheitsstandards aufbauen und als Baustein für die eigene Implementierung von Komponenten dienen.
Die Bereitstellung einer Grundlage von Richtlinien, wie Primitiven oder Komponenten, und deren korrekte Implementierung durch Dokumentation legt den Grundstein für die allmähliche, aber stetige Erweiterung der Barrierefreiheitsstandards innerhalb einer Website.
Beispiele für die Umsetzung von Barrierefreiheit
shadcn/ui
Wir haben bereits Radix UI erwähnt, und du bist vielleicht schon mit einer besonders populären Implementierung davon vertraut: shadcn/ui. Diese Komponentenreferenz bietet Komponenten, die aus Radix-Primitiven aufgebaut sind und die du kopieren und in deinen Code einfügen kannst.
Zusammen mit Next.js hat sie einen großen Einfluss auf die Entwicklung von Benutzeroberflächen und wird oft in der freien Wildbahn eingesetzt. Insbesondere Next.js hat, wenn man auf den WebAIM Million Report zurückblickt, eine führende Position bei den gemessenen positiven Unterschieden im Durchschnitt der Barrierefreiheitsfehler eingenommen1.
Next.js wies eine Differenz von -27,1 % gegenüber der durchschnittlichen Fehlerzahl von 41,4 sowohl bei JavaScript als auch bei Web-Frameworks im Vergleich zum Vorjahr auf1.
U.S. Web Design System
Das U.S. Web Design System (USWDS) ist ein offizielles Projekt zur Vereinheitlichung und Bereitstellung von Barrierefreiheit und Designmustern für Websites des Staates durch ein standardisiertes Designsystem.
In einem kürzlich erschienenen Artikel gab die MIT Technology Review eine kurze Einführung in die Motivation, die Geschichte und den Umfang des Projekts, aus dem auch die zugehörige Open-Source-Schrift für das Projekt hervorging: Public Sans.
Die Dokumentation der USWDS ist umfassend und bietet eine Fülle von Informationen über die Implementierung von barrierefreien Mustern. Sie ist eine wertvolle Ressource für alle, die an der Entwicklung ganzheitlicher Praktiken interessiert sind, die die Barrierefreiheit einschließen.
Laut dem WebAIM-Million-Bericht wiesen die .gov-Domänen eine Differenz von -64,2 % gegenüber der durchschnittlichen Fehlerzahl von 20,3 im letzten Jahr auf1.
Einstieg in die Barrierefreiheit
Die Überprüfung der aktuellen Situation deiner Website kann mit Lighthouse durchgeführt werden, das in alle auf Chromium basierenden Browser integriert ist. Der Messprozess kann außerdem mit Tools wie Unlighthouse automatisiert werden, das Websites crawlt und prüft.
Lighthouse ist in der Lage, die WCAG 2.2 Level A & AA4 zu verarbeiten. Für einen umfassenderen Ansatz empfehle ich die Microsoft-Erweiterung Accessibility Insights, die mehrere Bewertungsmethoden bietet, um die Barrierefreiheitsstufe deiner Website Schritt für Schritt zu überprüfen.
Bemerkenswert ist, dass beide Tools einen umfassenden Überblick über die zu beachtenden Elemente bieten und eine Fülle von Ressourcen zur Verfügung stellen, die bei der Lösung von Barrierefreiheitsproblemen auf einer Website helfen.
Weitere Ressourcen
Tools of the trade sind ein guter Anfang, um größere Probleme mit der Barrierefreiheit auf deiner Website zu entdecken und zu lösen. Für kleinere Probleme und solche, die von nicht betroffenen Nutzer:innen nicht gesehen werden, findest du in den folgenden Ressourcen und Quellen mehr theorethische Ansätze und Muster:
- W3C Accessibility Standards Overview. W3C
- Understanding the Web Content Accessibility Guidelines. MDN
- Introduction to Web Accessibility. WebAIM
TL;DR
Barrierefreiheit im Internet ist eine wesentliche Voraussetzung für die Schaffung einer integrativen digitalen Welt. Durch die Gewährleistung von gleichberechtigtem Zugang und Inklusion können Einzelpersonen und Unternehmen ein größeres Publikum erreichen, ihre Marke stärken und rechtliche Risiken minimieren.
Quellen
Footnotes
-
The WebAIM Million. WebAIM (2024) ↩ ↩2 ↩3 ↩4
-
Disability Inclusion Overview. The World Bank (2018) ↩
-
Richard Branson Supports People With Disabilities – Here Are Six Ways You Can Do It, Too. Gaudiano, P. and Hunt, E.; Forbes.com (2016) ↩
-
WCAG 2.0 Level A & AA Rules. dequelabs/axe-core (2024) ↩