Barrierefreiheit und das Barrierefreiheitsstärkungsgesetz (BFSG): Was gilt es zu beachten?

Wäre es nicht toll, wenn jeder Mensch das Internet problemlos nutzen und genießen könnte, ganz egal, welche Fähigkeiten oder Einschränkungen er hat?

Genau das ist das Ziel der Barrierefreiheit im Web (oft auch digitale Barrierefreiheit oder Accessibility genannt). Wenn wir Websites von Anfang an so bauen, dass sie für alle zugänglich sind, öffnen wir die digitale Welt für rund 1,3 Milliarden Menschen weltweit, die mit einer Behinderung leben.

Was genau ist Barrierefreiheit?

Web-Barrierefreiheit bedeutet, Websites so zu designen und zu entwickeln, dass Menschen mit den unterschiedlichsten Behinderungen sie wahrnehmen, bedienen, verstehen und zuverlässig nutzen können. Das schließt Menschen mit Seh-, Hör-, motorischen, kognitiven oder neurologischen Einschränkungen ein.

Die Kernprinzipien fasst man oft mit dem englischen Akronym POUR zusammen:

Perceivable (Wahrnehmbar): Du musst die Informationen aufnehmen können, egal ob du sie siehst, hörst oder fühlst. Dazu gehören Textalternativen für Bilder (Alt-Texte), Untertitel für Videos und gute Farbkontraste.
Operable (Bedienbar): Du musst alle Funktionen und Elemente auch nur mit der Tastatur oder anderen Hilfsmitteln bedienen können. Das heißt: keine reinen Maus-Interaktionen und eine klare Tastatursteuerung.
Understandable (Verständlich): Inhalt und Bedienung müssen leicht zu verstehen sein. Klare, einfache Sprache, einheitliches Layout und eine nachvollziehbare Navigation helfen dabei.
Robust (Robust): Deine Website muss mit verschiedenen Hilfstechnologien (wie Screenreadern oder Sprachsteuerung) und Browsern gut zusammenarbeiten.

Behinderungen und wie sie die Webnutzung beeinflussen

Web-Barrierefreiheit will die verschiedenen Bedürfnisse von Menschen mit Behinderungen berücksichtigen. Es ist wichtig zu verstehen, wie sich unterschiedliche Einschränkungen auswirken:

Sehbehinderungen: Menschen, die blind sind oder schlecht sehen, nutzen oft Screenreader, die Webseiten vorlesen. Dafür brauchen sie Alt-Texte für Bilder, gute Farbkontraste und die Möglichkeit, alles per Tastatur zu bedienen.
Hörbehinderungen: Gehörlose oder schwerhörige Menschen benötigen Untertitel und Transkripte für Audio- und Videoinhalte. Visuelle Alternativen zu Tonsignalen sind ebenfalls wichtig.
Motorische Einschränkungen: Wer Schwierigkeiten hat, eine Maus zu benutzen, muss die Website komplett per Tastatur steuern können. Klare Fokus-Markierungen (die zeigen, wo man sich gerade befindet) und leicht bedienbare Elemente sind hier entscheidend.
Kognitive Einschränkungen: Menschen mit Lernschwierigkeiten oder Konzentrationsstörungen profitieren von klarer, einfacher Sprache, übersichtlichen Layouts und einer einheitlichen Navigation.

Da schätzungsweise 1,3 Milliarden Menschen weltweit eine erhebliche Behinderung haben, ist barrierefreies Design keine nette Geste, sondern eine Notwendigkeit für eine inklusive digitale Welt.

Wie verschiedene Einschränkungen die Interaktion beeinflussen

Jede Behinderung beeinflusst die Webnutzung auf eigene Weise. Blinde Menschen nutzen Screenreader. Menschen mit Bewegungseinschränkungen navigieren per Tastatur statt Maus. Das Ziel des universellen Designs im Web ist, dass Inhalte für alle anpassbar sind. Videos brauchen Untertitel für Menschen mit Hörproblemen. Manche reagieren empfindlich auf blinkende Inhalte, andere mit Sprachschwierigkeiten brauchen Textalternativen. Eine Website für alle zu bauen heißt, all diese Bedürfnisse zu berücksichtigen.

Die Web Content Accessibility Guidelines (WCAG)

Die WCAG sind der wichtigste internationale Standard für Web-Barrierefreiheit. Sie geben klare Regeln vor, wie Webinhalte zugänglicher gemacht werden können. Aktuell ist Version 2.1 bzw. 2.2 relevant, während WCAG 3.0 in Entwicklung ist.

