Pflicht ab Mitte 2025: So wird deine Website barrierefrei

Das Internet ist für uns alle wichtig. Doch für viele Menschen mit Beeinträchtigung bleibt der Zugang zu digitalen Inhalten oft eine Herausforderung. Daher tritt am 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft.¹ Es verpflichtet Unternehmen dazu, ihre Websiten barrierefrei zu gestalten. Das bedeutet, dass Websiten für alle zugänglich sein müssen.

Doch wer genau ist betroffen, welche Regeln gelten und wie kann ich meine Website barrierefrei machen?

Für wen und ab wann gilt die Pflicht?

Das Gesetz gilt für bestimmte Produkte, aber auch “Dienstleistungen im elektronischen Geschäftsverkehr”, § 1 Abs. 3 Nr. 5 BFSG. Dazu zählen neben Online Shops auch Websiten, die beispielsweise Online-Terminbuchungen anbieten.

Nach den herausgegeben Leitlinien der Bundesfachstelle Barrierefreiheit heißt es: “Dabei handelt es sich um Dienstleistungen der Telemedien, die über Webseiten und auf Mobilgeräten angebotene Dienstleistungen elektronisch und auf individuelle Anfrage eines Verbrauchers im Hinblick auf den Abschluss eines Verbrauchervertrags erbracht werden.”²

Dies bedeutet, dass prinzipiell auch Kontaktformulare umfasst sein können, die darauf abzielen, Verträge mit Verbrauchern abzuschließen. So könnten beispielsweise Kontaktformulare für die Buchung von Dienstleistungen in den Anwendungsbereich des Gesetzes fallen.

‍

Websiten ab dem 28. Juni 2025

Die Pflicht gilt allgemein für alle Websiten, die unter das Gesetz fallen und nach dem 28. Juni 2025 in den Verkehr gebracht werden.

‍

Websiten vor dem 28. Juni 2025 (Übergangsregelung)

Für Websiten, die unter das Gesetz fallen, aber vor dem 28. Juni 2025 in den Verkehr gebracht wurden, gelten Übergangsregelungen bis Mitte 2030 (§ 38 BFSG).

‍

Gibt es Ausnahmen?

Ja: Kleinstunternehmen, die Dienstleistungen erbringen und

• weniger als 10 Personen beschäftigen
• und entweder einen Jahresumsatz von höchstens 2 Millionen Euro erzielen oder deren Jahresbilanzsumme sich auf höchstens 2 Millionen Euro beläuft,

sind grundsätzlich ausgenommen.

‍

Warum ist Barrierefreiheit im Web wichtig?

Barrierefreiheit im Web ist wichtig, weil sie sicherstellt, dass alle Menschen, unabhängig von ihren körperlichen oder geistigen Fähigkeiten, gleichen Zugang zu digitalen Inhalten und Dienstleistungen haben.

In Deutschland leben rund 7,8 Millarden Menschen mit einer anerkannten Schwerbehinderung (Stand: Ende 2021).³ Das sind knapp 10% aller Menschen in Deutschland und dies umfasst noch nicht einmal Menschen mit Beeinträchtigung, die keine anerkannte Schwerbehinderung haben, oder ältere Menschen, denen die Nutzung von Websiten schwerfällt. Das bedeutet zugleich: In einer stetig alternden Bevölkerung wird es zunehmend wichtiger, diesen Menschen einen leichteren Zugang zu gewährleisten.

In einem Test von Google und Aktion Mensch hingegen wurde festgestellt, das 75 Prozent der untersuchten Shops nicht barrierefrei waren.⁴

‍

Weitere Vorteile von barrierefreien Websiten

‍

