Wie Design und UX auf Barrierefreiheit optimieren?

Mitte 2025 tritt das Barrierefreiheitsstärkungsgesetz in Kraft und verschärft die Auflagen für die Barrierefreiheit auf Webseiten. Barrierefreiheit ist jedoch genereller Erfolgsfaktor. Weniger Barrieren bedeuten mehr und glücklichere Nutzer:innen und ein besseres Ranking in der Suche.

Wir geben einen Überblick zum neuen Gesetz, unsere vier Perspektiven auf Barrierefreiheit und wie wir mit einem Audit herausfinden, was man besser machen kann.

Wenig Zeit zum Lesen?
Unser Audit zur Barrierefreiheit macht Ihre Webseite fit für das Barrierefreiheitsstärkungsgesetz. Für ein unverbindliches Angebot einfach eine Mail an [email protected] oder anrufen unter 069 71 71 97 62.

Warum für Barrierefreiheit optimieren?

Ca. 10% aller Menschen in Deutschland haben ein dauerhaftes stark einschränkendes Handicap (Quelle: Statistisches Bundesamt). Hinzu kommen Menschen mit situativen (z.B. Kind auf dem Arm) und vorübergehenden (z.B. Arm gebrochen) Behinderungen.

Daher ist die Optimierung der eigenen Webseite hin zur Barriefreiheit alleine in Deutschland für mehr als 8 Mio. Menschen relevant. Barrierefreiheit hat positive Auswirkungen auf das Business: Barrierearme Webseiten “ranken” besser bei Suchmaschinen (z.B. Google) und ermöglichen mehr Menschen die Dienstleistung und das Produkt zu buchen.

Zum 28.6.2025 tritt das Barrierefreiheitsstärkungsgesetz in Kraft, welches Vorgaben zur Barrierefreiheit von Webseiten beinhaltet, sowie für wen diese verpflichtend sind.
Besonders im Fokus waren bisher Shops und E-Commerce-Webseiten. Neu ist hingegen, dass „Dienstleistungen im elektronischen Geschäftsverkehr“ ebenfalls Vorgaben zur Barrierefreiheit erfüllen müssen. Die Formulierung ist schwammig. Wir gehen davon aus, dass bereits Webseiten mit Möglichkeiten zur Terminbuchung oder einem Kontaktformular unter die Einhaltung des neuen Gesetzes fallen. Kleinunternehmen mit weniger als 10 Mitarbeitenden oder weniger als 2 Mio. € Jahresumsatz sind von der Regelung befreit.

Bei Verstoß gegen das Gesetz können Bußgelder fällig werden oder der Betrieb der Webseite untersagt werden. Es gibt diverse Übergangsfristen und weitere Sonderfälle, die durch einen Rechtsbeistand geklärt werden können.

Es ist sinnvoll barrierearm zu gestalten:
für den eigenen Wettbewerbsvorteil, für die Menschen.

Neben der Optimierung zur Barrierefreiheit benötigt es eine “Erklärung zur Barrierefreiheit”, die ähnlich zum Impressum und zur Datenschutzerklärung die wichtigsten Informationen zur Barrierefreiheit enthält.

Die vier Prinzipien und Perspektiven auf Barrierefreiheit

Das Barrierefreiheitsstärkungsgesetz orientiert sich am internationalen Standard „WCAG 2.2.“. Der WCAG 2.2 umfasst 55 “Erfolgskriterien”. Die Wertung erfolgt in drei Stufen: “A”, “AA”, “AAA”. Die Wertung “AA” entspricht der deutschen BITV-Verordnung, die bisher als Minimum galt.

Level “A” deckt lediglich die absoluten Mindestanforderungen ab. Level “AA” beseitigt die häufigsten und größten Barrieren für Menschen mit Behinderungen. In der höchsten Stufe “AAA” besteht eine optimale Zugänglichkeit. “AAA” ist für viele Webseiten nur schwer zu erreichen, sollte aber angestrebt werden. In der Praxis ist eine Mischung aus “AA” und “AAA” in den verschiedenen Aspekten der Barrierefreiheit realistisch.

Grundlage des WCAG 2.2 sind die vier Prinzipien der Barrierefreiheit:

Wahrnehmbar: Informationen und Interface müssen von allen Nutzenden aufgenommen werden können.
Bedienbar: Alle Funktionen müssen bedienbar, das Interface zugänglich und Interaktionen erkennbar sein.
Verständlich: Alle Informationen und die Bedienung müssen leicht nachvollziehbar sein.
Robust: Wahrnehmung und Nutzung muss mit einer großen Anzahl von Geräten möglich sein.

Eine Webseite, die eine diese Prinzipien nicht erfüllt, ist nicht Barrierefrei.

Laut Barrierefreiheitsstärkungsgesetz ist eine Barrierefreiheit erreicht, wenn „[…] das Produkt oder die Dienstleistung für Menschen mit Behinderungen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar sind.“.

Eine sehr vage Formulierung. Um konkret zu werden, blicken wir aus vier Perspektiven auf die Barrierefreiheit einer Webseite:

Visuelle Gestaltung
User Experience
Technik & Code
Inhalt

Wie und was prüfen?

Aufgrund unserer Expertise in Design und User-Experience umfasst unser „Audit zur Barrierefreiheit“ die Perspektiven 1: „Visuelle Gestaltung“ und 2: „User Experience“.

Viele der Richtlinien überschneiden sich in mehreren Perspektiven. Beispiel: Überschriften müssen…

…lesbar sein (Perspektive 1: “Visuelle Gestaltung”)
…technisch korrekt angelegt (H1–H6) sein (Perspektive 3: “Technik & Code”)
…inhaltlich verständlich sein (Perspektive 4: Inhalt)

Die Perspektiven 3 & 4 bietet wir mithilfe von Spezialisten in unserem Netzwerk an. Meist befindet sich Perspektive 4: „Inhalt“ in der Hand der Redaktion auf Kundenseite. Wir pflegen generell eine enge Zusammenarbeit mit Technik und Redaktion.

Im folgenden fassen wir die Perspektiven kurz und knapp zusammen.

Perspektive 1: Visuelle Gestaltung

Wir prüfen die Kontrastverhältnisse von Farben (Hintergrund und informatives Element), sowie die Nutzung von Schrift (Lesbarkeit Schriftart allgemein, Schriftgrade) und die Auszeichnung von interaktiven Elementen. Zudem spielt die Hierarchie von Überschriftenebenen und Layouts eine große Rolle. Formulare, Links und multimediale Inhalte wie Videos, sind ebenfalls Teil dieser Durchsicht. Im Abschluss bewerten wir Design von Navigation und Hyperlinks.

Checkliste für Perspektive 1

Anpassungsfähiges UI

Das visuelle Layout ist zugänglich zwischen 320px und 1280px Breite, sowie im „Portrait“ und „Landscape-Modus“ (“AA”)

Audio und animierte Inhalte

Animierter Inhalt flackert nicht mehr als 3x pro Sekunde, um Anfälle bei betroffenen Personen zu vermeiden. (“AAA”)

Typographie (Link)

In der Schriftart kann klar zwischen “I” (großes i), “l” (kleines L) und der Ziffer “1” unterschieden werden
Ähnliche Buchstaben unterscheiden sich genug voneinander. Die folgenden Zeichen sind meist am problematischsten: “B 8 C O 0”
Die kleingeschriebenen Buchstaben “e, a, c o” unterscheiden sich genug voneinander
Text kann auf 200% vergrößert werden ohne dass Inhalt verschwindet oder Funktionalität verloren geht (“AA”)
Größe für Fließtext: Mind. 12pt/16px (Empfehlung; die WCAG beinhaltet keine fixe Zahl)
Minimale Textgröße: 9pt/12px (Empfehlung; die WCAG beinhaltet keine fixe Zahl)

Minimale Farbkontrast-Verhältnisse

Paragraphen-Text: 4.5:1 (“AA”); 7:1 (“AAA”)
Großer Text: 3:1 (“AA”)
Text, platziert auf Verläufen oder Bildern, hat genügend Kontrast auf allen Endgeräten
Hover- oder Focus-Stati: 3:1
Formular-Felder: 3:1
Charts, Diagramme und andere Grafiken (auf entscheidenen Stellen): 3:1
Icons: 3:1
Empfehlung Kontrast-Plugin

Inhaltsstruktur