WCAG 2.x und die Konformitätsstufen: A, AA, AAA

Die WCAG haben drei Stufen, die zeigen, wie barrierefrei eine Website ist. Stell sie dir wie Stufen auf einer Leiter vor:

Level A: Das sind die absoluten Grundlagen. Wenn du diese erfüllst, ist deine Seite für viele schon nutzbar.
Level AA: Diese Stufe baut auf A auf und fügt weitere wichtige Kriterien hinzu. Die meisten Gesetze und Standards fordern Level AA. Das ist das Ziel, das die meisten Organisationen anstreben sollten.
Level AAA: Das ist die höchste Stufe mit den strengsten Anforderungen. Sie macht deine Seite noch besser zugänglich, erfordert aber auch den größten Aufwand.

Du musst abwägen, wie viel Aufwand du betreiben kannst und willst. Für die meisten ist Level AA der goldene Mittelweg und oft auch die rechtliche Mindestanforderung.

Ein Blick auf WCAG 3.0 (in Entwicklung)

Mit WCAG 3.0 wird an der nächsten Generation von Richtlinien gearbeitet. Das Ziel ist, Barrierefreiheit noch praxisnäher und verständlicher zu machen. Es befindet sich aber noch in der Entwicklung, vieles kann sich also noch ändern.

Einige geplante Neuerungen sind:

Verständlichere Sprache.
Ein Bewertungssystem (ähnlich wie Sterne), das zeigt, wie gut die Barrierefreiheit umgesetzt ist.
Regeln, die nicht nur für Websites, sondern auch für Apps und andere digitale Tools gelten.
Eine Kombination aus automatisierten Tests und Tests durch echte Nutzer*innen.

WCAG 3.0 wird auf den bisherigen Versionen aufbauen, aber zum Beispiel auch Aspekte wie kognitive Barrierefreiheit stärker berücksichtigen.

Gesetze und Vorschriften zur Web-Barrierefreiheit

Die Regeln zur Web-Barrierefreiheit werden weltweit strenger. In Deutschland gibt es das Behindertengleichstellungsgesetz (BGG) und die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0), die vor allem für öffentliche Stellen gelten. Auf EU-Ebene sorgt der European Accessibility Act (EAA) dafür, dass ab 2025 auch viele private Unternehmen (z.B. im E-Commerce, Bankwesen) barrierefreie Produkte und Dienstleistungen anbieten müssen.

Die meisten dieser Gesetze orientieren sich an den WCAG, meist Level AA.

Wenn du eine Website betreibst, solltest du diese Regeln kennen. Verstöße können zu Klagen und Bußgeldern führen.

Internationale Standards und ihre Auswirkungen

EU: Der European Accessibility Act (EAA) fordert WCAG 2.1 Level AA für viele Produkte und Dienstleistungen ab Juni 2025. Für öffentliche Stellen gilt die EU-Richtlinie 2016/2102.
USA: Der Americans with Disabilities Act (ADA) wird zunehmend auch auf Websites angewendet. Section 508 gilt für Webseiten von US-Bundesbehörden.
Andere Länder: Auch Kanada (ACA), Großbritannien (Equality Act), Australien und viele andere Nationen haben eigene Gesetze, die sich meist an den WCAG orientieren.

Diese globalen Standards machen deutlich: Barrierefreiheit ist kein Nischenthema mehr, sondern eine globale Anforderung.

Achtung: Das Barrierefreiheitsstärkungsgesetz (BFSG) kommt!

Und jetzt wird’s konkret für Deutschland: Das Barrierefreiheitsstärkungsgesetz (BFSG) ist quasi die deutsche Umsetzung des European Accessibility Act (EAA). Das ist eine echt große Sache, denn es erweitert die Pflicht zur Barrierefreiheit massiv! Bisher waren vor allem Behörden und öffentliche Stellen dran (über BGG und BITV), aber mit dem BFSG müssen ab dem 28. Juni 2025 auch viele private Unternehmen ihre Produkte und Dienstleistungen barrierefrei anbieten.

Wer ist betroffen?

Zum Bundesgesetzblatt (BFSG)

Hersteller
Produkte gemäß § 1 Abs. 2 BFSG (z. B. Computer, Smartphones, Selbstbedienungsterminals)

Importeure
Produkte gemäß § 1 Abs. 2 BFSG (z. B. Computer, Smartphones, Selbstbedienungsterminals)

Händler
Produkte gemäß § 1 Abs. 2 BFSG (z. B. Computer, Smartphones, Selbstbedienungsterminals)