1. Erweiterung des Kundenkreises: Durch die Schaffung barrierefreier Websites können Unternehmen ihre Reichweite erhöhen und neue Zielgruppen erschließen. Menschen mit Behinderungen stellen eine bedeutende Bevölkerungsgruppe dar, deren Kaufkraft oft unterschätzt wird. Barrierefreie Websites ermöglichen es Unternehmen, diese Zielgruppe besser zu erreichen und ihre Produkte und Dienstleistungen einem breiteren Publikum anzubieten.
2. Verbesserung der Benutzererfahrung für alle: Barrierefreie Designs berücksichtigen nicht nur die Bedürfnisse von Menschen mit Behinderungen, sondern verbessern auch die Benutzererfahrung für alle Nutzer und Nutzerinnen. Klare Navigation, gut lesbare Texte, und benutzerfreundliche Funktionen machen Websites für alle Besucher einfacher zu nutzen.
3. SEO-Vorteile: Barrierefreie Websites können auch von Suchmaschinen besser verstanden und bewertet werden. Die Implementierung barrierefreier Praktiken, wie z.B. die Verwendung aussagekräftiger ALT-Tags für Bilder, kann die Sichtbarkeit einer Website in den Suchergebnissen verbessern.

‍

Diese Faktoren zeigen, dass Barrierefreiheit im Web nicht nur eine ethische Verpflichtung ist, sondern auch wirtschaftliche Vorteile bietet und die Benutzererfahrung für alle verbessert.

‍

Was ist Barrierefreiheit bei Websiten?

Barrierefreiheit bei Websiten bedeutet, dass sie auch für Menschen mit körperlichen und geistigen Beeinträchtigungen zugänglich und nutzbar sind.

Als Grundlage werden die Richtlinien der  Web Content Accessibility Guidelines (WCAG) genommen, die durch die europäische Norm EN 301 549 umgesetzt werden.

Nach den “Four Principles of Accessibility” (“Vier Prinzipien der Barrierefreiheit”) der WCAG sollen Websites vor allem wahrnehmbar, bedienbar, verständlich und robust sein:

‍

1. Wahrnehmbar (Perceivable): Das bedeutet, dass alle Informationen und Teile der Website für alle Nutzer und Nutzerinnen sichtbar und erfassbar sein sollten. Zum Beispiel sollten Texte auch vorgelesen werden können, damit Menschen, die nicht sehen können, sie hören können.
2. Bedienbar (Operable): Die Website sollte für alle Nutzer und Nutzerinnen einfach zu bedienen sein. Das bedeutet, dass alle Funktionen der Website auch von Menschen genutzt werden können, die vielleicht Schwierigkeiten mit der Bedienung haben.
3. Verständlich (Understandable): Alle Informationen auf der Website sollten leicht zu verstehen sein. Das bedeutet, dass die Sprache einfach und klar sein sollte, und dass die Nutzer und Nutzerinnen leicht wissen, was sie tun müssen.
4. Robust (Robust): Die Website sollte auf vielen verschiedenen Geräten gut funktionieren. Egal, ob man die Website auf einem Computer, einem Smartphone oder einem Tablet öffnet, sie sollte immer gut lesbar und benutzbar sein.

‍

Praktische Tipps und Umsetzung

‍

1. Farben und Erscheinungsbild

• Farbkontraste: Menschen mit Sehschwierigkeiten, insbesondere Farbenblindheit oder altersbedingter Sehschwäche, haben Schwierigkeiten, zwischen verschiedenen Farben zu unterscheiden. Stelle sicher, dass der Farbkontrast auf deiner Website ausreichend ist, damit Texte und andere Elemente wie Buttons deutlich erkennbar sind. Vermeide auch Farbkombinationen wie roter Text auf grünem Hintergrund, die für das Auge unangenehm und schwer lesbar sind.
  • Es gibt viele Kontrast-Checker, um die Farbkontraste auf deiner Website zu überprüfen. Webflow bietet beispielsweise einen integrierten Kontrast-Checker mit einer Skala von "Fail" bis "AAA".
