Direkt zum Seiteninhalt springen

Bar­rie­re­frei­es 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 An­for­de­rung?

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. 

Bar­rie­re­frei­heit 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

Eine Grafik mit dem Titel "Textkontrast", die den Kontrast zwischen Text und Hintergrundfarbe für verschiedene Schaltflächen zeigt.  Die Schaltflächen haben unterschiedliche Farben und Kontrastverhältnisse. Ein Häkchen zeigt an, ob der Kontrast ausreichend ist, ein Kreuz zeigt einen unzureichenden Kontrast an.
Eine Grafik mit dem Titel "Textkontrast", die den Kontrast zwischen Text und Hintergrundfarbe für verschiedene Schaltflächen zeigt.  Die Schaltflächen haben unterschiedliche Farben und Kontrastverhältnisse. Ein Häkchen zeigt an, ob der Kontrast ausreichend ist, ein Kreuz zeigt einen unzureichenden Kontrast an.
Eine Grafik mit dem Titel "Schaltflächenkontrast", die den Kontrast zwischen Text und Hintergrundfarbe für verschiedene Schaltflächen auf weißem, grauem und schwarzem Hintergrund darstellt. Angezeigt werden jeweils zwei verschiedenfarbige Schaltflächen mit ihrem Kontrastverhältnis. Ein Häkchen zeigt an, ob der Kontrast ausreichend ist, ein Kreuz zeigt einen unzureichenden Kontrast an.
Eine Grafik mit dem Titel "Schaltflächengruppe", die zwei Varianten eines Dialogfensters zur Löschbestätigung zeigt. Beide Fenster haben den gleichen Textinhalt, unterscheiden sich aber in der Farbgebung von Hintergrund und Schaltflächen. Unter jedem Fenster wird mit Häkchen und Kreuz die ausreichende bzw. unzureichende Lesbarkeit der Schaltflächen "Abbrechen" und "Löschen" bewertet.

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.

Bar­rie­re­frei­heit nach­träg­lich 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. 

Bar­rie­re­frei­heit 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:

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.