Ein Gastbeitrag von Jacopo Deyla, Chief Accessibility Officer bei Accessiway (Jacopo Deyla auf LinkedIn)
Wenn in Unternehmen über barrierefreies DesignBarrierefreies Design bezeichnet die Gestaltung von Inhalten, Oberflächen und Produkten, die für möglichst viele Menschen nutzbar sind, unabhängig von Seh-, Hör-, Bewegungs- oder kognitiven Einschränkungen. Im Englischen spricht man von Accessibility. Gemeint ist nicht nur eine Rücksicht auf eine kleine Gruppe, denn Barrieren entstehen auch situativ, etwa durch grelles Sonnenlicht auf dem Display, eine gebrochene Hand oder eine laute Umgebung.…
Weiterlesen: barrierefreies Design gesprochen wird, denken viele zunächst an blinde Menschen, Screenreader oder Braille-Displays. Doch digitale Barrieren betreffen eine deutlich größere Gruppe. Dazu gehören etwa Menschen mit Farbfehlsichtigkeit, eingeschränktem Sichtfeld, erhöhter Lichtempfindlichkeit oder einer Sehbeeinträchtigung, die sich nicht vollständig durch eine Brille korrigieren lässt. Laut WHO leben in Deutschland rund 1,2 Millionen Menschen mit Sehbehinderungen. Rund sieben Millionen leiden an einer schweren Augenerkrankung. Sie alle haben ein echtes Problem im Internet: Wenn digitale Inhalte ihre Bedürfnisse nicht berücksichtigen, bleiben Inhalte unverständlich, Funktionen unauffindbar oder Angebote unzugänglich. Und das hat Konsequenzen: 80 Prozent der Konsument:innen in Deutschland haben einer repräsentativen Civey-Umfrage im Auftrag von Accessiway zufolge bereits einen digitalen Vorgang abgebrochen, weil eine Website oder App nicht verständlich oder bedienbar war. Für Unternehmen bedeutet das: Ihr digitales Angebot verliert an Reichweite.
Barrierefreies Design ist deshalb kein nachträgliches Korrekturprogramm für eine kleine Zielgruppe. Es sollte bereits bei Konzeption und Gestaltung berücksichtigt werden. Viele der grundlegenden Prinzipien lassen sich frühzeitig in DesignsystemeEin Designsystem ist eine zentrale, strukturierte Sammlung aus Gestaltungsregeln, wiederverwendbaren Bausteinen und Dokumentation, mit der Marken und digitale Produkte einheitlich gestaltet werden. Es legt fest, wie Farben, Schriften, Abstände, Symbole, Bilder und Layouts eingesetzt werden, und stellt diese Elemente so bereit, dass Teams sie direkt nutzen können. Anders als ein klassisches Corporate Design Manual ist ein Designsystem meist digital angelegt…
Weiterlesen: Designsysteme und Entwicklungsprozesse integrieren. Fünf Punkte sind dabei besonders wichtig:
Fünf Stellschrauben für barrierefreies Webdesign
Farbe allein ist keine Information
Eine rote Fehlermeldung und eine grüne Bestätigung wirken auf den ersten Blick eindeutig. Für rund 4,5 Prozent der Weltbevölkerung ist es das aber nicht. Wer Rot und Grün nicht unterscheiden kann, erkennt unter Umständen nicht einmal, dass ihm eine Information fehlt. Die Lösung ist einfach: Farbe darf Informationen verstärken, aber nie allein transportieren. Fehlermeldungen brauchen ein Icon oder ein Textlabel. Verlinkungen im Fließtext eine Unterstreichung. Diagramme sollten zusätzlich zur Farbe ein Muster oder Beschriftungen erhalten. Wer sich nicht sicher ist, ob das genutzte Design Farbe als einziges Mittel einsetzt: Ein Graustufentest kann bereits einen ersten Hinweis darauf geben, ob eine Gestaltung zu stark von Farbunterschieden abhängt.
Gute Lesbarkeit braucht ausreichend Kontrast
Zu geringer Kontrast gehört zu den häufigsten Barrieren im Webdesign. Die Web Content Accessibility GuidelinesWCAG ist die Abkürzung für Web Content Accessibility Guidelines, auf Deutsch Richtlinien für barrierefreie Webinhalte. Das Regelwerk wird vom World Wide Web Consortium (W3C) im Rahmen der Web Accessibility Initiative entwickelt und beschreibt, wie Webseiten, Apps und andere digitale Inhalte für Menschen mit unterschiedlichen Einschränkungen nutzbar werden. Es gilt international als wichtigster Maßstab für digitale Barrierefreiheit und dient als Grundlage…
Weiterlesen: Web Content Accessibility Guidelines (WCAG) sehen für normalen Text grundsätzlich ein Kontrastverhältnis von mindestens 4,5:1 vor. Für ausreichend großen Text gilt unter bestimmten Voraussetzungen ein Verhältnis von 3:1. Besondere Aufmerksamkeit verlangt Text auf Bildern. Je nach Motiv können sich Helligkeit und Farbe des Hintergrunds stark verändern. Eine halbtransparente oder einfarbige Fläche hinter dem Text kann deshalb helfen, den erforderlichen Kontrast zuverlässig sicherzustellen. Auch Bilder, die längere Textpassagen enthalten, sollten möglichst vermieden werden. Echter HTML-Text lässt sich vergrößern, umformatieren und an individuelle Bedürfnisse anpassen. Bei Text, der Bestandteil eines Bildes ist, sind diese Möglichkeiten stark eingeschränkt.
Zugängliches Design bleibt skalierbar
Für viele Menschen mit Sehbeeinträchtigungen ist die Zoomfunktion des Browsers ein wichtiges Hilfsmittel. Eine Website sollte deshalb auch bei starker Vergrößerung ohne Informations- oder Funktionsverlust nutzbar bleiben. Als praktischer Test gilt: Die Inhalte sollten auch bei 400 Prozent Zoom zugänglich bleiben und sich an die verfügbare Breite anpassen. Probleme entstehen häufig durch fixierte Navigationselemente, die bei starker Vergrößerung einen großen Teil des sichtbaren Bereichs verdecken. Auch Fehlermeldungen oder Bestätigungen können außerhalb des aktuellen Ausschnitts erscheinen und dadurch unbemerkt bleiben. Responsive, klar strukturierte Layouts helfen, solche Probleme zu vermeiden. Bei Formularen sind einspaltige Anordnungen oft übersichtlicher als mehrere nebeneinanderliegende Spalten.
Schriftarten sind keine Stilfrage
Es gibt keine WCAG-Richtlinie, die eine bestimmte Schriftart vorschreibt. Dennoch beeinflusst die typografische Gestaltung erheblich, wie gut Inhalte wahrgenommen werden können. In vielen gängigen Web-Fonts ähneln sich Zeichen stark, z. B. die Zahl „1“, das kleine „l“ und das große „I“. Für Menschen mit Sehbehinderung oder Legasthenie können solche Zeichen zur echten Hürde werden. Dabei gibt es speziell entwickelte Schriftarten, bei denen jedes Zeichen eine unverwechselbare Form hat. Mindestens aber sollte gelten: Schriftgröße mindestens 14 bis 16 Pixel für Fließtext, Zeilenabstand mindestens 1,5, keine Zentrierung oder Blocksatz.
Dark Mode und Farbinvertierung mitdenken
Viele Menschen mit Sehbehinderung lesen helle Schrift auf dunklem Hintergrund deutlich besser. Weil viele Websites keinen Dark ModeDark Mode, auf Deutsch dunkler Modus, bezeichnet ein Farbschema für Oberflächen, bei dem helle Schrift und helle Bedienelemente auf dunklem Hintergrund dargestellt werden. Er ist das Gegenstück zum klassischen hellen Erscheinungsbild und steht heute in Betriebssystemen, Apps und Webseiten als Option zur Verfügung. Nutzende können ihn meist dauerhaft wählen oder die Einstellung dem Betriebssystem überlassen, das je nach Tageszeit automatisch…
Weiterlesen: Dark Mode anbieten, greifen sie auf die Farbinvertierung des Betriebssystems zurück. Was dabei passiert, zeigt ein einfaches Beispiel: Ein schwarzes Hamburger-Icon auf weißem Hintergrund wird nach der Invertierung unsichtbar. Der Hintergrund wird schwarz, die SVG-Grafik bleibt schwarz. Schwarz auf Schwarz, das Icon ist weg. Solche Probleme werden von vielen gängigen Checklisten nicht abgedeckt und fallen oft erst im Test mit echten Menschen auf. Ein Simulator kann Hinweise liefern, ersetzt aber keine realistische Nutzung. Wer barrierefreies Design ernst nimmt, prüft deshalb nicht nur Richtlinien, sondern auch unterschiedliche Nutzungssituationen.
Fazit: Barrierefreiheit beginnt im Designprozess
Barrierefreies Webdesign ist keine Spezialdisziplin, die erst kurz vor dem Launch relevant wird. Viele Barrieren entstehen bereits bei grundlegenden Entscheidungen zu Farbe, Typografie, Layout und Interaktion. Wer diese Anforderungen von Beginn an in Designsysteme, Komponenten und Qualitätssicherung integriert, reduziert den späteren Korrekturaufwand und schafft robustere digitale Angebote. Davon profitieren nicht nur Menschen mit dauerhaften Einschränkungen. Gute Kontraste, verständliche Rückmeldungen, flexible Layouts und lesbare Typografie verbessern die Nutzung für viele Menschen – auf unterschiedlichen Geräten und unter unterschiedlichsten Bedingungen. Digitale Barrierefreiheit ist damit weniger eine zusätzliche Funktion als ein Qualitätsmerkmal guten digitalen Designs.
Weitere Informationen und Tipps finden sich in dieser Folge des Podcasts „Control Alt Include“:
Zur Person
Jacopo Deyla ist Chief Accessibility Officer bei Accessiway, Europas führendem Anbieter für digitale Barrierefreiheit. Mehr zu ihm gibt es auf seinem LinkedIn-Profil.