• Texte
  • Schriftart: Wähle eine einfache, gut lesbare Schriftart. Vermeide zu verspielte Schriftarten, die schwer zu lesen sind.
  • Schriftgröße: Eine angemessene Schriftgröße ist entscheidend für die Lesbarkeit von Texten, insbesondere für Menschen mit Sehbeeinträchtigungen. Verwende eine Schriftgröße von mindestens 16 Pixeln, um sicherzustellen, dass die Texte gut lesbar sind.
    Verwende keine absolute Größe wie Pixel, sondern lieber relative Einheiten wie REM. REM steht für "root em" und bezieht sich auf die Schriftgröße, die beim “Wurzel-Element” einer Webseite festgelegt ist. Standardmäßig ist die Browser-Schriftgröße auf 16 Pixel eingestellt, was bedeutet, dass 1 REM gleich 16 Pixel ist. Wenn Menschen mit Sehbeeinträchtigungen die Schriftgröße ihres Browsers ändern, passen sich REM-Einheiten entsprechend an, um sicherzustellen, dass der Text proportional größer wird und weiterhin gut lesbar bleibt. Im Gegensatz dazu würde sich die Schriftgröße in Pixeln nicht anpassen und könnte dazu führen, dass der Text unlesbar wird, wenn die Browser-Schriftgröße geändert wird. Dies ermöglicht es Personen mit Sehbeeinträchtigungen, die Website besser zu nutzen und den Textkomfort zu verbessern.
    Wichtig ist auch, dass du die Zoom-Funktion auf der Website nicht deaktivierst.
    

• Buttons und Links: Achte darauf, dass Buttons groß genug sind und genug Abstand haben, um versehentliche Klicks zu vermeiden.
• Animationen und Interaktionen: Animationen und Bewegungen auf der Website können das Erlebnis verbessern, sollten aber nicht zu schnell oder störend sein. Zu schnelle oder übermäßige Animationen können die Benutzer und Benutzerinnen ablenken und das Lesen erschweren. Vermeide Animationen, die Texte verdecken oder das Scrollen behindern, wie beispielsweise "scrolljacking", bei dem das Scrollen ungewöhnlich langsam oder unvorhersehbar ist. Stattdessen sollten Animationen subtil und unterstützend eingesetzt werden, um wichtige Inhalte hervorzuheben oder den Benutzer und Benutzerinnen durch die Website zu führen.
• Klares, einfaches Layout: Gestalte das Layout deiner Website übersichtlich und einfach. Vermeide übermäßige Verzierungen, komplexe Strukturen oder überladene Seiten, die die Navigation erschweren könnten. Ein klares Layout erleichtert es allen Nutzern und Nutzerinnen, sich auf der Website zurechtzufinden und die gewünschten Informationen schnell zu finden.

‍

2. Klare und verständliche Sprache

• Inklusive Sprache: Verwende eine inklusive Sprache, die niemanden ausschließt oder diskriminiert. Achte darauf, geschlechtsneutrale Ausdrücke zu verwenden und vermeide stereotype oder abwertende Begriffe.
• Leichte Sprache: Verfasse Texte in leicht verständlicher Sprache, um sie für Menschen mit Lernschwierigkeiten oder eingeschränkten Sprachkenntnissen zugänglich zu machen. Benutze kurze Sätze, einfache Wörter und klare Strukturen, um die Informationen leicht verständlich zu machen.
  • Tool um Texte in “Leichte Sprache” umzuformulieren: https://languagetool.org/de/text-umformulieren
• Buttons und Links: Nutze klare und aussagekräftige Texte für Buttons und Links, die zeigen, wohin sie führen. Vermeide vage Texte wie "Hier klicken". Wähle stattdessen spezifische Beschreibungen wie "Unsere Leistungen" oder "Jetzt kaufen".

‍‍

3. Struktur und HTML/Code

• Headings: Überschriften (Headings) sind entscheidend, um den Inhalt deiner Website zu strukturieren und zu organisieren. Verwende Überschriften (von h1 bis h6) in der richtigen Reihenfolge und stelle sicher, dass sie logisch und hierarchisch angeordnet sind. Ein Beispiel für die Verwendung von Überschriften wäre: h1 für den Titel der Seite, h2 für Hauptabschnitte, h3 für Unterabschnitte usw. Überschriften erleichtern nicht nur die Navigation für Sehende, sondern auch für Screenreader-Benutzer und -Benutzerinnen, da sie den Inhalt der Seite besser verstehen können.
  • Zusätzlicher Vorteil: Damit ist dire