Dienstleister
Dienstleistungen gemäß § 1 Abs. 3 BFSG (z. B. Telekommunikationsdienste, E-Commerce, Bankdienstleistungen)

Das betrifft zum Beispiel:

Online-Shops (E-Commerce)
Bankdienstleistungen
Apps
E-Books
Computer und Betriebssysteme
Smartphones
Ticketautomaten und Check-in-Automaten
Dienstleistungen im Personenverkehr (Websites, Apps, Tickets)

Wenn du in einem dieser Bereiche tätig bist, musst du also handeln! Die Anforderungen orientieren sich in der Regel an den bekannten WCAG-Standards (Level AA). Kümmere dich rechtzeitig darum, denn bei Verstößen drohen Kontrollen und Bußgelder. Das BFSG sorgt dafür, dass Barrierefreiheit endgültig im digitalen Alltag der Privatwirtschaft ankommt.

Ausnahmen gelten nur für:

Kleinstunternehmen mit < 10 Beschäftigten UND ≤ 2 Mio. € Jahresumsatz oder Bilanzsumme
B2B

B2B können indirekt betroffen sein:

Es gibt jedoch Fälle, in denen B2B-Unternehmen indirekt betroffen sein können:

Mischformen aus B2B und B2C: Wenn ein Unternehmen sowohl Geschäftskunden als auch Endverbraucher bedient, müssen die B2C-relevanten digitalen Angebote barrierefrei sein.
Öffentliche Aufträge: Unternehmen, die an öffentlichen Ausschreibungen teilnehmen oder als Lieferanten für öffentliche Einrichtungen tätig sind, müssen die Barrierefreiheitsanforderungen einhalten, da öffentliche Auftraggeber verpflichtet sind, bei der Beschaffung barrierefreie Produkte und Dienstleistungen zu berücksichtigen .

Reine B2B-Webseiten sind grundsätzlich nicht vom BFSG betroffen, solange sie keine digitalen Dienstleistungen im Sinne des Gesetzes anbieten.

Selbstverständlich können wir dir bei der Analyse helfen und einen Barrierefreiheits-Audit deiner Website machen:

Kontaktiere uns

Die Vorteile von barrierefreiem Webdesign

Eine Website, die für alle funktioniert, bringt klare Vorteile – weit über die reine Gesetzeserfüllung hinaus:

Besseres Nutzererlebnis für alle: Barrierefreie Seiten sind oft einfacher und intuitiver zu bedienen – das freut jeden Besucher! Klare Strukturen, lesbare Texte und einfache Formulare machen die Nutzung angenehmer.
Größere Reichweite: Du erreichst mehr Menschen! Nicht nur die mit Behinderungen, sondern auch ältere Nutzer, Menschen mit langsamer Internetverbindung oder solche, die in lauten/leisen Umgebungen surfen.
SEO-Vorteile: Suchmaschinen lieben barrierefreie Seiten! Viele Maßnahmen für Barrierefreiheit (klare Struktur, Alt-Texte, saubere Code) sind auch gut für dein Ranking bei Google & Co.
Besserer Ruf deiner Marke: Zeig, dass dir alle Menschen wichtig sind! Barrierefreiheit signalisiert soziale Verantwortung und stärkt dein Image. Das kommt bei Kunden gut an.
Rechtssicherheit und Risikominimierung: Indem du deine Seite barrierefrei gestaltest, vermeidest du teure Klagen und erfüllst gesetzliche Vorgaben.

Typische Barrieren und wie du sie beseitigst

Websites müssen für alle gut funktionieren. Hier sind häufige Stolpersteine und wie du sie aus dem Weg räumst:

Fehlende Textalternativen für Bilder (Alt-Texte): Füge kurze, beschreibende Alt-Texte zu allen relevanten Bildern hinzu. Dekorative Bilder brauchen keinen (leeres `alt=““`).
Nur mit Maus bedienbare Elemente: Stelle sicher, dass alle Funktionen auch nur mit der Tastatur erreichbar sind. Teste es selbst!
Schlechter Farbkontrast: Achte auf ausreichenden Kontrast zwischen Text- und Hintergrundfarbe (mindestens 4.5:1 für normalen Text, 3:1 für großen Text). Nutze Online-Tools zum Prüfen.
Unklare Formulare: Beschrifte alle Formularfelder klar (mit ``). Gib verständliche Fehlermeldungen aus. Stelle sicher, dass sie auch per Tastatur und Screenreader gut nutzbar sind.
Fehlende Untertitel oder Transkripte für Multimedia: Füge Videos Untertitel hinzu und biete für Audio- und Videoinhalte Text-Transkripte an. Für Videos sind oft auch Audiodeskriptionen (Beschreibungen dessen, was visuell passiert) sinnvoll.
Unklare Struktur: Nutze Überschriften (H1-H6) in der richtigen Reihenfolge, um deine Inhalte logisch zu gliedern. Das hilft Screenreader-Nutzern enorm bei der Navigation.

