Barrierefreie Website: 8 Tipps + was das BFSG 2025 für dich bedeutet
Durch eine barrierefreie Webseite werden deine Inhalte auch für Nutzer mit Einschränkungen zugänglich. Mit folgenden Tipps erreichst du ein breiteres Publikum.
Was ist Barrierefreiheit?
Die Barrierefreiheit von Webseiten bezieht sich auch die digitale „Zugänglichkeit“ von Inhalten. Dabei geht es darum, dass auch Nutzer mit unterschiedlichsten Einschränkungen oder Behinderungen eine Webseite bedienen können. Das Thema wird von vielen Webseiten vernachlässigt, obwohl mit einer barrierefreien Webseite ein breitere Zielgruppe angesprochen kann.
Die häufigsten Beeinträchtigungen von Nutzern im Internet sind:
- Visuell: Blindheit, Sehschwäche, Farbenblindheit
- Motorisch: Schwierigkeiten eine Maus zu benutzen, langsamere Reaktionszeit
- Kognitiv: Probleme sich auf grosse Mengen von Informationen zu konzentrieren
- Auditiv: Taubheit, Schwerhörigkeit
Was das BFSG 2025 für deine Website bedeutet
Barrierefreiheit ist seit dem 28. Juni 2025 für viele Unternehmen keine freiwillige Option mehr, sondern gesetzliche Pflicht. Das EU-Barrierefreiheitsstärkungsgesetz (BFSG) schreibt vor, dass Produkte und digitale Dienstleistungen barrierefrei gestaltet sein müssen. Das betrifft unter anderem Websites von Unternehmen, die Waren oder Dienstleistungen online anbieten.
Ausgenommen sind Kleinstunternehmen mit weniger als 10 Mitarbeitern und einem Jahresumsatz unter 2 Millionen Euro. Für alle anderen gilt: Wer seine Website nicht barrierefrei gestaltet, riskiert Abmahnungen und Bußgelder. Der Umbau bestehender Websites kann aufwendig sein. Deshalb lohnt es sich, schon bei der Neuerstellung auf Barrierefreiheit zu achten.
Die folgenden 8 Tipps helfen dir, die wichtigsten Grundlagen umzusetzen.
1. Strukturierung von Inhalten
Einer der wichtigsten Methoden, um die Barrierefreiheit einer Webseite zu verbessern, ist eine klare Strukturierung der Inhalte. Dadurch können Nutzer Informationen leichter aufnehmen. Versuche also deine Inhalte logisch zu gruppieren und eine visuelle Hierarchie zu verwenden. Mit sinnvollen Überschriften kannst du die Inhalte deiner Seite in Abschnitte gliedern.
Jede Seite deiner Webseite sollte eine H1-Überschrift als Hauptüberschrift besitzen. Danach kannst du deine Abschnitte mit H2, H3- und H4-Überschriften unterteilen. Durch diese Strukturierung fällt es auch Screenreadern leichter, Texte zu erfassen und sie zum Beispiel blinden Nutzern vorzulesen.
2. Alt-Texte für Bilder
Alternativtexte oder Alt-Tags sind textliche Beschreibungen von Bildern. Sie werden von Screenreadern vorgelesen und ermöglichen so auch blinden oder sehbehinderten Nutzern den Zugang zu Websiteinhalten. Auch Suchmaschinen nutzen Alternativtexte, um Inhalte und Bilder einzuordnen. Achte also darauf, dass jedes Bild auf deiner Webseite einen passenden Alternativtext hat. Beschreibe dabei in einem kurzen Satz, was konkret auf dem Bild zu sehen ist.
3. Richtige Farb- und Kontrastwahl
Die richtige Farbwahl im Webdesign hat einen hohen Einfluss auf die Lesbarkeit. Gerade Menschen mit Seh- oder Farbschwächen können Probleme haben, einen Text mit geringen Kontrast vom Hintergrund zu unterscheiden. Auch zu grelle Farben können Probleme beim lesen verursachen. Mit Tools wie Adobe Color kannst du die Farbkontraste deiner Webseite überprüfen.
4. Beschreibung von Links
Bei Verlinkungen auf deiner Webseite sollte es klar sein, auf welche Seite sie führen. Mit einer genaue Beschreibung verstehen Nutzer genauer, wohin ein Link führt, bevor sie diesen klicken. Das erleichtert Personen mit kognitiven Beeinträchtigungen, das Navigieren auf der Webseite und verbessert die Usability. Vermeide also Allgemeine Begriffe wie „Mehr erfahren“. Nutze stattdessen „Mehr über das Thema XY erfahren“. Das gleiche gilt für die Website-Navigation.
In dem Artikel: „Beispiele und Tipps für eine intuitive Website-Navigation“ findest du detailliertere Anleitung, wie du eine klare Navigation erstellst.
5. Barrierefreie Formulare
Kontaktformulare auf deiner Webseite sollten ebenfalls so gestaltet sein, dass sie leicht bedienbar sind. Achte als erstes auf eine klare Beschriftung der Eingabefelder. Ebenso sollte das Label der Eingabefelder immer sichtbar sein. Als interaktives Element sollte es auch die Möglichkeit geben, die Eingabefelder per Tastatur anzusteuern. Wenn Nutzer ein Feld falsch ausfüllen, sollte es eine klare Meldung & Hinweise zur Fehlerbehebung geben.
6. Bedienbarkeit mit der Tastatur
Manche Nutzer haben Probleme, eine Maus zu bedienen. Webseiten können aber auch per Tastatur bedient werden. Das Hauptwerkzeug dafür ist die Tabulator-Taste. Mit ihr kann man zwischen verschiedenen Elementen springen und sie so fokussieren. Besonders hilfreich ist deshalb eine optische Veränderung der fokussierten Elemente. So kann ein Nutzer sehen, welches Element gerade angewählt ist und eine somit Interaktion auslösen.
7. Videos mit Untertitel und Transkripte
Heutzutage sind auf Webseiten auch viele Videos zu finden. Damit auch gehörlose oder schwerhörige Nutzer die Videos erfassen können, sollten diese barrierefrei eingebunden sein. Mit Untertitel und Transkripte können die gesprochenen Worte oder Töne im Video textlich dargestellt werden.
8. Teste die Barrierefreiheit deiner Webseite
Wie barrierefrei deine Webseite schon ist, kannst du mit verschiedenen Tools testen. Eines der bekanntesten Tools ist der WAVE-Web Accessibility-Evaluator. Das Tool prüft verschiedene Faktoren und identifiziert mögliche Probleme. Probier es am besten doch einfach mal aus. Neben dem WAVE-Evaluator gibt es weitere nützliche Tools:
- Lighthouse in Google Chrome (Tab: Accessibility) zeigt Barrierefreiheitsprobleme direkt in der Browser-Entwicklerkonsole
- axe DevTools ist eine Browser-Erweiterung für tiefere Prüfungen.
- Der Colour Contrast Analyser prüft gezielt Farbkombinationen auf ausreichenden Kontrast.
Diese drei Tools decken die häufigsten Probleme ab und sind kostenlos nutzbar.
Barrierefreiheit ist mehr als eine gesetzliche Pflicht. Eine zugängliche Website ist immer auch eine bessere Website für alle Nutzer, für Suchmaschinen und für deine Marke. Ich helfe dir als Webflow-Freelancer dabei, deine Website so zu gestalten, dass sie den BFSG-Anforderungen entspricht und gleichzeitig gut aussieht und perfomt.
FAQ
Warum ist barrierefreies Webdesign wichtig?
Barrierefreies Webdesign stellt sicher, dass alle Menschen Zugang zu Inhalten haben, unabhängig von körperlichen oder kognitiven Einschränkungen. In Deutschland leben rund 10 Millionen Menschen mit einer anerkannten Schwerbehinderung, eine Zielgruppe, die viele Unternehmen beim Webdesign systematisch ausschließen, obwohl sie Kaufkraft hat. Seit dem 28. Juni 2025 ist Barrierefreiheit für viele Unternehmen durch das BFSG außerdem gesetzlich verpflichtend. Wer jetzt nicht handelt, riskiert Abmahnungen. Barrierefreie Websites haben außerdem bessere SEO-Werte, weil strukturierter Code und Alt-Texte auch Suchmaschinen helfen, Inhalte zu verstehen.
Welche Elemente sind besonders wichtig für Barrierefreiheit?
Die wichtigsten Basics sind:
- ausreichende Farbkontraste zwischen Text und Hintergrund (mindestens Kontrastverhältnis 4,5:1 nach WCAG)
- eine gut lesbare Schriftart
- eine klar lesbare Schriftgröße von mindestens 16px
- eine klare visuelle Hierarchie
- eine logische Überschriftenhierarchie (H1, H2, H3) für Screenreader
- Alt-Texte für alle inhaltlichen Bilder
- Tastaturbedienbarkeit aller interaktiven Elemente und ARIA-Attribute für Buttons und Formulare
Diese Grundlagen decken die häufigsten Barrieren ab und sind mit überschaubarem Aufwand umzusetzen.
Beeinflusst Barrierefreiheit auch SEO?
Ja, und zwar auf mehreren Ebenen. Alt-Texte für Bilder helfen Suchmaschinen, Bildinhalt zu verstehen – und verbessern gleichzeitig die Barrierefreiheit. Eine saubere Überschriftenstruktur erleichtert Screenreadern die Navigation und gibt Google gleichzeitig ein klares Inhaltssignal. Semantisch korrekter HTML-Code, der für Barrierefreiheit wichtig ist, verbessert auch die Crawlbarkeit durch Suchmaschinen. Kurz: Barrierefreiheit und SEO sind keine Konkurrenten, sondern ergänzen sich fast überall. Wer seine Website barrierefrei gestaltet, verbessert in der Regel auch sein Ranking.
Was ist das BFSG und wen betrifft es?
Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die EU-Richtlinie 2019/882 in deutsches Recht um und ist am 28. Juni 2025 in Kraft getreten. Es verpflichtet Unternehmen, die Produkte oder Dienstleistungen digital anbieten, zur barrierefreien Gestaltung ihrer Websites und Apps. Ausgenommen sind Kleinstunternehmen mit weniger als 10 Mitarbeitern und einem Jahresumsatz unter 2 Millionen Euro. Für alle anderen Unternehmen gilt die Pflicht, auch für Selbstständige, die über ihre Website Dienstleistungen verkaufen und diese Schwelle überschreiten. Bei Verstößen drohen Abmahnungen durch Verbraucherschutzverbände.
Wie mache ich meine bestehende Website barrierefrei?
Der erste Schritt ist eine Bestandsaufnahme: Mit Tools wie WAVE oder Lighthouse lässt sich schnell ermitteln, welche Bereiche der Website Probleme haben. Die häufigsten Baustellen sind fehlende Alt-Texte, zu geringe Farbkontraste und nicht tastaturbedienbare Elemente. Diese lassen sich oft ohne Redesign beheben. Bei umfassenderen Problemen wie fehlender semantischer Struktur oder nicht zugänglichen Formularen empfiehlt sich ein systematischer Umbau, idealerweise begleitet von einem Webdesigner mit Erfahrung in Barrierefreiheit. Bei Webflow-Websites lassen sich viele Barrierefreiheits-Anpassungen im Designer direkt vornehmen.
Unterstützt Webflow barrierefreies Webdesign?
Ja. Webflow bietet viele Möglichkeiten, Websites barrierefrei zu gestalten: ARIA-Labels lassen sich direkt im Designer für Buttons und interaktive Elemente vergeben, Alt-Texte für Bilder sind über das Asset-Panel einfach zu pflegen, und die Überschriftenstruktur kann ohne Code gesetzt werden. Seit 2024 stellt Webflow außerdem ein Accessibility-Audit-Tool zur Verfügung, das direkt in der Plattform auf häufige Barrierefreiheitsprobleme hinweist. Webflow-Websites erfüllen mit der richtigen Konfiguration die Anforderungen der WCAG 2.1 Stufe AA, die als Grundlage für das BFSG gilt.
Du benötigst Hilfe bei deinem Projekt?
Egal ob konkrete Anfrage oder erste Idee. Ich berate dich gerne kostenlos. Bei einem Erstgespräch können wir uns über dein Projekt und deine Wünsche austauschen. Anschließend überlege ich mir wirkungsvolle nächste Schritte oder sende dir ein unverbindliches Angebot zu.
Kostenlose Beratung
