Wie Design und UX auf Barrierefreiheit optimieren?

1. Februar 2024
9 Minuten Lesezeit
Featured Image

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:

  1. Visuelle Gestaltung
  2. User Experience
  3. Technik & Code
  4. 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)
Barrierefreiheit ist Teamwork!

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”)
  • 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
  • Müssen mehr als nur durch die Textfarbe identifizierbar sein (mind. bei “hover” und “focus”)
  • Es ist ersichtlich, ob sich der Link in einem neuen Tab/Fenster öffnet
  • Bereits besuchte Links haben eine andere visuelle Gestaltung
  • Unterschiedliche Beschriftungen für CTAs verwenden (“Mehr erfahren” auf mehreren CTAs auf einer Seite vermeiden)

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”)
  • Links sollten im selben Browser-Tab öffnen, wenn es Sinn macht
  • Die minimale Größe von klickbaren Targets muss 24x24px betragen. Der Abstand zu anderen Elementen muss groß genug sein. (Link)

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


Get In Touch

Gutes Design entsteht im Dialog.
Einfach anrufen: 
+49 69 / 71 71 97 62
Oder schreiben: [email protected]

View