Hilfstechnologien (Assistive Technologies) und Barrierefreiheit

Es gibt viele Werkzeuge, die Menschen mit Behinderungen helfen, das Web zu nutzen:

Screenreader: Lesen Bildschirminhalte laut vor (z.B. JAWS, NVDA, VoiceOver, TalkBack). Sie sind auf korrekten HTML-Code und Alt-Texte angewiesen.
Spracherkennungssoftware: Ermöglicht die Steuerung des Computers per Stimme (z.B. Dragon NaturallySpeaking). Benötigt klare Beschriftungen und Tastaturzugänglichkeit.
Alternative Eingabegeräte: Tastaturhilfen, Kopf- oder Augensteuerung, spezielle Schalter ersetzen Maus und Tastatur für Menschen mit motorischen Einschränkungen.
Vergrößerungssoftware: Vergrößert Bildschirminhalte für Menschen mit Sehschwäche.
Braillezeilen: Wandeln Text in Blindenschrift um.

Wenn deine Website nach den Barrierefreiheits-Regeln gebaut ist, können diese Hilfsmittel gut damit interagieren. Leider sind laut Studien immer noch erschreckend wenige Websites wirklich barrierefrei.

Barrierefreiheit in der Webentwicklung umsetzen

Barrierefreiheit sollte von Anfang an mitgedacht werden. Hier sind einige technische Aspekte:

Saubere HTML-Struktur: Nutze semantische HTML-Elemente korrekt
ARIA-Rollen und -Attribute: Wenn HTML allein nicht ausreicht, um die Funktion von Elementen (z.B. bei komplexen Widgets wie Slidern oder Tabs) zu beschreiben, kann ARIA (Accessible Rich Internet Applications) helfen. Nutze es aber mit Bedacht und nur, wenn nötig – oft ist korrektes HTML die bessere Wahl.
CSS für Barrierefreiheit: Nutze CSS für das Layout, nicht für die Struktur. Achte auf gute Kontraste. Stelle sicher, dass Inhalte auch ohne CSS verständlich bleiben. Sorge für sichtbare Fokus-Indikatoren bei Tastaturnavigation.
JavaScript-Überlegungen: Wenn du JavaScript für interaktive Elemente nutzt, stelle sicher, dass sie per Tastatur bedienbar sind und von Screenreadern korrekt erkannt werden (ggf. mit ARIA). Achte auf das Fokus-Management, besonders bei Pop-ups oder dynamischen Inhalten.
Responsives Design und Barrierefreiheit: Deine Seite muss auf allen Geräten (Desktop, Tablet, Smartphone) gut aussehen UND barrierefrei sein. Achte auf flexible Layouts, ausreichend große Klickflächen (mind. 44×44 Pixel) und gute Lesbarkeit auf kleinen Bildschirmen.

Moderne Website-Baukästen und Frameworks bieten oft schon gute Grundlagen, aber du musst trotzdem selbst darauf achten und testen.

Testen und Bewerten der Web-Barrierefreiheit

Um sicherzugehen, dass deine Seite wirklich barrierefrei ist, solltest du testen – und zwar am besten auf mehreren Wegen:

Automatisierte Test-Tools: Tools wie WAVE, axe DevTools oder der Equalize Digital Accessibility Checker können deine Seite scannen und viele technische Fehler finden (z.B. fehlende Alt-Texte, Kontrastprobleme). Sie sind ein guter Start, finden aber nicht alles.
Manuelle Tests: Gehe die Seite selbst durch. Kannst du alles nur mit der Tastatur bedienen? Wie liest ein Screenreader die Inhalte vor? Sind alle Elemente logisch aufgebaut? Experten können hier tiefgehende Prüfungen durchführen.
Nutzer-Tests mit Menschen mit Behinderungen: Das ist der Goldstandard! Lass echte Nutzer*innen mit unterschiedlichen Behinderungen und Hilfsmitteln deine Seite testen. Sie finden oft Probleme, an die du nie gedacht hättest.
Kontinuierliche Überwachung: Barrierefreiheit ist kein einmaliges Projekt. Nach Updates oder neuen Inhalten können neue Barrieren entstehen. Plane regelmäßige Checks ein.

Mobile Barrierefreiheit

