Barrierefreies Design in der Praxis
Barrierefreiheit im Webdesign geht weit über ästhetische Aspekte hinaus. Hauptziel ist die Erschaffung digitaler Erlebnisse, die für alle Menschen zugänglich und nutzbar sind – unabhängig von ihren Fähigkeiten oder Einschränkungen. Dieser Artikel beleuchtet die wichtigsten Faktoren barrierefreien Designs und bietet tiefere Einblicke dazu, wie wir Barrierefreiheit in realen Kundenprojekten berücksichtigen und umsetzen.
Woher kommt die Anforderung?
Barrierefreiheit ist zwar in einem gewissen Maß bei jedem unserer Kundenprojekte zu berücksichtigen, jedoch ist die Einhaltung von internationalen Standards wie WCAG2.2 AA oder AAA nicht immer gewünscht oder einfach nicht Teil des Projektbudgets und -umfangs.
Generell ist ein Trend zu beobachten, bei dem immer mehr unserer Kund:innen mit dieser Anforderung auf uns zukommen. Diese Entwicklung wird durch verschiedene Faktoren vorangetrieben:
- Gesetzliche Verpflichtungen: Öffentliche Einrichtungen und Unternehmen, die an öffentlichen Ausschreibungen teilnehmen, sind bereits heute gesetzlich zur Barrierefreiheit verpflichtet.
- Barrierefreiheitsstärkungsgesetz (BFSG): Ab 2025 tritt das Barrierefreiheitsstärkungsgesetz in Kraft, in dem die Anforderungen an die Barrierefreiheit von Websites und Apps für eine Vielzahl von Unternehmen und Organisationen weiter verschärft werden.
- Verbesserung der Usability für alle: Barrierefreies Design kommt nicht nur Menschen mit Behinderungen zugute, sondern verbessert die Nutzererfahrung für alle. Eine gut strukturierte, leicht navigierbare und verständliche Website ist für alle Besucher:innen von Vorteil.
Barrierefreiheit und Corporate Identity
In zahlreichen unserer Projekte existiert bereits vor Projektstart eine visuelle Corporate Identity (CI) auf Kundenseite, welche wir als Grundlage zur Gestaltung der zukünftigen Website verwenden. Diese CIs sind nicht immer darauf ausgelegt, Barrierefreiheit zu berücksichtigen, sondern konzentrieren sich teilweise ausschließlich darauf, das Markenbild des Unternehmens zu stärken.
Oftmals werden diese CIs von Design-Agenturen umgesetzt, die sehr gut darin sind, visuell ansprechende Farben im Zusammenspiel mit Form und Schriften zu kombinieren, um das Logo und das dazugehörige Markenbild zu entwickeln. Hierbei schränken sich Designer:innen ungerne in ihren Möglichkeiten ein, um kreativ arbeiten zu können. Das Ergebnis sind meist sehr ansprechende Farbpaletten, Logos und Schriftarten, die auf zahlreichen Werbeflächen, Briefköpfen und Textilien abgedruckt werden können.
Der Use Case für das Web und insbesondere Barrierefreiheit werden hierbei leider oft vernachlässigt.
Was fehlt?
Viele Corporate Identities weisen nur eingeschränkte Farbpaletten auf, die sich darauf konzentrieren, die primären und sekundären Markenfarben aufzugreifen. Neutrale Farbtöne, die Teil jedes Designs sind, werden entweder nicht berücksichtigt oder nur in Form von einzelnen Farbtönen hinzugefügt. Hieraus resultiert nicht selten eine Farbpalette, die gestalterische Möglichkeiten einschränkt, und mit der es nahezu unmöglich ist, ausreichende Kontraste zu bieten.
Eingeschränkte Farbpalette
Bei der gezeigten Farbpalette sehen geschulte Augen schon auf den ersten Blick: Die Primär- und Sekundärfarben sind äußerst hell und lassen sich nicht mit ausreichendem Kontrast auf weißen/hellem Hintergrund platzieren. Eigentlich ist nur die Darstellung auf dunklem Hintergrund möglich, wenn der Farbkontrast ausreichend für das WCAG Level AA sein soll.
Hinzufügen neuer Farben
Nicht immer ist es möglich, einfach eine neue Sekundärfarbe zu bestimmen oder die vorhandenen Farben der Marke abzuändern. Außerdem bietet uns die Lösung mit der neuen Sekundärfarbe zwar jeweils eine gute Darstellung für helle und dunkle Hintergründe, eine Kombination des primären und des sekundären Buttons ist aber nicht möglich, da jeweils einer dieser Buttons nicht die Voraussetzungen für den Kontrast erfüllt.
Button Stil und Farbe sinnvoll kombinieren
Mit diesem Vorschlag wird auf neutrale Töne zurückgegriffen, um einen ausreichenden Kontrast zwischen Text und Button-Hintergrund herzustellen. Zusätzlich werden verschiedene Button-Stile sinnvoll mit den CI-Farben kombiniert, um Button-Gruppierungen mit Hierarchie zu ermöglichen.
Es kommt im Einzelnen immer auf den Anwendungsfall und die geforderte Flexibilität des Systems an. Die perfekte Lösung gibt es nicht, aber mit dem richtigen Ansatz lassen sich Barrieren effektiv abbauen.
Barrierefreiheit nachträglich umsetzen
Nicht bei allen unserer Projekte werden wir damit beauftragt, Webseiten von Grund auf aufzusetzen. Oft genug beauftragen uns Kund:innen mit der Anpassung und Erweiterung einzelner Module, um die Barrierefreiheit der gesamten Seite sicherzustellen.
Tatsächlich ist dieser Fall viel aufwendiger, da grundlegende Änderungen am System zwar durchaus möglich sind, wenn diese zur Sicherstellung von Barrierefreiheit erforderlich sind, sich das eigentliche Erscheinungsbild der Seite aber nur minimal verändern soll.
Barrierefreiheit prüfen
Bestehende Seiten auf Barrierefreiheit zu überprüfen, kann ein langwieriges Verfahren sein, bei dem alle erforderlichen Kriterien gegen das aktuelle System geprüft werden müssen. Hierbei übersteigt der Umfang auf jeden Fall das reine Design und ein wenig technisch Expertise ist unverzichtbar.
Das beginnt bei der korrekten Bedienung der Screenreader und Tastaturnavigation über die Inspektion einzelner Elemente mit den browsereigenen Dev-Tools auf gesetzte Labels bis hin zur Analyse der korrekten semantischen Abfolge der Überschriften-Hierarchie.
All diese Dinge und noch viel mehr müssen geprüft werden, bevor es daran geht, Lösungen für die Stellen zu finden, die den Anforderungen der Barrierefreiheit im Weg stehen. Hierzu gibt es eine Vielzahl an Plugins, Tools und Checklisten, die vor und nach der Umsetzung zum Einsatz kommen, um die Kriterien zu überprüfen. Einige Beispiele dafür wären:
- A11Y Project Checkliste
- Stark Figma Plugin
- Silktide Browser Extension
- Wave Extension
- Simulation von Farbblindheit
- Automatisierte Tests (Visual Regression, Semantikfolge, Kontraste)
- Real User Monitoring und Testing
Es Hierbei sollte man sich jedoch nicht unreflektiert auf die Tools verlassen, da die Tools nicht alle Barrieren aufspüren können, auf die einzelne Nutzer:innen eventuell stoßen könnten. Wenn möglich, sollte immer auf die Erfahrungen echter Nutzer:innen zurückgegriffen werden; besonders auf die von Menschen, die auf die Barrierefreiheit der Systeme angewiesen sind.
Nach der Prüfung
Nachdem einzelne Problemstellen des Systems herausgearbeitet wurden, müssen nun barrierearme Lösungen konzipiert werden, die die Probleme beheben. Hierbei ist auf jeden Fall eine enge Zusammenarbeit zwischen Design und Entwicklung erforderlich, da die meisten Lösungen über das reine visuelle Design hinausgehen und so beide Gewerke von der gegenseitigen Expertise profitieren können.
Der wichtigste Schritt zur Sicherstellung von Barrierefreiheit endet nicht mit der technischen Umsetzung und Bereitstellung des Systems, sondern leitet die nächste Phase für einen weitere Stakeholder ein, die benötigt werden, um eine barrierefreie Webpräsenz zu ermöglichen.
Redaktionelle Verantwortung
Ein System kann noch so gut konzipiert, gestaltet und umgesetzt sein und dennoch kläglich an den Barrierefreiheitskriterien der WCAG 2.2 scheitern. Denn es kommt nicht nur auf das System an, sondern auch besonders auf die Inhalte, die über das System ausgespielt und präsentiert werden.
Darum, wie man als Redaktionsteam darauf achtet, die WCAG-Kriterien bei der Inhaltspflege einzuhalten und wie wir unsere Kund:innen darüber informieren und dazu schulen, wird es im nächsten Artikel gehen.