• Element Tags: Nutze semantische Elemente wie <section>, <article>, <nav> usw., um den Inhalt deiner Website logisch zu gliedern. Diese Elemente tragen dazu bei, dass die Website für Screenreader-Benutzer und -Benutzerinnen besser verständlich ist, da sie die Struktur und Bedeutung des Inhalts besser erkennen können.
• HTML Sprachcode: Setze den HTML-Sprachcode auf die richtige Sprache, um sicherzustellen, dass Screenreader den Inhalt korrekt aussprechen können. Dies ist besonders wichtig für mehrsprachige Websites, da Screenreader anhand des Sprachcodes die korrekte Aussprache bestimmen. Ein Beispiel für den HTML-Sprachcode wäre <html lang="de"> für eine deutschsprachige Website.
• Hidden Text: Verwende versteckten Text, um zusätzliche Informationen für Screenreader-Benutzer und -Benutzerinnen bereitzustellen, ohne das Erscheinungsbild der Website zu beeinträchtigen. Versteckter Text kann z.B. für Formulare verwendet werden, wenn visuell nur Platzhalter (also Texte wie “Name” oder “E-Mail” in dem Textfeld selbst) verwendet werden, die nicht von Screenreadern gelesen werden können. Ansonsten weiß jemand nicht, was wo auszufüllen ist.
• Navigierbarkeit mit der Tastatur: Stelle sicher, dass deine Website auch ohne Maus leicht navigiert werden kann. Viele Menschen, insbesondere solche mit motorischen Einschränkungen, nutzen Tastaturkurzbefehle, um durch eine Website zu navigieren. Achte darauf, dass alle interaktiven Elemente, Links und Schaltflächen mit der Tastatur bedienbar sind und dass die Reihenfolge der Tastaturnavigation logisch ist. Dies ermöglicht es allen Nutzern und Nutzerinnen, die Website effizient zu nutzen, unabhängig von ihrer bevorzugten Eingabemethode.

‍

4. Bilder, Videos und Dokumente

• Alternative Texte für Bilder: Füge allen Bildern aussagekräftige Alternativtexte hinzu, die den Inhalt des Bildes beschreiben. Alternativtexte sind wichtig, damit Menschen mit Sehbehinderungen den Inhalt verstehen können, wenn das Bild nicht geladen wird oder sie einen Screenreader verwenden. Ein Beispiel für einen alternativen Text wäre: "Eine Gruppe von Menschen sitzt um einen Tisch und diskutiert" für ein Bild, das eine Besprechungssituation zeigt.
• Untertitel für Videos: Biete Untertitel für Videos an, um sicherzustellen, dass auch Hörgeschädigte den Inhalt verstehen können. Untertitel sind wichtig, um den Inhalt für alle Nutzer und Nutzerinnen zugänglich zu machen und die Barrierefreiheit zu verbessern. Ein Beispiel für Untertitel wäre die Anzeige des gesprochenen Textes unterhalb des Videos während der Wiedergabe.
• Dokumente/PDFs: Wenn deine Website PDF-Dokumente enthält, stelle sicher, dass sie ebenfalls barrierefrei sind. Das bedeutet, dass die Texte in den PDFs für Screenreader zugänglich sind und dass Bilder alternative Texte haben. Überprüfe auch, ob die Lesereihenfolge logisch ist und dass die Struktur des Dokuments klar und verständlich ist. Vermeide es, wichtige Informationen ausschließlich in PDF-Dokumenten bereitzustellen, da nicht alle Benutzer und Benutzerinnen Zugang zu PDF-Readern haben oder diese nutzen können. Biete stattdessen die Informationen auch in HTML-Format auf der Website an, um sicherzustellen, dass sie für alle zugänglich sind.
• Videos und Dokumente vor dem 28. Juni 2025: Videos und Dokumente, die vor dem 28. Juni 2025 produziert und veröffentlicht wurden, müssen nicht unbedingt barrierefrei gestaltet sein. Es ist jedoch empfehlenswert, ältere Inhalte nachträglich barrierefrei zu optimieren, um die Zugänglichkeit für alle Nutzer und Nutzerinnen zu verbessern.