Da immer mehr Menschen mobil surfen, ist auch die Barrierefreiheit auf Smartphones und Tablets entscheidend:

Touchscreens: Schaltflächen und Links müssen groß genug sein, um sie leicht mit dem Finger treffen zu können (mind. 44×44 Pixel).
Mobile Screenreader: Teste deine Seite mit VoiceOver (iOS) und TalkBack (Android).
Responsives Design: Sorge dafür, dass sich Layout und Schriftgrößen an kleine Bildschirme anpassen und alles lesbar und bedienbar bleibt. Zoomen sollte möglich sein.
Einfache Navigation: Halte Menüs und Bedienelemente auch auf kleinen Screens übersichtlich und konsistent.

Neue Technologien und Barrierefreiheit

Neue Technologien bieten spannende Möglichkeiten, aber auch Herausforderungen für die Barrierefreiheit:

Künstliche Intelligenz (KI): KI kann helfen, automatisch Alt-Texte oder Untertitel zu generieren oder Websites zu testen. Sie kann aber auch neue Barrieren schaffen, wenn sie nicht sorgfältig eingesetzt wird.
Virtual Reality (VR) und Augmented Reality (AR): Diese Technologien müssen von Anfang an barrierefrei gestaltet werden, z.B. durch Sprachsteuerung, haptisches Feedback oder anpassbare Darstellungen.
Internet der Dinge (IoT): Smarte Geräte können Menschen mit Behinderungen im Alltag unterstützen, müssen aber ebenfalls barrierefrei bedienbar sein (z.B. per Sprachsteuerung).

Eine Kultur der Barrierefreiheit schaffen

Barrierefreiheit funktioniert am besten, wenn sie im ganzen Team verankert ist:

Schulung und Bewusstsein: Sorge dafür, dass alle im Team (Designer, Entwickler, Redakteure) wissen, was Barrierefreiheit bedeutet und warum sie wichtig ist.
Integration in Prozesse: Mache Barrierefreiheit zu einem festen Bestandteil eures Workflows – von der Planung über das Design und die Entwicklung bis zum Testen.
Klare Richtlinien und Werkzeuge: Gib deinem Team klare Vorgaben und die nötigen Tools an die Hand, um barrierefreie Arbeit zu ermöglichen.
Verantwortung übernehmen: Mache deutlich, dass Barrierefreiheit eine gemeinsame Aufgabe ist und zum Erfolg des Projekts beiträgt.

Zukunft der Web-Barrierefreiheit

Die Zukunft sieht vielversprechend, aber auch fordernd aus:

KI wird eine größere Rolle spielen, sowohl beim Erstellen als auch beim Testen barrierefreier Inhalte.
Gesetzliche Anforderungen (wie der EAA) werden zunehmen und mehr Unternehmen in die Pflicht nehmen.
Der Fokus wird sich stärker auf kognitive Barrierefreiheit und personalisierte Anpassungen richten.
Neue Interaktionsformen (Sprache, Gesten, VR/AR) müssen von Anfang an inklusiv gestaltet werden.

Es bleibt eine Daueraufgabe, das Web für alle zugänglich zu halten und weiterzuentwickeln.

Tools und Ressourcen für Web-Barrierefreiheit

Es gibt viele Hilfsmittel, die dich unterstützen:

Accessibility Checker und Validatoren:
- WAVE, AChecker und der Accessibility Checker von Equalize Digital erkennen Probleme anhand von Web-Richtlinien.
- Farbkontrast-Checker (viele online verfügbar) helfen sicherzustellen, dass Texte gut lesbar sind.
- Manuelle Tests und Tests mit echten Nutzern decken Probleme auf, die Tools übersehen.
- Regelmäßige Prüfungen helfen, die Einhaltung von Gesetzen sicherzustellen.
Browser-Erweiterungen zum Testen: Add-ons wie WAVE, axe DevTools oder Siteimprove helfen dir, Seiten direkt im Browser zu prüfen.
Lernressourcen und Communities:
- W3C WAI (Web Accessibility Initiative): Die Quelle für die offiziellen Richtlinien und viele Anleitungen.
- Online-Kurse (z.B. bei edX, Coursera, Udacity)
- Blogs und Foren (z.B. WebAIM, Stack Overflow mit Accessibility-Tags)
- Konferenzen und Meetups (z.B. CSUN Assistive Technology Conference, Accessibility Camp)

Wir helfen dir gerne, deine Website Barrierefrei zu machen

Wir erstellen ein Audit deiner Website und leiten Maßnahmen ab die nötig sind, um sie barrierefrei zu machen.

Kontaktiere uns