Die Gestaltung von Überschriften entspricht ihrer Hierarchieebene
Überschriften ähnlicher Hierarchie sehen überall ähnlich aus

Formulare

Ein Pflichtfeld wird nicht nur durch eine Farbe gekennzeichnet
Kein Labeling von Feldern alleine durch „Placeholder“
Labels und Hilfetexte stehen eng am entsprechenden Feld
Error-Meldungen stehen beim entsprechenden Feld
Error-Meldungen werden nicht nur durch eine Farbe gekennzeichnet, sondern zusätzlich durch Text und Icons

Bilder

Auszeichnen, welche Bilder als “dekorativ” gelten, sodass diese von Entwickler*innen korrekt im Code markiert werden (Link) (“To mark an image as decorative, all that is required is that you supply an empty ALT attribute.”)
Bei komplexen Bildern (Graphen, Charts, Diagramme, Illustrationen, Karten) sollte eine Bildbeschreibung in der nähe des Bildes vorliegen

Multimedia

Abschriften sollten dicht beim jeweiligen Medium (z.B. Video) stehen
Links zu Audio-Beschreibungen stehen dicht am Video
Aufgezeichnete Audiobeschreibungen (“AA”)
Live-Untertitel (“AA”)
Aufgezeichnete Zeichensprache (“AAA”) (und weitere)

Seitennavigation

Der Seitenaufbau ist aufgeteilt in bekannte Regionen: Header, Content, Footer
Hinzufügen eines Links „Zum Hauptinhalt“ als erstes Element, welches mit dem Keyboard fokussiert werden kann (wird in der Praxis wenig verwendet. Wichtig ist, dass der Hauptinhalt schnell ersichtlich ist)
Navigationselemente sind auf der gesamten Webseite konsistent

Sensorisch

Wenn Informationen nur via Farbe kommuniziert werden, so ist eine zusätzliche Methode erforderlich (Icon, Auszeichnung, Text)

Tabellen

Kopfzeilen unterscheiden sich von „Body“-Zeilen
Zebra-Muster oder Rahmen helfen unterschiedliche Zeilen voneinander zu unterscheiden
Verhindern von zu viel Weißraum zwischen Spalten

Text-Stile

Zu viel Kursiv und KAPITALSÄTZE vermeiden
Unterstreichungen primär für Links verwenden
Linksausgerichteten Text bevorzugen (“AAA”)
max. 80. Zeichen pro Zeile (“AAA”)
Zeilenhöhe mind. x1.5 (“AAA”)
Am wichtigsten ist, dass der Text gezoomt werden kann, denn es existieren verschiedene Bedürfnisse

Perspektive 2: User Experience

Die User Experience ist eng mit der visuellen Gestaltung verknüpft, geht aber in einigen Fällen darüber hinaus. Es geht um die Interaktion der Nutzenden mit – und das Verhalten von – Buttons, Aktionen, Audio, Video, Navigation, „Hover-States“(Verhalten bei dem darüberfahren mit der Maus) und Formularen. Außerdem stehen die verschiedenen Bedienungsmöglichkeiten, wie die Navigation via Keyboard, im Fokus.

Checkliste für Perspektive 2

Audio und animierte Inhalte

Kein Autoplay von Audio über 3 Sekunden Länge
Bei Inhalten über 3 Sekunden Länge muss der/die Nutzer:in die Möglichkeit haben die Lautstärke anzupassen
Keine automatisch ablaufenden Karussells oder anderen Inhalte (außer in weniger als 5 Sekunden verändert sich die Darstellung)
Möglichkeit geben Inhalte zu stoppen oder zu pausieren (wenn Inhalt länger als 5 Sekunden)

Formulare

“Labels” sind immer sichtbar
Error-Nachrichten sind klar erkennbar (nicht allein durch Farbe)
Anleitungen stehen am Anfang des Formulars
Informationen können überprüft werden, bevor sie final abgesendet werden
Option, den Inhalt eines Passwort-Feldes einzublenden
Buttons zum Absenden eines Formulars nicht ohne Begründung auf inaktiv lassen, sondern eine eindeutige Error-Nachricht anzeigen

Keyboard

