Barrierefreiheit: UX, Verantwortung – und warum jetzt der richtige Zeitpunkt ist

Stellt Euch vor: Ihr wollt schnell eine Fahrkarte buchen, Euren Kontostand in der Banking-App überprüfen oder ein Produkt online bestellen. Aber die Texte sind kaum lesbar, Formulare sind unbeschriftet (und damit unverständlich) und Euer Screenreader schweigt. Für über 10 Millionen Menschen in Deutschland ist das keine Ausnahme, sondern Alltag. 

Das Barrierefreiheitsstärkungsgesetz (BFSG) soll dafür sorgen, dass Probleme wie diese der Vergangenheit angehören. Es gilt seit dem 28. Juni 2025 und macht Barrierefreiheit für viele Unternehmen verpflichtend. Ein besonderer Fokus liegt dabei auf digitalen Anwendungen. Doch ungeachtet der gesetzlichen Vorgaben sollte klar sein: Barrierefreiheit ist kein Nice-to-have! Sie ist vielmehr Teil einer guten User Experience (UX), ein Zeichen digitaler Verantwortung – und sie kann einen strategischen Wettbewerbsvorteil bedeuten. 

Was Euch in diesem Beitrag erwartet: 

• Grundlagen:
  Warum Barrierefreiheit alles andere als ein Nischenthema ist 
• Barrierefreiheitsstärkungsgesetz:
  Wer ist betroffen und was ändert sich? 
• Barrierefreiheit trifft UX:
  Warum Barrierefreiheit essenziell für eine gute Nutzererfahrung ist – inklusive Tipps für verschiedene Nutzergruppen 
• Barrierefreiheit in der Praxis:
  Typische Fehler – und wie Ihr sie vermeidet. Mit vielen Praxisbeispielen und nützlichen UX-Tipps 
• Barrierefreiheit im Test:
  Hilfreiche Tools – und warum am Ende dennoch der Mensch der Maßstab ist 
• Barrierefreiheit als Erfolgsfaktor:
  Wie Unternehmen Barrierefreiheit als Vorteil im Wettbewerb nutzen können.

#1 Grundlagen: Barrierefreiheit betrifft uns alle

Barrierefreiheit wird oft nur mit Rampen und Aufzügen in Verbindung gebracht. Doch gerade im digitalen Raum umfasst sie wesentlich mehr. Mit dem neuen Barrierefreiheitsstärkungsgesetz (BFSG) wird die digitale Zugänglichkeit nun zur Pflicht – und das nicht nur für Behörden, sondern auch für Unternehmen. 

Was das bedeutet? Es geht hier um deutlich mehr als um die bloße Erfüllung gesetzlicher Vorgaben. Denn Barrierefreiheit ist eine Einladung, digitale Produkte so zu gestalten, dass sie für alle Menschen nutzbar sind – unabhängig davon, wie alt, fit oder technikaffin sie sind und ob sie eine körperliche oder psychische Einschränkung haben. 

Dabei betrifft Barrierefreiheit weit mehr Menschen, als viele denken: Häufig wird sie ausschließlich mit Personen, die dauerhaft eingeschränkt sind, in Verbindung gebracht. Doch viele Handicaps sind temporär oder situativ. Und das heißt:  Sie können jede und jeden treffen. 

Eine Übersicht des Inclusive Design Teams von Microsoft zeigt, wer alles tatsächlich betroffen ist: 

Nach Grafiken des Microsoft Inclusive Design Teams (Zahlen am Beispiel der USA). Quelle: Vision11. 

In diesem Sinn unterscheidet Microsofts Inclusive Design zwischen: 

• Permanenten Einschränkungen (z. B. Blindheit, Amputation)
• Temporären Einschränkungen (z. B. gebrochener Arm, Augenentzündung)
• Situativen Einschränkungen (z. B. ein Elternteil mit einem Kind auf dem Arm, blendendes Sonnenlicht beim Autofahren)

Hier einige Beispiele für die unterschiedlichen Interaktionsformen: 

Berühren: Eine Person mit nur einer Hand – aber auch jemand mit einer Kaffeetasse in der einen und einem Kind in der anderen Hand. 

Sehen: Blinde Menschen – aber auch alle, die ihren Handy-Bildschirm bei starkem Sonnenlicht betrachten. 

