Digitale Barrierefreiheit ist vor allem durch das frisch in Kraft getretene Barrierefreiheitsstärkungsgesetz in aller Munde und beschäftigt weiterhin viele Unternehmen und Agenturen, Websites und Shops für Nutzer:innen von Screenreadern, Tastatursteuerung und weitere assistive Technologien zu optimieren. Aus meiner Sicht sollte digitale Barrierefreiheit jedoch kein Nice-to-have sein, das nur bei Bedarf oder „aus gesetzlichem Zwang“ umzusetzen ist. Sie sollte ein grundlegender Bestandteil digitaler Produkte werden (egal ob B2B oder B2C) – ganz im Sinne des UX-Mindsets ALLEN Nutzer:innen ein bestmögliches Nutzungserlebnis zu ermöglichen.
Doch wie gelingt das? Genau darüber habe ich bei meinem Vortrag auf dem UX Barcamp Bremen gesprochen: Wie wir als UX Designer:innen bereits in der Konzeption und Gestaltung die Voraussetzungen dafür schaffen, dass digitale Produkte später barrierefrei funktionieren und die technische Umsetzung möglichst reibungslos klappt.
So legen wir im UX/UI den Grundstein für Barrierefreiheit
Es gibt einige Aufgaben, die wir bereits im UX Design übernehmen können, wenn es um barrierefreie Bedienkonzepte geht. Diese lassen sich in zwei grundlegende Bereiche unterteilen.
- Einhaltung bekannter UX Standards
- Berücksichtigung von Barrierefreiheits-Kriterien
Eine erste Grundlage liegt bereits in gutem UX Design:
- Nachvollziehbare Gliederung und einfacher Aufbau von Seiten, Inhalten und Funktionen
- Saubere Headline-Hierarchie (H1, H2, H3 usw.) mit sprechenden Abschnitts-Überschriften
- Sprechende Bezeichnung von Links + Funktionen
- Konsistenz bei wiederkehrenden Verhaltens- und Strukturmustern
- Fokus auf Relevanz und Mehrwert
Die Einhaltung solcher Standards hilft vor allem bei der Nutzung eines Screenreaders, die Inhalte einer Seite gut strukturiert und nachvollziehbar erfassen zu können.
Ein nächster Schritt ist es, sich mit Hilfe der WCAG-Kriterien (Web Content Accessibility Guidelines) ein Bild davon zu machen, welche Kriterien von externen Prüfer:innen als Maßstab für digitale Barrierefreiheit genutzt werden. Viele Kriterien sind zwar technischer Natur und erfordern Anpassungen am technischen Code (z.B. die Verwendung von aria-Labels), doch einige Kriterien – über die Verwendung ausreichender Farbkontraste hinaus – können bereits im UX/UI Design behandelt werden.
Besonders gut und nachvollziehbar aufbereitet sind die Kriterien und Prüfschritte auf der folgenden Seite: https://bitvtest.de/pruefverfahren/wcag-22-webIch. Jedes WCAG-Kriterium und der zugehörige Prüfschritt sind sauber aufbereitet und ermöglichen es, Kriterien direkt durchzutesten. Zusätzlich empfehle ich, selbst mal mit assistiven Bedienhilfen eine Seite „zu erfahren“. Wozu das gut ist? Es macht für uns das Nutzungserlebnis einer Seite mit einem Screenreader o.ä. direkt spürbar.
Best Practices für barrierefreie UX/UI Patterns
Basierend auf den WCAG-Kriterien und den daraus entstandenen „Standards“, sowie aus eigenen Nutzungserfahrungen mit Hilfe assistiver Bedienhilfen, gibt es mittlerweile einige Best Practices für barrierefreie UX/UI-Patterns. In meinem Vortrag habe ich anhand konkreter Beispiele aus der Praxis gezeigt, wie typische UI-Komponenten barrierefrei gestaltet werden können. Hier einige Beispiele:
- Textlinks in Menüs: Farbänderungen zur Kennzeichnung eines aktiven Zustands reichen nicht aus – ergänzende Kennzeichnungen wie Unterstreichungen oder Icons sind notwendig.
- Teaser-Elemente: Eine vollständig klickbare Card mit sprechender Überschrift als Linktext ist ideal. Auf einen einzeln ansteuerbaren Teaser-Link mit dem Text „Mehr erfahren“ sollte, wenn möglich verzichtet werden.
- Semantische Reihenfolge: Bei Elementen wie Teasern sollte immer auf eine relevante Vorlesereihenfolge für Screenreader geachtet werden. Oft macht es Sinn, ein vorhandenes Bild zuletzt vorzulesen.
- Slider und Autoplay-Videos: Alles, was sich automatisch und länger als 5 Sekunden bewegt, braucht eine Pause-Funktion.
- Formulare und Fehlermeldungen: Müssen klar, kontextbezogen und verständlich sein – idealerweise mit semantischer Auszeichnung.
- Komplexe Komponenten wie Filter, Date Picker oder Pop-ups: Sollten mit besonderer Sorgfalt eingesetzt werden. Hier sollte bei der technischen Umsetzung auf bereits barrierefreie Komponenten aus existierenden Libraries wie https://www.w3.org/WAI/ARIA/apg/patterns/ gesetzt werden oder barrierefreie Alternativen zum Einsatz kommen.
Werkzeuge & Checklisten für den UX-Prozess
Neben der Konzeption und Gestaltung barrierefreier UX/UI-Komponenten können wir im UX Design auch vor allem die technische Umsetzung unterstützen, indem wir Hinweise und Spezifikationen für die barrierefreie Umsetzung unserer UX/UI Designs vorbereiten. Hilfreich ist der Einsatz von Accessibility-Checklisten und Plugins (z.B. von IBM https://www.ibm.com/able/toolkit/design/ux/), die es direkt in Tools wie Figma ermöglichen, technische Spezifikationen für Entwickler:innen mit Hinweisen zu dokumentieren. Hilfreich sind hier Definitionen der
- Semantik
- Vorlesereihenfolge
- Tastatursteuerung
- Unsichtbaren, aber vorgelesenen Begriffen
- Uvm.
Fazit: UX und Barrierefreiheit gehören zusammen
Barrierefreiheit ist kein rein technisches Thema – sie ist UX! Und je früher wir sie mitdenken, desto inklusiver, robuster und zukunftsfähiger werden unsere Produkte.
Meine Empfehlung: Nutzt Bedienungshilfen selbst, setzt euch Stück für Stück mit den WCAG-Kriterien auseinander – und sammelt so Erfahrungen und gewinnt Routine. Was außerdem hilft: die Erwartung an Perfektion abzulegen.
Weiterführende Links aus dem Vortrag:
- gehirngerecht.digital
- IBM Accessibility Toolkit
- Accessibility Insights Tool
- BITV-Test: WCAG-Prüfverfahren
Elena Beuse
Lead UX Designerin bei u+i interact