%402x.svg)
Ab Juni 2025 gilt das BFSG: Digitale Barrierefreiheit wird Pflicht. WCAG 2.1, Kontraste, Tastaturnavigation und semantisches HTML – was Unternehmen jetzt wissen und umsetzen müssen.
Ab dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Damit wird digitale Barrierefreiheit für viele Unternehmen zur gesetzlichen Pflicht – nicht nur für öffentliche Einrichtungen, sondern auch für privatwirtschaftliche Anbieter digitaler Dienstleistungen. Webshops, Kontaktformulare, Buchungssysteme und andere elektronische Dienste müssen dann bestimmte Anforderungen erfüllen.
Das Thema Barrierefreiheit im Webdesign ist aber weit mehr als eine Gesetzespflicht. Es geht darum, digitale Produkte so zu gestalten, dass sie von allen Menschen genutzt werden können – unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen. In diesem Artikel erklären wir, was das konkret bedeutet, welche Anforderungen gelten und warum barrierefreies Design am Ende allen zugutekommt.
Barrierefreiheit (englisch: Accessibility, abgekürzt a11y) bedeutet, dass Websites und digitale Anwendungen für Menschen mit unterschiedlichen Fähigkeiten zugänglich und nutzbar sind. Das umfasst Sehbehinderungen und Blindheit, Hörbehinderungen und Gehörlosigkeit, motorische Einschränkungen, kognitive und neurologische Beeinträchtigungen sowie temporäre Einschränkungen wie ein gebrochener Arm oder situative Einschränkungen wie grelles Sonnenlicht auf dem Display.
Barrierefreiheit betrifft also nicht nur eine kleine Minderheit: In Deutschland leben über 10 Millionen Menschen mit einer anerkannten Behinderung. Dazu kommen Millionen älterer Menschen mit altersbedingten Einschränkungen und all jene, die situativ eingeschränkt sind. Barrierefreies Design verbessert die Nutzbarkeit für alle – auch für Menschen ohne dauerhafte Einschränkung.
Das Barrierefreiheitsstärkungsgesetz setzt die europäische Richtlinie European Accessibility Act (EAA) in deutsches Recht um. Es betrifft Produkte und Dienstleistungen, die ab dem 28. Juni 2025 auf den Markt gebracht oder erbracht werden.
Betroffen sind Unternehmen, die elektronische Dienstleistungen für Verbraucher:innen (B2C) anbieten. Dazu gehören Webshops und E-Commerce-Plattformen, Websites mit Kontaktformularen oder Buchungsfunktionen, Online-Banking und Zahlungsdienste, Messenger- und Kommunikationsdienste sowie E-Book-Plattformen. Rein interne Anwendungen (B2B ohne Endverbraucher-Kontakt) sind nicht betroffen.
Kleinstunternehmen mit weniger als 10 Mitarbeitenden und weniger als 2 Millionen Euro Jahresumsatz sind bei Dienstleistungen ausgenommen – nicht jedoch bei Produkten. Außerdem können Unternehmen sich auf unverhältnismäßige Belastung berufen, müssen dies aber dokumentieren und begründen.
Die Marktüberwachungsbehörden können Bußgelder bis zu 100.000 Euro verhängen. Schwerwiegender noch: Es drohen Vertriebsverbote für nicht konforme Produkte und Dienstleistungen. Verbraucherschutzorganisationen können zudem Unterlassungsklagen einreichen.
Das BFSG verweist auf die europäische Norm EN 301 549, die wiederum die Web Content Accessibility Guidelines (WCAG) 2.1 auf Level AA als Maßstab festlegt. Die WCAG basieren auf vier Grundprinzipien, die unter dem Akronym POUR bekannt sind.
Inhalte müssen so dargestellt werden, dass alle Nutzer:innen sie wahrnehmen können. Konkret bedeutet das: Bilder brauchen beschreibende Alternativtexte, damit Screenreader sie vorlesen können. Videos benötigen Untertitel und idealerweise Audiodeskription. Text muss sich auf 200 Prozent vergrößern lassen, ohne dass Inhalte verloren gehen. Farbkontraste zwischen Text und Hintergrund müssen ein Verhältnis von mindestens 4,5:1 erreichen (für normalen Text) bzw. 3:1 (für großen Text). Farbe darf nie der einzige Informationsträger sein – ein roter Fehlerstatus muss zusätzlich durch Text oder Symbole erkennbar sein.
Alle Funktionen müssen über die Tastatur erreichbar sein – ohne Maus. Das betrifft Navigation, Formulare, Dropdowns, Slider und alle interaktiven Elemente. Der Tastaturfokus muss jederzeit sichtbar sein. Nutzer:innen müssen genügend Zeit haben, um Inhalte zu lesen und Aktionen auszuführen. Bewegte Inhalte (Animationen, Karussells, Auto-Play-Videos) müssen pausierbar sein.
Inhalte und Bedienung müssen nachvollziehbar sein. Die Sprache der Seite muss im HTML-Code deklariert sein, damit Screenreader die richtige Aussprache wählen. Formulare brauchen klare Labels und verständliche Fehlermeldungen. Die Navigation muss konsistent sein – gleiche Elemente an gleichen Stellen.
Inhalte müssen von verschiedenen Technologien zuverlässig interpretiert werden können – auch von Screenreadern, Braillezeilen und anderen assistiven Technologien. Das erfordert valides HTML, korrekte Verwendung von semantischen Elementen und ARIA-Attributen (Accessible Rich Internet Applications) für komplexe Interaktionsmuster.
Die Basis für Barrierefreiheit ist korrekt strukturiertes HTML. Überschriften müssen als h1 bis h6 ausgezeichnet werden – in logischer Reihenfolge, ohne Ebenen zu überspringen. Listen als ul oder ol, Navigationen als nav, Hauptinhalte als main. Semantisches HTML gibt assistiven Technologien die Struktur, die sie brauchen, um Inhalte sinnvoll wiederzugeben.
Jedes informative Bild braucht einen Alternativtext, der den Inhalt beschreibt – nicht das Aussehen. Teamfoto mit fünf Personen vor dem Firmengebäude ist besser als Bild 1 oder teamfoto.jpg. Dekorative Bilder, die keinen inhaltlichen Mehrwert bieten, werden mit einem leeren alt-Attribut versehen, damit Screenreader sie überspringen.
Die Mindestkontraste der WCAG (4,5:1 für Text, 3:1 für große Texte und UI-Elemente) klingen abstrakt, lassen sich aber mit kostenlosen Tools wie dem WebAIM Contrast Checker in Sekunden prüfen. Hellgrauer Text auf weißem Hintergrund – ein häufiger Designtrend – fällt fast immer durch. Gute Typografie und ausreichende Kontraste schließen sich nicht gegenseitig aus.
Jedes interaktive Element muss per Tab-Taste erreichbar und per Enter oder Leertaste aktivierbar sein. Die Tab-Reihenfolge muss logisch sein – von oben nach unten, von links nach rechts. Benutzerdefinierte Komponenten wie Dropdown-Menüs, Tabs oder Modals brauchen oft zusätzliche Tastaturunterstützung und ARIA-Rollen.
Jedes Formularfeld braucht ein sichtbares Label, das programmatisch mit dem Feld verknüpft ist. Platzhaltertext ist kein Ersatz für Labels – er verschwindet bei der Eingabe und hat oft zu wenig Kontrast. Fehlermeldungen müssen klar beschreiben, was falsch ist und wie es korrigiert werden kann.
Webflow bietet eine solide Basis für barrierefreie Websites, erfordert aber bewusste Gestaltungsentscheidungen. Semantische Elemente (Section, Nav, Header, Footer, Main) stehen zur Verfügung und sollten konsequent genutzt werden. Alt-Texte lassen sich für jedes Bild hinterlegen. ARIA-Labels können über Custom Attributes gesetzt werden. Die Überschriftenhierarchie muss manuell korrekt gepflegt werden – Webflow erzwingt keine logische Reihenfolge.
Was Webflow nicht automatisch löst: Tastaturnavigation für komplexe Interaktionen (Custom Dropdowns, Slider), korrekte Fokus-Verwaltung bei Modals und Overlays, und die Überprüfung von Farbkontrasten. Hier ist zusätzliche manuelle Arbeit erforderlich.
Ein häufiges Missverständnis: Barrierefreiheit als nachträgliche Optimierung, die am Ende eines Projekts draufgesetzt wird. Das funktioniert nicht – oder nur mit erheblichem Mehraufwand. Barrierefreiheit muss von Anfang an mitgedacht werden: bei der Struktur, beim Design, bei der Entwicklung und bei der Inhaltserstellung.
Dabei profitieren alle Nutzer:innen von barrierefreiem Design. Klare Kontraste verbessern die Lesbarkeit bei Sonnenlicht. Logische Strukturen helfen auch Nutzer:innen ohne Einschränkung bei der Orientierung. Untertitel sind nützlich in lauten Umgebungen. Tastaturnavigation beschleunigt die Bedienung für Power-User. Barrierefreiheit und gutes Design sind kein Widerspruch – sie sind dasselbe.
Das BFSG verlangt eine Erklärung zur Barrierefreiheit auf der Website, die beschreibt, welche Maßnahmen umgesetzt wurden, welche Bereiche eventuell noch nicht vollständig barrierefrei sind und wie Nutzer:innen Barrieren melden können. Diese Erklärung ist nicht optional – sie gehört zur Pflicht.
Bei Büro Bloock ist Barrierefreiheit fester Bestandteil jedes Webdesign-Projekts. Wir setzen auf semantisches HTML, korrekte Überschriftenhierarchien, ausreichende Kontraste und durchdachte Tastaturnavigation. Nicht als nachgelagerten Prüfschritt, sondern als integralen Teil des Gestaltungsprozesses. Denn barrierefreies Design ist professionelles Design – und seit Juni 2025 auch gesetzliche Pflicht.