‍‍

5. Responsives Design

Stelle sicher, dass deine Website auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert. Ein responsives Design passt sich automatisch an die Bildschirmgröße des Geräts an und gewährleistet so eine optimale Benutzererfahrung. Achte darauf, dass alle Inhalte und Funktionen auf kleinen Bildschirmen wie Smartphones genauso gut zugänglich sind wie auf größeren Bildschirmen. Dies stellt sicher, dass deine Website von einer Vielzahl von Benutzern und Benutzerinnen auf verschiedenen Geräten problemlos genutzt werden kann.

‍

6. Regelmäßiges Testen

Überprüfe regelmäßig die Barrierefreiheit deiner Website mit Werkzeugen wie dem WAVE-Webaim-Test, um sicherzustellen, dass sie den geltenden Standards entspricht. Führe auch Tests mit verschiedenen Assistenztechnologien wie Screenreadern durch, um sicherzustellen, dass alle Funktionen der Website für alle Benutzer und Benutzerinnen zugänglich sind.

‍

Hinweis und hilfreiche Links:

Die oben genannten Tipps dienen als Orientierung und sind nicht abschließend.

Webflow Checklist: https://webflow.com/accessibility/checklist

WAVE-Webaim-Test: https://wave.webaim.org/

‍

Herausforderungen und Ausblick

Die Umsetzung von Barrierefreiheit auf Websites ist eine wichtige, aber herausfordernde Aufgabe. Es erfordert nicht nur technisches Know-how, sondern auch ein Bewusstsein für die Bedürfnisse verschiedener Nutzergruppen.

Es ist schwierig, eine Website zu 100% barrierefrei zu machen, besonders wenn sie komplexer ist. Es braucht viel Planung, Zeit und Geld. Manchmal gibt es auch Konflikte zwischen Design und Barrierefreiheit, weil bestimmte Designs schwer für Menschen mit Beeinträchtigungen zu nutzen sind.

Manche Probleme sind schwer komplett zu lösen, weil sie fest in den Entscheidungen zum Design oder der Technologie der Website verankert sind. Aber es ist wichtig, ständig an der Barrierefreiheit zu arbeiten, weil auch kleine Verbesserungen großen Einfluss haben können. Je mehr Menschen die Website nutzen können, desto besser für alle.

‍

Fördermöglichkeiten

Die Aktion Mensch unterstützt mit dem Förderprogramm "Barrierefreiheit für alle" kleine und größere Vorhaben von gemeinnützigen Organisationen, um alle Lebensbereiche für Menschen mit und ohne Behinderung zugänglich zu machen - dazu gehört auch die digitale Barrierefreiheit. Hier gelten die Standards WCAG 2.0 (wie oben im Text bereits erwähnt) oder BITV 2.0.

‍

Mikroförderung

Mit der Mikroförderung werden kleine und lokale Projektideen gefördert, die zeitlich begrenzt sind und zur digitalen Barrierefreiheit beitragen. Die Kosten für die Entwicklung barrierefreier Websites können dabei mit bis zu 5.000 Euro und ohne Eigenmittel gefördert werden.

‍

Projektförderung

Die Projektförderung hingegen unterstützt größere, zeitlich begrenzte Vorhaben, die darauf abzielen, die Lebensbedingungen von Menschen mit und ohne Behinderung langfristig zu verbessern. Die Fördersummen können bis zu 450.000 Euro betragen, wobei mindestens 10 Prozent Eigenmittel erforderlich sind.