Hören: Gehörlose Nutzer:innen – aber auch Menschen in lauten Umgebungen. 

Sprechen: Menschen ohne Lautsprache – aber auch Menschen mit Erkältung oder einem starkem Akzent.
 

Ihr seht also: Jeder Mensch kann – je nach Lebenslage – betroffen sein. Barrierefreiheit ist damit alles andere als ein Nischenthema, sondern eine generelle UX-Anforderung. Denn sie macht digitale Angebote nutzbar, unabhängig von der individuellen Situation eines Menschen, seinem Alter oder seiner persönlichen Fähigkeiten.

#2 Barrierefreiheitsstärkungsgesetz: Wer ist betroffen und was ändert sich? 

Mit dem BFSG setzt Deutschland die EU-Richtlinie zum European Accessibility Act um. Es verpflichtet Unternehmen, bestimmte Produkte und Dienstleistungen barrierefrei zu gestalten. 

Wer ist betroffen? 

Zahlreiche Wirtschaftsakteure und Institutionen, die Produkte, Angebote und Dienstleistungen bereitstellen. Konkret: 

• E-Commerce-Plattformen (z. B. Online-Shops, Buchungsportale)
• Banken & Finanzdienstleister (z. B. Online-Banking, Automaten)
• Verkehrsanbieter (z. B. Fahrkartenautomaten, Ticket-Apps)
• Telekommunikationsdienste (z. B. Kundenportale, Verträge online)
• Softwareanbieter (z. B. Betriebssysteme, mobile Apps)

Auch Selbstbedienungsterminals wie Bankautomaten, Check-in-Automaten oder Fahrkartenautomaten fallen unter die neue Regelung. Ausgenommen sind lediglich Kleinstunternehmen mit weniger als 10 Mitarbeitenden und weniger als 2 Mio. Euro Jahresumsatz. Doch auch sie können durch eine bessere UX und eine höhere Reichweite profitieren. 

Was ist umzusetzen? 

Die Anforderungen orientieren sich an der europäischen Norm EN 301 549, die wiederum auf den international anerkannten Web Content Accessibility Guidelines (WCAG 2.1) basiert. Sie gliedern sich in die vier Prinzipien Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit: 

Bei der konkreten Umsetzung dieser vier Prinzipien helfen die Richtlinien der WCAG 2.1. Ergänzt werden sie durch testbare Erfolgskriterien auf drei Konformitätsstufen (A, AA, AAA). Die Stufe AA gilt dabei als gesetzlicher Mindeststandard.

#3 Barrierefreiheit trifft UX: Gestaltung für jede und jeden

Wenn es darum geht, digitale Produkte wirklich nutzerfreundlich zu gestalten, gehören User Experience und Barrierefreiheit untrennbar zusammen. Denn eine gute UX allein reicht nicht aus, wenn Menschen mit unterschiedlichen Fähigkeiten, technischen Voraussetzungen oder individuellen Einschränkungen ausgeschlossen bleiben.  

Nutzerzentriertes Design bedeutet daher, (digitale) Produkte so zu gestalten, dass sie von allen Menschen genutzt werden können, unabhängig von Alter, körperlichen, sensorischen oder kognitiven Fähigkeiten. Nur so entsteht ein Angebot, das wirklich für alle jederzeit zugänglich ist.

Was also macht eine barrierefreie UX aus? 

Technikerfahrung: Eine oft unterschätzte Hürde

Barrierefreiheit im digitalen Raum betrifft nicht nur Menschen mit Einschränkungen, sondern auch jene, die wenig Erfahrung mit digitalen Technologien haben. Um besser zu verstehen, wie vielfältig das Verhältnis von Nutzer:innen zur Technik ist, lassen sich vier Basistypen unterscheiden. Sie verdeutlichen, wie unterschiedlich Menschen digitale Angebote wahrnehmen bzw. nutzen. 

Technik-Profis

Sie sind häufig selbst IT-Expert:innen. Technische Hindernisse umgehen sie gekonnt. Dabei kommen sie auch mit unklaren Navigationen, Workarounds und Routinen zurecht. 

Technisch Erfahrene 

Hierbei handelt es sich um Personen, die aus eigener Erfahrung gelernt haben, Strategien zu entwickeln, um mit technischen Problemen umzugehen. Es kommt selten vor, dass sie Problemen nicht lösen können. 