Tastaturinteraktionen, die vorhersehbar, logisch und intuitiv sind
Beibehaltung der Focus-Reihenfolge der UI-Elemente
Vermeidung von großen Veränderungen, wenn ein bestimmter Keyboard-Focus eintritt
Änderungen an einer UI-Komponente sollten erwartbare Effekte haben. Oder man informiert die Nutzer:innen vorher darüber
Keyboard-Shortcuts sollten nicht mit anderen Shortcuts in Konkurrenz treten
Shortcuts nutzen die Verbindung einer Taste mit Alt oder CTRL
Ein-Tasten-Shortcuts nur verwenden, wenn man sie ausschalten kann oder eine Komponente im Fokus ist
Ausschließliche Bedienung via Keyboard möglich (“AAA”)

Seitennavigation

Nutzer:innen mehrere Möglichkeiten geben Inhalte zu finden
Links einfügen, die die Nutzer:innen direkt zum Hauptinhalt der Seite führen (in der Praxis selten verwendet)

Mauszeiger und Interaktion

Inhalte vermeiden, die nur auf „hover“ oder „focus“ erscheinen
Alle „Aufgaben“ sollten durch einfache Gesten durchführbar sein: Single Tap, Double Tap
Komponenten erst aktivieren, wenn der Finger angehoben oder der Mausknopf losgelassen wird
Interaktionen, die den Motion Sensor des Gerätes verwenden, sollten ausschaltbar und durch Standard-UI-Komponenten ersetzbar sein
Bei einer Aktion, die “drag” erfordert ist eine Alternative anzubieten (Link) (“AA”)

Zeitliche Events

Zeitliche Beschränkungen nur verwenden, wenn sie nötig sind
Nutzer:innen eine Möglichkeit geben ein Zeitlimit auszuschalten (vor Beginn)
Nutzer:innen mind. 20 Sekunden vor Zeitende warnen und die Möglichkeit der Verlängerung anbieten

Perspektive 3: Technik & Code

Die technische Perspektive umfasst die allgemeine Codequalität, die korrekte Verwendung von bestimmten HTML-Tags, semantische Auszeichnungen und weitere Implementierungen. Eine ausführliche Übersicht der Richtlinien für Entwickler:innen sind hier aufbereitet: https://dequeuniversity.com/checklists/web/.

Hier helfen außerdem automatische Tools, wie z.B. https://wave.webaim.org/.

Für eine individuelle Überprüfung von Technik & Code helfen unsere Partner von punkt.de. Mehr dazu im Blog: https://punkt.de/de/blog/2024/barrierefreiheit-im-web.html

Perspektive 4: Inhalt

Das Ziel ist immer: Klar verständlicher Inhalt.

Der Leitfaden zu Erstellung barriearmer Inhalte des “World Wide Web Konsortiums” gibt dabei folgende Tipps:

leicht verständliche Worte,
kurze Sätze,
einfache Zeitform,
kurze Textblöcke,
eindeutiger Inhalt,
klare Bilder und
leicht verständliche Videos.

Auf den Webseiten des WCAG finden sich weitere Tipps für Redakteur:innen: https://wcag.com/resource/wcag-quick-tips-for-content-writers/

Ergebnis des Audits

Das Ergebnis des Audits ist eine PDF-Datei mit allen Erkenntnissen inkl. Screenshots. Neben dieser Dokumentation ist ein Online-Termin von einer Stunde zur Erläuterung der Erkenntnisse mit inbegriffen. Ziel ist es, einen detaillierten Überblick der Optimierungspotenziale zu liefern.

Gerne übernehmen wir in einem Folgeprojekt die Ausarbeitung der Potenziale. Wir arbeiten hier mit befreundeten Entwicklungsagenturen und Textern zusammen, um alle Leistungen aus einer Hand anbieten zu können. Eine Zusammenarbeit mit einer bestehenden IT-Abteilung oder Redaktion ist ebenfalls möglich.

Sie haben Interesse an einem Audit zur Barrierefreiheit?
Sprechen Sie uns gerne an unter [email protected] oder 069 71 71 97 62

Weiterführende Links

BMAS - Barrierefreiheitsstärkungsgesetz
Eine ausführliche Checkliste (über alle vier Perspektiven hinweg) findet sich bei den Kollegen von WebAIM: WebAIM: WebAIM's WCAG 2 Checklist
Ein weiterer Online-Checker (inkl. Unterseiten-Check):