Technisch Bewanderte 

Sie bewältigen Grundfunktionen und einfache Aufgaben, benötigen allerdings eine klare User Experience ohne Hürden. Dementsprechend scheitern sie an komplexeren Aufgaben und an irritierenden Situationen (z. B. an fehlenden Feedback-Meldungen). Fehlen hier Hilfen und Erklärungen, kann das zum Abbrechen von Prozessen führen. 

Technisch Ungeübte 

Diese Menschen haben kaum digitale Erfahrung. Da sie oft schon von einfachen Schritten überfordert sind, fühlen sie sich ohne Hilfestellungen schnell ausgeschlossen. Daher benötigen sie eine klare Schritt-für-Schritt-Begleitung und eindeutige Rückmeldungen durch spezielle Hinweise (z. B. „Tooltipps“ wie etwa Fortschrittsanzeigen, Pfeile etc.). 

UX-Tipps für wenig technikaffine Nutzer:innen: 

• Klare Beschriftungen statt nur Icons – z. B. ein Button mit „Jetzt kaufen“ anstatt eines Warenkorb-Symbols. 

• Selbsterklärende Formulare mit Hilfetexten: Ein kurzes „Wähle dein Geburtsdatum“ unter einem Datumsfeld hilft enorm. 

• Schritt-für-Schritt-Prozesse mit Rückmeldungen und konstanten Bedienmustern – z. B. Fortschrittsbalken bei längeren Prozessen („Schritt 1 von 3“) oder einem „Zurück“-Button, der sich immer oben links befindet, so dass sich jede:r leicht zurechtfindet. 

Ein barrierefreies UX-Design schützt also auch technisch unerfahrene Menschen davor, ausgeschlossen zu werden. Dadurch macht es digitale Angebote für eine deutlich größere Gruppe von potenziellen Interessent:innen zugänglich und attraktiv. 

#3 Barrierefreiheit in der Praxis:

Typische Fehler – und wie Ihr sie vermeidet

Von fehlenden Bildbeschreibungen bis zu unzugänglichen Formularen: Digitale Barrieren zeigen sich oft in alltäglichen Details, die schnell übersehen werden. Hier findet Ihr die häufigsten Stolperfallen – und wie Ihr sie einfach vermeiden könnt. 

Nicht nur Menschen, die Screenreader nutzen, sind auf beschreibende Bildinformationen angewiesen. Auch wenn Bilder nicht geladen werden, zeigen die Alternativtexte den Inhalt an. Fehlen diese Texte, gehen die Informationen der Bildinhalte verloren. 

Richtig:

Beschreibt Bilder klar und prägnant „Ein roter Sportwagen, der auf einer Landstraße fährt.“ 

Falsch:

• Dateinamen als Alt-Text (z. B. „Bild1234.jpg“)  

• Keyword-Spamming (z. B. „Auto, Sportwagen, rotes Auto, günstiges Auto kaufen, Auto online bestellen, Auto mit Top-Leistung …“) 

(i) Für rein dekorative Elemente, die keinen inhaltlichen Mehrwert liefern, darf der ALT-Tag auch leer bleiben (alt=““). 

(i) Sollten Textelemente auf dem Bild zu sehen sein, müssen diese im ALT-Text erwähnt werden. Beispiel: „Ein roter Sportwagen, der auf einer Rennstrecke fährt. Text: Abgesperrte Strecke, professioneller Fahrer. Nicht nachahmen.“ 

Stark kontrastreiche Texte erleichtern nicht nur Menschen mit Sehschwäche das Lesen. Sie sorgen beispielsweise auch dafür, dass Inhalte auf dem Smartphone selbst bei hellem Sonnenlicht gut erfassbar bleiben.
 

Richtig:

Kontrastverhältnis Text zu Hintergrund: mindestens 4.5:1: 

Beispiel: Text in Schwarz (HEX-Code #000000) auf weißen Hintergrund (HEX-Code #FFFFFF). Kontrastverhältnis: 21:1. 

Falsch:

• Hellgrau auf Weiß, z. B. HEX-Code #999999 auf HEX-Code #FFFFFF (Verhältnis: 1.5:1) 

• Informationen die nur über Farben vermittelt werden (z. B. Rot für Fehler) 

Richtig vs falsch: ein Beispiel 

Zu geringe Kontraste zwischen Text und Hintergrund erschweren die Lesbarkeit deutlich. Quelle: Vision11. 

Eine Website, die logisch strukturiert ist, einen gut sichtbaren Fokus bietet und vollständig mit der Tastatur bedienbar ist, erleichtert allen Nutzenden die Orientierung – nicht nur denen, die einen Screenreader verwenden. 

Richtig:

Die Navigation mit der Tabulatortaste ist logisch gestaltet. Alle Buttons und Formulare lassen sich mit der Tastatur erreichen. Eine markierender Rahmen (Fokus) zeigt dabei immer an, wo man sich gerade befindet. 

Falsch:

• Bedienelemente, die nur mit der Maus oder per Touch funktionieren. 

• Funktionen, die nur per Mouseover (Hover) oder Drag & Drop nutzbar sind – ohne barrierefreie Alternative. 

Ein Formularfeld mit der Beschriftung „E-Mail-Adresse“ ist einfacher zu verstehen als ein leeres Feld, das nur einen Platzhaltertext zeigt. 

Bei PDFs, die keinen strukturierten (also maschinell lesbaren) Text enthalten, gehen die Inhalte verloren, sobald ein Screenreader genutzt wird. 

Richtig:

• Eingabefelder sind in HTML mit erklärenden Labels verknüpft. Unter den Eingabefeldern finden sich Texte mit verständlichen Hinweisen. 

• PDFs sind barrierefrei aufbereitet: Sie enthalten getaggten, strukturierten Text – keine reinen Bildscans ohne maschinell erkennbare Inhalte. 

#4 Barrierefreiheit im Test

Um erste Barrieren aufzudecken, sind automatisierte Tests ein hilfreiches Werkzeug. Doch sie erfassen nur etwa 30 % aller Zugänglichkeitsprobleme. Daher lassen sich viele Barrieren nur durch das Testen mit echten Menschen erkennen. Denn diese bringen verschiedene Nutzungsszenarien und ihre individuelle Bedürfnisse mit ein. Um eine optimale Nutzererfahrung für alle zu gewährleisten, ist menschliches Testen also unverzichtbar. 

Nützliche Tools für den Einstieg

• axe DevTools (Browser-Erweiterung): Analysiert Webseiten auf Barrierefreiheitsprobleme nach WCAG. Zeigt Code-Bezüge direkt an.

• WAVE (Web Accessibility Evaluation Tool): Zeigt direkt im Browser aufbereitete Hinweise (z. B. fehlende ALT-Texte, Kontraste) 

• Lighthouse (Google Chrome DevTools): Misst Performance, Suchmaschinenfreundlichkeit sowie Barrierefreiheit und gibt dafür eine Punktzahl (Score) aus. 

• NVDA (Screenreader für Windows), VoiceOver (macOS/iOS): Ermöglichen echtes Erleben aus der Perspektive blinder Nutzer:innen 

Barrierefreier UX-Test in 6 Schritten

#5 Barrierefreiheit als Erfolgsfaktor

Barrierefreiheit ist kein Beiwerk, sondern zentraler Bestandteil einer guten User Experience. Denn sie macht digitale Angebote für alle zugänglich, verbessert die Nutzerfreundlichkeit und trägt auf diese Weise dazu bei, das Markenimage zu stärken.  

Gleichzeitig sorgt sie für bessere Sichtbarkeit in Suchmaschinen und minimiert rechtliche Risiken. Unternehmen, die barrierefreie Gestaltung frühzeitig umsetzen, sichern sich also konkrete Vorteile im Wettbewerb. Betrachtet Barrierefreiheit also nicht als lästigen Kostenfaktor – sondern nutzt sie als strategischen Vorteil! 

Fazit: Höchste Zeit zu handeln

Das Barrierefreiheitsstärkungsgesetz ist bereits seit dem 28. Juni 2025 in Kraft. Wer jetzt nicht handelt, versäumt es nicht nur, gesetzliche Anforderungen zu erfüllen, sondern verpasst eine große Chance: Nutzerzentrierung ernst zu nehmen und digitale Produkte für alle zugänglich zu machen. Kurz gesagt: Als zentraler Bestandteil einer guten User Experience bedeutet Barrierefreiheit nicht mehr Aufwand, sondern: bessere Produkte, mehr Reichweite und echte Inklusion.