BFSG & WCAG 2.1 AA: Der ultimative Leitfaden für digitale Barrierefreiheit ab 2025

In der digitalen Welt von morgen ist die Barrierefreiheit nicht länger nur ein Ideal, sondern eine gesetzliche Pflicht mit weitreichenden Konsequenzen für Unternehmen. Ab dem 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft und setzt neue Maßstäbe für digitale Produkte und Dienstleistungen in Deutschland. Dies ist keine Nischenregelung, sondern eine umfassende Anforderung, die Tausende von Unternehmen betrifft – von Online-Shops über Banken bis hin zu Telekommunikationsanbietern.

Sind Sie darauf vorbereitet? Wissen Sie, was WCAG 2.1 AA bedeutet und wie Sie Ihre Webseite, Shop oder App entsprechend anpassen müssen? Dieser ausführliche Leitfaden navigiert Sie durch die Komplexität des BFSG und der WCAG 2.1 AA-Standards. Er soll Ihnen nicht nur die rechtlichen Grundlagen und technischen Anforderungen erklären, sondern zeigt Ihnen auch, wie Sie diese in der Praxis umsetzen, welche Fallstricke Sie vermeiden sollten und welche immensen Chancen die digitale Inklusion für Ihr Unternehmen birgt.

Was ist das Barrierefreiheitsstärkungsgesetz (BFSG)?

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist die deutsche Antwort auf eine europäische Initiative: den European Accessibility Act (EAA). Es ist ein entscheidender Schritt zur Schaffung einer inklusiveren digitalen Gesellschaft und betrifft eine breite Palette von Produkten und Dienstleistungen.

Die Entstehung des BFSG: Vom EAA zur nationalen Gesetzgebung

Der Ursprung des BFSG liegt im European Accessibility Act (EAA), einer EU-Richtlinie (Richtlinie (EU) 2019/882), die darauf abzielt, die Barrierefreiheit von Produkten und Dienstleistungen im gesamten europäischen Binnenmarkt zu harmonisieren. Die Idee dahinter ist simpel, aber mächtig: Produkte und Dienstleistungen sollen für Menschen mit Beeinträchtigungen leichter zugänglich gemacht werden, um ihre Teilhabe am gesellschaftlichen und wirtschaftlichen Leben zu fördern. Gleichzeitig soll ein fairer Wettbewerb für Unternehmen geschaffen werden, indem gleiche Barrierefreiheitsstandards in allen Mitgliedstaaten gelten.

Jeder EU-Mitgliedstaat war verpflichtet, die Richtlinie in nationales Recht umzusetzen. In Deutschland erfolgte dies durch das BFSG. Das Gesetz spiegelt die europäischen Vorgaben wider, präzisiert sie für den deutschen Markt und legt die konkreten Pflichten, Fristen und Sanktionen fest. Die zentralen Ziele des BFSG sind:

• Chancengleichheit
  Beeinträchtigte Menschen mit sollen gleichberechtigt Zugang zu wichtigen Produkten und Dienstleistungen erhalten.
• Inklusion
  Die digitale Spaltung soll verringert und die Teilhabe aller Menschen am digitalen Leben gefördert werden.
• Abbau von Barrieren
  Technische und organisatorische Hürden, die Menschen mit Beeinträchtigungen im Alltag einschränken, sollen systematisch beseitigt werden.
• Rechtssicherheit für Unternehmen
  Einheitliche Standards sollen Unsicherheiten reduzieren und Unternehmen Planungssicherheit geben.

Wer ist vom BFSG betroffen?

Das BFSG hat eine breite Reichweite und betrifft primär Unternehmen, die Produkte oder Dienstleistungen für Verbraucher (B2C-Bereich) anbieten. Die Betroffenheit ist dabei nicht von der Größe des Unternehmens abhängig, es sei denn, es handelt sich um eine spezielle Ausnahme für Kleinstunternehmen bei Dienstleistungen.

Betroffene Produkte:

Die Liste der betroffenen Produkte ist spezifisch und umfasst Endgeräte, die im täglichen Leben eine zentrale Rolle spielen:

• Hardwaresysteme für Universalrechner
  Dazu gehören klassische Computer (PCs, Laptops), aber auch moderne Tablets, Smartphones und sogar Smartwatches. Kurz gesagt: alle Endgeräte, die eine breite Palette von Aufgaben erfüllen können und interaktive Funktionen bieten.
• Selbstbedienungsterminals
  Dies ist ein besonders relevanter Punkt für viele Branchen. Dazu zählen Geldautomaten im Bankensektor, Fahrausweisautomaten im öffentlichen Nah- und Fernverkehr, Check-in-Automaten an Flughäfen und Bahnhöfen sowie interaktive Informationskioske in öffentlichen Einrichtungen oder Einkaufszentren. Die Schnittstelle zwischen Mensch und Maschine muss hier barrierefrei gestaltet sein, von der Bedienung über die Anzeige bis zur Ausgabe von Informationen.
• Verbraucherendgeräte mit interaktivem Leistungsumfang für Telekommunikationsdienste
  Beispiele hierfür sind Router und Modems, die es Verbrauchern ermöglichen, auf Telekommunikationsdienste zuzugreifen. Die Konfiguration und Nutzung dieser Geräte muss auch für Menschen mit Beeinträchtigungen zugänglich sein.
• Verbraucherendgeräte mit interaktivem Leistungsumfang für den Zugang zu audiovisuellen Mediendiensten
  Darunter fallen Smart-TVs, Set-Top-Boxen und Streaming-Geräte, die den Zugang zu Filmen, Serien und anderen Medien ermöglichen.
• E-Book-Lesegeräte
  Spezielle Hardware, die für das Lesen digitaler Bücher konzipiert ist, fällt ebenfalls unter das Gesetz.

Betroffene Dienstleistungen:

Noch weitreichender sind die Auswirkungen auf Dienstleistungen, insbesondere im digitalen Raum:

• Telekommunikationsdienste für Endverbraucher
  Dies betrifft Internet- und Mobilfunkanbieter. Nicht nur der Zugang zu den Diensten, sondern auch die Websites, Apps und Kundenportale dieser Anbieter müssen barrierefrei gestaltet sein.
• Bestimmte Elemente von Personenbeförderungsdiensten
  Hierzu zählen Websites und mobile Anwendungen von Verkehrsunternehmen, über die Fahrkarten gebucht, Echtzeitinformationen abgerufen oder mobile Tickets genutzt werden. Die digitale Customer Journey im ÖPNV und Fernverkehr muss inklusiv sein.
• Bankdienstleistungen für Verbraucher
  Online-Banking-Portale, mobile Banking-Apps und die Bedienung von Geldautomaten fallen in diesen Bereich. Finanztransaktionen müssen für alle zugänglich sein.
• E-Books und hierfür bestimmte Software
  Nicht nur die Lesegeräte, sondern auch die E-Books selbst (als digitale Inhalte) und die zugehörige Software (z.B. Lese-Apps auf Smartphones) müssen barrierefrei sein. Dies umfasst Aspekte wie die Möglichkeit zur Vergrößerung, Kontrastanpassung und die Kompatibilität mit Screenreadern.
• Dienstleistungen im elektronischen Geschäftsverkehr
  Dies ist der wohl größte und weitreichendste Bereich. Er umfasst Online-Shops, Buchungsportale, digitale Marktplätze, Kundenportale, B2C-Websites mit Transaktionsmöglichkeiten und alle anderen digitalen Verkaufs- und Serviceplattformen, über die Verbraucher Produkte oder Dienstleistungen erwerben oder verwalten können.

Die Ausnahme für Kleinstunternehmen bei Dienstleistungen:

Eine wichtige Ausnahme betrifft Kleinstunternehmen, die ausschließlich Dienstleistungen anbieten. Wenn ein Unternehmen weniger als 10 Beschäftigte hat und einen Jahresumsatz oder eine Jahresbilanzsumme von maximal 2 Millionen Euro aufweist, ist es von den Barrierefreiheitspflichten des BFSG befreit. Allerdings gilt dies nur, wenn die Umsetzung der Barrierefreiheit eine „unverhältnismäßige Belastung“ darstellen würde. Was als unverhältnismäßig gilt, ist eng auszulegen und muss im Einzelfall gut begründet werden. Bringt ein Kleinstunternehmen jedoch Produkte in Verkehr, fällt es uneingeschränkt unter das BFSG.

Abgrenzung:
Was fällt nicht unter das BFSG? Das Gesetz zielt auf die digitale Schnittstelle zum Endverbraucher ab. Reine B2B-Anwendungen, Inhalte Dritter (z.B. User-Generated Content auf einer Plattform, für den das Unternehmen keine direkte Einflussmöglichkeit hat) oder bestimmte Kulturdienstleistungen (z.B. Live-Performance ohne digitalen Bezug) sind in der Regel nicht betroffen.

Der Zeitplan des BFSG: Fristen und Übergangsregelungen

Der Stichtag 28. Juni 2025 ist von zentraler Bedeutung, aber es gibt wichtige Übergangsfristen, die Unternehmen kennen müssen, um ihre Compliance-Strategie zu planen.

• Ab 28. Juni 2025
  Ab diesem Datum müssen alle neuen Produkte, die in Verkehr gebracht werden, und Dienstleistungen, die für Verbraucher erbracht werden, von Anfang an barrierefrei sein. Das bedeutet: Jede neue Website, jede neue App, jedes neue Terminal, das ab diesem Zeitpunkt live geht, muss den Anforderungen entsprechen.
• Übergangsfrist bis 28. Juni 2030
  Für bestehende digitale Angebote (Produkte und Dienstleistungen), die bereits vor dem 28. Juni 2025 auf dem Markt waren, gilt eine Übergangsfrist zur Anpassung. Unternehmen haben also fünf Jahre Zeit, ihre bereits etablierten Systeme und Dienste nachträglich barrierefrei zu gestalten. Diese Frist mag lang erscheinen, aber der Aufwand für die Umgestaltung kann erheblich sein. Frühzeitiges Handeln ist daher dringend geboten.
• Längere Übergangsfrist für Selbstbedienungsterminals
  Eine spezielle Regelung gilt für Selbstbedienungsterminals (wie Geld- oder Fahrkartenautomaten), die vor dem 28. Juni 2025 in Betrieb genommen wurden. Diese dürfen noch bis zum 28. Juni 2040 genutzt werden, jedoch höchstens 20 Jahre ab ihrer erstmaligen Nutzung. Dies trägt der oft langen Lebensdauer und den hohen Investitionskosten dieser Geräte Rechnung.

Warum frühzeitiges Handeln entscheidend ist
Viele Unternehmen unterschätzen den Aufwand, der mit der Umsetzung von Barrierefreiheit verbunden ist. Es geht nicht nur um technische Änderungen, sondern auch um Prozessanpassungen, Schulungen und eine grundlegende Veränderung der Denkweise. Wer kurz vor Fristablauf beginnt, riskiert nicht nur mangelhafte Umsetzung, sondern auch hohe Kosten und rechtliche Probleme. Eine strategische und schrittweise Annäherung ist der Königsweg.

WCAG 2.1 AA: Der Goldstandard für digitale Barrierefreiheit

Das BFSG gibt den Rahmen vor, aber die technischen Details, wie digitale Barrierefreiheit umzusetzen ist, finden sich in den Web Content Accessibility Guidelines (WCAG) 2.1 auf dem Level AA. Diese Richtlinien sind der international anerkannte Standard.

Was sind die WCAG? Ursprung, Versionen und Bedeutung

Die WCAG sind Richtlinien, die vom Web Accessibility Initiative (WAI) des World Wide Web Consortium (W3C) entwickelt wurden. Das W3C ist die Hauptorganisation, die globale Standards für das World Wide Web entwickelt. Die WCAG sind keine Gesetze im eigentlichen Sinne, sondern technische Empfehlungen, die jedoch weltweit von Regierungen und Organisationen als Grundlage für Barrierefreiheitsgesetze herangezogen werden.

Die WCAG basieren auf vier übergeordneten Prinzipien, die oft unter dem Akronym POUR zusammengefasst werden:

• Perceivable (Wahrnehmbar)
• Operable (Bedienbar)
• Understandable (Verständlich)
• Robust (Robust)

Über die Jahre gab es verschiedene Versionen der WCAG. WCAG 1.0 legte die ersten Grundsteine. WCAG 2.0 brachte eine überarbeitete Struktur und mehr Testbarkeit. WCAG 2.1, veröffentlicht im Jahr 2018, erweiterte die 2.0-Version um Kriterien, die vor allem die Zugänglichkeit auf mobilen Geräten und für Menschen mit kognitiven und Lernbehinderungen verbessern. Aktuell wird an WCAG 2.2 gearbeitet, und langfristig ist WCAG 3.0 (auch „Silver“ genannt) in Planung, das einen noch umfassenderen und flexibleren Ansatz verfolgen soll.

Für das BFSG ist WCAG 2.1 Level AA der verbindliche Standard. Die WCAG definieren drei Konformitätsstufen:

• A (Minimum)
  Dies sind grundlegende Anforderungen, die oft schon durch standardkonformes HTML erfüllt werden.
• AA (Mittel)
  Dies ist die am häufigsten geforderte Stufe und der Goldstandard für die meisten gesetzlichen Anforderungen, einschließlich des BFSG. Sie umfasst zusätzliche Kriterien, die eine signifikant verbesserte Zugänglichkeit für eine breitere Palette von Beeinträchtigungen gewährleisten.
• AAA (Hoch)
  Diese Stufe geht über die AA-Anforderungen hinaus und zielt auf die höchste mögliche Barrierefreiheit ab. Sie ist oft sehr aufwendig zu implementieren und nicht immer für alle Arten von Inhalten praktikabel, daher ist sie in der Regel keine gesetzliche Pflicht.

Die 4 Prinzipien der WCAG 2.1: Wahrnehmbar, Bedienbar, Verständlich, Robust

Jedes dieser Prinzipien beinhaltet eine Reihe von Richtlinien und spezifischen Erfolgskriterien, die auf den Konformitätsstufen A, AA oder AAA angesiedelt sind. Für die BFSG-Konformität müssen alle Kriterien auf Level A und AA erfüllt werden.

1. Wahrnehmbar (Perceivable)

Inhalte müssen so präsentiert werden können, dass alle Nutzer sie wahrnehmen können, unabhängig von ihren sensorischen Fähigkeiten.

• Textalternativen für Nicht-Text-Inhalte (1.1.1, Level A):
  • Jedes Bild, jede Grafik, jedes Icon und jedes andere nicht-textuelle Element, das für das Verständnis des Inhalts wichtig ist, muss eine aussagekräftige Textalternative (Alt-Text) besitzen. Dieser Text wird von Screenreadern vorgelesen oder angezeigt, wenn das Bild nicht geladen werden kann.
  • Gutes Beispiel:
    <img src=“hund.jpg“ alt=“Ein Golden Retriever liegt entspannt auf einer grünen Wiese in der Sonne.“>
  • Schlechtes Beispiel:
    <img src=“bild_01.jpg“ alt=“Bild“> (zu unspezifisch) oder <img src=“logo.png“ alt=““> (wenn es kein rein dekoratives Element ist).
  • Dekorative Bilder oder Icons, die keine zusätzliche Information vermitteln, sollten einen leeren Alt-Text (alt=““) haben, damit Screenreader sie ignorieren.
• Zeitbasierte Medien (1.2.1, 1.2.2, 1.2.3, Level A; 1.2.4, 1.2.5, Level AA):
  • Für Audio- und Videoinhalte müssen Untertitel (für Hörgeschädigte), Transkripte (als Textversion des Gesprochenen und aller relevanten Geräusche) oder Audiodeskriptionen (für Sehbehinderte, die visuelle Informationen beschreiben) bereitgestellt werden.
  • Beispiel
    Ein Produktvideo sollte Untertitel haben, die den gesprochenen Text wiedergeben und wichtige Geräusche (z.B. „Produkt klickt ein“) beschreiben.
• Anpassbar (1.3.1, 1.3.2, 1.3.3, Level A; 1.3.4, Level AA):
  • Inhalte müssen so strukturiert sein, dass sie von verschiedenen Benutzeragenten und assistiven Technologien verarbeitet werden können, ohne Informationsverlust. Dies bedeutet den Einsatz von semantischem HTML (z.B. <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>).
  • Überschriftenhierarchien (<h1>, <h2>, <h3> usw.) müssen korrekt und logisch verwendet werden, um die Struktur der Seite zu vermitteln.
  • Reflow (1.4.10, Level AA)
    Inhalte müssen ohne Scrollen in zwei Dimensionen (horizontal und vertikal) dargestellt werden können, wenn sie auf bis zu 400% vergrößert werden. Dies erfordert responsives Design.
  • Kontraste (1.4.3, Level AA)
    Der Farbkontrast zwischen Text und Hintergrund muss ein bestimmtes Verhältnis erfüllen (mindestens 4,5:1 für normalen Text, 3:1 für großen Text). Dies ist entscheidend für Menschen mit Sehschwäche oder Farbenblindheit.
  • Größe des Texts (1.4.4, Level AA)
    Text muss ohne assistive Technologie auf bis zu 200% vergrößerbar sein, ohne dass Inhalte oder Funktionalität verloren gehen.
  • Keine reine Farbe zur Informationsvermittlung (1.4.1, Level A)
    Informationen dürfen nicht ausschließlich durch Farbe vermittelt werden. Wenn z.B. ein Feld rot wird, weil ein Fehler auftritt, muss zusätzlich eine Textmeldung erscheinen.
  • Keine blinkenden/flackernden Inhalte (2.3.1, Level A)
    Inhalte dürfen nicht mehr als dreimal pro Sekunde blinken oder flackern, um epileptische Anfälle zu vermeiden.

2. Bedienbar (Operable)

Benutzeroberflächen und Navigation müssen für alle Nutzer bedienbar sein, unabhängig davon, welche Eingabemethode sie verwenden.

• Tastaturbedienbarkeit (2.1.1, Level A; 2.1.2, Level A):
  • Alle Funktionen der Website (Links, Buttons, Formulare, Navigationselemente) müssen ausschließlich mit der Tastatur bedienbar sein. Eine Maus darf nicht zwingend erforderlich sein.
  • Die Tab-Reihenfolge muss logisch und konsistent sein.
  • Beispiel
    Ein Dropdown-Menü muss sich mit der Tastatur öffnen und die Optionen auswählen lassen.
• Sichtbarer Fokus (2.4.7, Level AA)
  Wenn ein interaktives Element (Link, Button, Formularfeld) mit der Tastatur (z.B. Tab-Taste) fokussiert wird, muss dies visuell deutlich erkennbar sein (z.B. durch einen farbigen Rahmen oder eine Hervorhebung). Dies ist essenziell für Menschen, die die Tastatur nutzen.
• Navigierbar (2.4.1, 2.4.2, 2.4.3, 2.4.4, 2.4.5, 2.4.6, 2.4.8, Level A/AA):
  • Skip-Links (2.4.1, Level A)
    Bei umfangreichen Websites sollten „Sprunglinks“ (Skip-Links) am Anfang der Seite vorhanden sein, die es Tastaturnutzern ermöglichen, direkt zum Hauptinhalt oder zur Navigation zu springen und repetitive Navigationselemente zu überspringen.
  • Titel der Webseite (2.4.2, Level A)
    Jede Webseite muss einen aussagekräftigen und eindeutigen Titel haben, der in der Browser-Registerkarte angezeigt wird.
  • Fokus-Reihenfolge (2.4.3, Level A)
    Die Reihenfolge, in der Elemente mit der Tastatur fokussiert werden, muss logisch und konsistent sein.
  • Linktext (2.4.4, Level A)
    Der Linktext muss den Zweck des Links auch im Kontext verstehen lassen (z.B. „Mehr über unser Produkt erfahren“ statt „Hier klicken“).
  • Mehrere Wege (2.4.5, Level AA)
    Es muss immer mehr als einen Weg geben, um eine Information oder Seite zu finden (z.B. über die Navigation, Suchfunktion, Sitemap).
  • Überschriften und Beschriftungen (2.4.6, Level AA)
    Überschriften und Labels müssen den Inhalt oder Zweck des Elements klar und verständlich beschreiben.
• Ausreichende Zeit (2.2.1, 2.2.2, Level A):
  • Wenn Aktionen zeitlich begrenzt sind (z.B. eine Session, die nach 5 Minuten Inaktivität abläuft), muss der Nutzer die Möglichkeit haben, die Zeit zu verlängern, zu stoppen oder zu deaktivieren.
  • Keine automatisch aktualisierenden oder bewegten Inhalte, es sei denn, der Nutzer kann sie steuern.
• Anfälle vermeiden (2.3.1, Level A)
  Wie bereits erwähnt, keine flackernden oder blinkenden Inhalte.

3. Verständlich (Understandable)

Informationen und die Bedienung der Benutzeroberfläche müssen verständlich und nachvollziehbar sein.

• Lesbarkeit (3.1.1, Level A; 3.1.2, Level A; 3.1.5, Level AAA – hier optional):
  • Standardsprache (3.1.1, Level A)
    Die Hauptsprache der Webseite muss im HTML-Code deklariert sein (z.B. <html lang=“de“>).
  • Sprachwechsel (3.1.2, Level A)
    Wenn sich die Sprache innerhalb eines Textes ändert, muss dies ebenfalls deklariert werden (z.B. <span lang=“en“>Hello World</span>).
  • Abkürzungen (3.1.4, Level AAA – hier optional)
    Abkürzungen sollten erklärt werden.
  • Klare und einfache Sprache
    Texte sollten in einfacher, klarer und verständlicher Sprache verfasst sein. Vermeiden Sie unnötigen Jargon.
• Vorhersagbarkeit (3.2.1, 3.2.2, Level A; 3.2.3, 3.2.4, Level AA):
  • Im Fokus keine Kontextänderung (3.2.2, Level A)
    Das Setzen des Fokus auf ein Element darf keine automatische Kontextänderung (z.B. das Öffnen eines Pop-ups oder die Weiterleitung zu einer anderen Seite) auslösen.
  • Konsistente Navigation (3.2.3, Level AA)
    Navigationselemente, Schaltflächen oder andere sich wiederholende Komponenten sollten auf allen Seiten konsistent angeordnet sein und die gleiche Funktionalität aufweisen.
• Eingabehilfe (3.3.1, 3.3.2, Level A; 3.3.3, 3.3.4, Level AA):
  • Fehlererkennung (3.3.1, Level A)
    Wenn Nutzereingaben Fehler enthalten (z.B. eine E-Mail-Adresse ohne „@“), müssen diese klar identifiziert und dem Nutzer mitgeteilt werden.
  • Beschriftungen oder Anweisungen (3.3.2, Level A)
    Alle Formularfelder müssen klare Beschriftungen (Labels) oder Anweisungen haben, die auch von assistiven Technologien erkannt werden.
  • Fehlervorschläge (3.3.3, Level AA)
    Wenn ein Fehler bei der Eingabe erkannt wird, sollten dem Nutzer Korrekturvorschläge gemacht werden (z.B. „Das Passwort muss mindestens 8 Zeichen enthalten“).
  • Hilfe (3.3.5, Level AAA – hier optional)
    Kontextsensitive Hilfen sollten verfügbar sein.

4. Robust (Robust)

Inhalte müssen so robust sein, dass sie von einer Vielzahl von Benutzeragenten, einschließlich assistiver Technologien, zuverlässig interpretiert werden können.

• Kompatibel (4.1.1, Level A; 4.1.2, Level A):
  • Parsing (4.1.1, Level A)
    Der Code (z.B. HTML, XML) muss so geschrieben sein, dass er korrekt von Browsern und assistiven Technologien geparst und interpretiert werden kann. Fehler im Code können die Zugänglichkeit beeinträchtigen.
  • Name, Rolle, Wert (4.1.2, Level A)
    Für alle Benutzeroberflächenkomponenten müssen Name, Rolle und Wert von assistiven Technologien programmatisch ermittelbar sein. Dies wird oft durch korrekte HTML-Semantik und den gezielten Einsatz von WAI-ARIA-Attributen erreicht.

Konkrete Umsetzung: Ihr Fahrplan zur BFSG- und WCAG 2.1 AA-Konformität

Die Umsetzung der Barrierefreiheit ist ein umfassender Prozess, der Planung, technische Anpassungen und kontinuierliche Pflege erfordert.

Schritt 1: Audit und Bestandsaufnahme – Wo stehen Sie aktuell?

Der erste und wichtigste Schritt ist eine umfassende Ist-Analyse Ihrer digitalen Produkte und Dienstleistungen.

• Internes Team aufbauen vs. externe Experten:
  • Intern
    Ideal für große Unternehmen mit ausreichenden Ressourcen. Aufbau von Expertise im eigenen Haus. Kann aber zeitaufwendig sein.
  • Extern
    Für viele Unternehmen, insbesondere KMUs, ist die Beauftragung spezialisierter Barrierefreiheits-Agenturen oder Berater der schnellste und effektivste Weg. Sie bringen das notwendige Fachwissen, die Tools und die Erfahrung mit.
• Tools für den ersten Check:
  • Automatisierte Scanner
    Tools wie Google Lighthouse (in Chrome integriert), axe DevTools (Browser-Erweiterung) oder WAVE (Online-Tool) können eine erste Einschätzung geben und offensichtliche Fehler finden (z.B. fehlende Alt-Texte, unzureichende Kontraste). Sie sind schnell und einfach zu bedienen.
  • Grenzen automatischer Tests
    Automatisierte Tools können nur etwa 30% der WCAG-Kriterien prüfen. Komplexe Interaktionen, logische Reihenfolgen oder die semantische Bedeutung von Inhalten können nur manuell oder durch Tests mit Nutzern geprüft werden.
• Erstellung einer Liste aller betroffenen Produkte und Dienstleistungen
  Welche Ihrer Angebote fallen unter das BFSG? Sammeln Sie alle Websites, Online-Shops, Apps, Self-Service-Terminals und digitalen Produkte.
• Identifikation von Barrieren und Lücken
  Führen Sie für jedes gelistete Angebot einen gründlichen Audit durch, entweder intern oder mit externer Unterstützung. Dokumentieren Sie alle gefundenen Mängel im Hinblick auf die WCAG 2.1 AA-Kriterien.

Schritt 2: Strategie und Planung – Der Weg zur Barrierefreiheit

Basierend auf Ihrem Audit entwickeln Sie einen detaillierten Plan.

• Ressourcenplanung
  Wie viel Zeit, Budget und Personal benötigen Sie? Barrierefreiheit ist keine einmalige Aufgabe, sondern ein fortlaufender Prozess.
• Priorisierung von Maßnahmen
  Nicht alle Mängel sind gleich kritisch. Priorisieren Sie die Behebung nach Wichtigkeit (Blocker für die Nutzung, häufige Fehler) und Aufwand (Quick Wins vs. langfristige Projekte).
• Integration in den Entwicklungsprozess
  Barrierefreiheit muss von Anfang an in alle Phasen der Produktentwicklung integriert werden – von der Konzeption und dem Design über die Entwicklung und Qualitätssicherung bis zur redaktionellen Pflege. „Shift Left“ – Barrierefreiheit so früh wie möglich in den Prozess verlagern – spart Zeit und Kosten.
• Schulung von Mitarbeitern: Das Wissen über Barrierefreiheit muss in allen relevanten Abteilungen verankert werden:
  • Entwickler
    Schulung in semantischem HTML, ARIA, JavaScript für Barrierefreiheit.
  • Designer
    Schulung in Farbkontrasten, Fokus-Indikatoren, logischem Layout, Icons.
  • Redakteure/Content Manager
    Schulung in aussagekräftigen Alt-Texten, verständlicher Sprache, Überschriftenhierarchie.
  • Produktmanager
    Schulung im gesamten Lebenszyklus der Barrierefreiheit.
  • Kundenservice
    Schulung im Umgang mit Anfragen von Nutzern mit Beeinträchtigungen.

Schritt 3: Technische Implementierung – Die WCAG 2.1 AA-Kriterien in der Praxis

Dieser Schritt beinhaltet die eigentliche Umsetzung der identifizierten Maßnahmen.

• Design-Phase:
  • Wireframes und Mockups
    Bereits in dieser frühen Phase müssen Barrierefreiheitsaspekte berücksichtigt werden. Wie sieht der Fokus aus? Wie werden Fehler visualisiert? Wie ist die Navigationsstruktur?
  • Farbpaletten
    Wählen Sie Farben, die ausreichende Kontraste bieten. Dies ist ein fundamentaler Design-Aspekt.
  • Interaktionsdesign
    Konzipieren Sie Interaktionen so, dass sie sowohl per Maus als auch per Tastatur und alternativen Eingabemethoden funktionieren. Denken Sie an den „Keyboard-Only“-Nutzer.
  • Schriftgrößen und Zeilenabstände
    Optimieren Sie diese für gute Lesbarkeit.
• Entwicklungs-Phase:
  • Semantisches HTML
    Nutzen Sie HTML-Elemente für ihre eigentliche Bedeutung. Ein Button ist ein <button>, kein <div> mit einem Klick-Handler. Eine Überschrift ist ein <h1> bis <h6>, kein fetter Text.
  • ARIA-Attribute (Accessible Rich Internet Applications)
    Wenn Sie komplexe, nicht-standardmäßige UI-Komponenten (z.B. Tabs, Akkordeons, modale Dialoge) entwickeln, die mit nativem HTML nicht ausreichend barrierefrei abgebildet werden können, setzen Sie ARIA-Attribute ein. Diese geben Screenreadern und anderen assistiven Technologien zusätzliche Informationen über die Rolle, den Zustand und die Eigenschaften von Elementen.

Wichtig: ARIA ist ein Ergänzungsmittel, kein Ersatz für semantisches HTML. „First rule of ARIA: If you can use a native HTML element or attribute with the semantics and behavior you require, use it instead.“

• Responsives Webdesign
  Moderne Websites sollten von Natur aus responsive sein, um auf verschiedenen Bildschirmgrößen optimal dargestellt zu werden. Dies ist eine Grundvoraussetzung für die Reflow-Anforderung der WCAG.
• Alt-Texte und Untertitel
  Stellen Sie sicher, dass Redakteure und Content-Manager das Wissen und die Werkzeuge haben, um Alt-Texte für Bilder zu pflegen und Untertitel für Videos bereitzustellen.
• Tastaturnavigation und sichtbarer Fokus
  Implementieren Sie CSS-Regeln, die den Fokus deutlich hervorheben. Achten Sie auf eine korrekte Tab-Reihenfolge (oft durch die Reihenfolge der Elemente im HTML-Code gegeben).
• Formulare
  Jedes Formularfeld benötigt ein <label>-Element, das korrekt mit dem id-Attribut des Eingabefeldes verknüpft ist. Fehlermeldungen müssen klar und programmatisch verknüpfbar sein.

Schritt 4: Testing und Qualitätssicherung – Prüfen, Prüfen, Prüfen

Die Qualitätssicherung ist entscheidend, um die Konformität zu überprüfen und sicherzustellen.

• Automatisierte Tests
  Nutzen Sie Tools wie Lighthouse, axe oder Siteimprove, um eine Basisprüfung durchzuführen. Diese erkennen schnell Fehler wie fehlende Alt-Texte, schlechte Kontraste oder fehlende Formular-Labels. Sie sind ein guter erster Filter.
• Manuelle Tests: Dies ist der wichtigste Teil.
  • Tastaturnavigation
    Navigieren Sie die gesamte Website nur mit der Tastatur. Können Sie alle Links, Buttons, Formularfelder erreichen und bedienen? Ist der Fokus immer sichtbar?
  • Screenreader-Tests
    Testen Sie die Website mit mindestens einem gängigen Screenreader (z.B. NVDA auf Windows, VoiceOver auf macOS/iOS, TalkBack auf Android). Verstehen Sie die Inhalte und die Navigation nur durch Zuhören?
  • Zoom-Tests
    Vergrößern Sie die Seite auf 200% und 400% (Browser-Zoom) und prüfen Sie, ob Inhalte sich überlappen oder Funktionalität verloren geht.
  • Farbenblindheit-Simulation
    Nutzen Sie Browser-Erweiterungen, um Ihre Website für verschiedene Formen der Farbenblindheit zu simulieren.
• Usability-Tests mit Menschen mit Beeinträchtigungeng
  Der Goldstandard. Nur durch direkte Tests mit Nutzern, die tatsächlich auf assistive Technologien angewiesen sind, können Sie sicherstellen, dass Ihr Angebot wirklich barrierefrei ist. Sie decken Probleme auf, die kein Tool und kein Experte alleine finden würde.
• Defect Management
  Behandeln Sie Barrierefreiheitsmängel wie andere Software-Bugs. Dokumentieren Sie sie, priorisieren Sie sie und beheben Sie sie systematisch.

Schritt 5: Dokumentation und Konformitätserklärung – Rechtliche Absicherung

Die Einhaltung des BFSG erfordert auch eine formelle Dokumentation.

• Der Konformitätsbewertungsprozess
  Unternehmen müssen nachweisen, dass ihre Produkte und Dienstleistungen den Barrierefreiheitsanforderungen entsprechen. Dies kann durch interne Prüfungen oder durch externe Zertifizierungen erfolgen.
• Erstellung der EU-Konformitätserklärung
  Für Produkte und Dienstleistungen, die dem BFSG unterliegen, muss eine EU-Konformitätserklärung ausgestellt werden. Darin erklärt der Hersteller oder Dienstleister, dass das Produkt oder die Dienstleistung den Anforderungen des BFSG (und damit der EAA-Richtlinie) entspricht.
• Die Barrierefreiheitserklärung
  Dies ist ein öffentlich zugängliches Dokument, das auf Ihrer Website prominent platziert werden muss. Es muss folgende Informationen enthalten:
  • Angabe, inwieweit das digitale Angebot barrierefrei ist.
  • Informationen über nicht barrierefreie Inhalte oder Funktionen und die Gründe dafür (z.B. „unverhältnismäßige Belastung“, technische Unmöglichkeit).
  • Einen Mechanismus, über den Nutzer Barrieren melden oder Feedback zur Barrierefreiheit geben können (Kontaktdaten, Formular).
  • Informationen zu Durchsetzungsverfahren oder Schlichtungsstellen.
• CE-Kennzeichnung für Produkte
  Für Produkte, die dem BFSG unterliegen, ist auch die CE-Kennzeichnung erforderlich, die die Konformität mit allen relevanten EU-Richtlinien (einschließlich Barrierefreiheit) bestätigt.

Schritt 6: Kontinuierliche Wartung und Weiterentwicklung

Barrierefreiheit ist kein Projekt mit einem festen Enddatum, sondern ein fortlaufender Prozess.

• Regelmäßige Audits und Anpassungen
  Jedes Mal, wenn Sie Ihre Website aktualisieren, neue Funktionen hinzufügen oder den Content ändern, kann dies neue Barrieren schaffen. Planen Sie regelmäßige Barrierefreiheits-Audits ein (z.B. jährlich oder halbjährlich).
• Monitoring der Barrierefreiheit
  Implementieren Sie Tools oder Prozesse, um die Barrierefreiheit kontinuierlich zu überwachen.
• Feedback-Mechanismen für Nutzer
  Machen Sie es Ihren Nutzern leicht, Ihnen Feedback zu Barrieren zu geben. Nehmen Sie dieses Feedback ernst und nutzen Sie es, um Ihr Angebot weiter zu verbessern.

Vorteile von Barrierefreiheit

Während die Einhaltung des BFSG eine rechtliche Notwendigkeit ist, bietet die Umsetzung von Barrierefreiheit auch enorme strategische Vorteile, die weit über die reine Compliance hinausgehen.

Erschließung neuer Kundensegmente

• Menschen mit Beeinträchtigungen
  Dies ist eine riesige, oft unterschätzte Zielgruppe. Weltweit leben mehr als 1 Milliarde Menschen mit einer Beeinträchtigung. In Deutschland sind es rund 7,8 Millionen anerkannte Schwerbehinderte, und die Dunkelziffer von Menschen mit leichteren Einschränkungen ist noch höher. Diese Menschen sind potenzielle Kunden, die Sie erreichen, wenn Ihre Angebote zugänglich sind.
• Aging Population
  Die Gesellschaft wird älter. Mit zunehmendem Alter nehmen oft Seh-, Hör- und motorische Fähigkeiten ab. Was für Menschen mit einer Beeinträchtigung barrierefrei ist, ist oft auch für ältere Menschen leichter nutzbar – größere Schrift, bessere Kontraste, einfachere Navigation.
• Situative Beeinträchtigung
  Barrierefreiheit hilft nicht nur Menschen mit dauerhaften Beeinträchtigungen. Auch Menschen in bestimmten Situationen profitieren: Jemand, der sein Smartphone bei direkter Sonneneinstrahlung nutzt (Kontrast), oder jemand, der ein Video in einer lauten Umgebung ohne Kopfhörer ansehen möchte (Untertitel). Ein gebrochener Arm kann die Mausnutzung erschweren, sodass Tastaturbedienung plötzlich essenziell wird.

SEO-Vorteile durch Barrierefreiheit

Suchmaschinen wie Google legen immer mehr Wert auf die Nutzererfahrung. Da Barrierefreiheit die Nutzererfahrung für alle verbessert, wirkt sich dies positiv auf Ihr SEO aus:

• Bessere Indexierung durch Suchmaschinen
  Semantisch korrektes HTML (z.B. richtige Überschriftenhierarchie, Alt-Texte für Bilder) hilft Suchmaschinen, den Inhalt und die Struktur Ihrer Webseite besser zu verstehen. Dies kann zu besseren Rankings führen.
• Niedrigere Absprungraten und längere Verweildauer
  Eine barrierefreie Website ist für alle Nutzer einfacher zu bedienen und zu verstehen. Das führt dazu, dass Besucher länger auf Ihrer Seite bleiben und seltener sofort wieder abspringen, was positive Signale an Suchmaschinen sendet.
• Verbessertes Ranking
  Google und andere Suchmaschinen belohnen Websites, die eine gute User Experience bieten. Barrierefreiheit ist ein wichtiger Bestandteil davon.

Image- und Reputationsgewinn

• Soziale Verantwortung (CSR)
  Unternehmen, die sich für Barrierefreiheit einsetzen, zeigen soziale Verantwortung und Engagement für Inklusion. Dies verbessert ihr Image bei Kunden, Partnern und Mitarbeitern.
• Positives Unternehmensbild
  Eine barrierefreie Website signalisiert, dass Ihr Unternehmen Werte wie Zugänglichkeit, Vielfalt und Respekt schätzt.
• Abgrenzung vom Wettbewerb
  Gerade jetzt, da das BFSG noch relativ neu ist, können Sie sich durch frühzeitige und vorbildliche Umsetzung von Ihren Mitbewerbern abheben.

Vermeidung rechtlicher Risiken und Kosten

Der offensichtlichste Vorteil: Sie vermeiden die teuren Konsequenzen der Nichteinhaltung.

• Bußgelder
  Das BFSG sieht bei Verstößen empfindliche Bußgelder vor, die bis zu 100.000 Euro betragen können.
• Abmahnungen und Klagen
  Wettbewerber oder Verbraucherorganisationen können Unternehmen abmahnen oder verklagen, wenn ihre Angebote nicht barrierefrei sind. Dies führt zu hohen Anwalts- und Gerichtskosten.
• Unterlassungsklagen
  Gerichte können die Einstellung des Angebots anordnen, bis die Barrieren beseitigt sind.
• Verkaufsverbote
  Nicht barrierefreie Produkte dürfen nach der Übergangsfrist nicht mehr in Verkehr gebracht oder verkauft werden.
• Reputationsverlust
  Ein schlechtes Image durch negative Schlagzeilen oder Klagen kann das Vertrauen von Kunden und Partnern nachhaltig schädigen.
• Ausschluss von öffentlichen Ausschreibungen
  Viele öffentliche Aufträge erfordern bereits jetzt oder werden zukünftig die Einhaltung von Barrierefreiheitsstandards voraussetzen.

Häufige Fehler und Fallstricke bei der Umsetzung der Barrierefreiheit

Trotz der besten Absichten lauern bei der Umsetzung der Barrierefreiheit einige typische Fehler, die Unternehmen vermeiden sollten.

Fokus nur auf automatisierte Tests

Automatisierte Barrierefreiheitstools sind fantastisch für einen ersten Check und um grundlegende Probleme zu finden. Aber sie erkennen nur einen Bruchteil der Barrieren (oft nur 30-40%). Sie können nicht beurteilen, ob ein Alt-Text aussagekräftig ist, ob die Navigation logisch ist oder ob ein Screenreader eine komplexe Interaktion versteht. Manuelle Tests (mit Tastatur und Screenreader) und vor allem Usability-Tests mit Menschen mit Beeinträchtigungen sind unerlässlich, um echte Barrierefreiheit zu erreichen.

Barrierefreiheit als einmaliges Projekt betrachten

Barrierefreiheit ist kein Kästchen, das man abhakt und dann vergisst. Jede neue Funktion, jede Änderung am Design, jeder neue Inhalt kann neue Barrieren schaffen. Es ist ein kontinuierlicher Prozess, der in die täglichen Abläufe und den gesamten Lebenszyklus digitaler Produkte integriert werden muss. Planen Sie regelmäßige Überprüfungen und Schulungen.

Unzureichende Schulung der Mitarbeiter

Wenn nur eine kleine Gruppe von Spezialisten für Barrierefreiheit zuständig ist, während Designer, Entwickler, Redakteure und Tester nicht geschult sind, entstehen immer wieder neue Probleme. Das Wissen über Barrierefreiheit muss in allen relevanten Abteilungen verankert sein, damit es in jedem Schritt der Erstellung digitaler Inhalte berücksichtigt wird.

Kompromisse bei den Standards

Das BFSG verlangt WCAG 2.1 AA. Versuchen Sie nicht, mit weniger auszukommen, indem Sie nur die A-Kriterien erfüllen oder bestimmte AA-Kriterien ignorieren. Dies kann zu rechtlichen Problemen führen und ist nicht im Sinne der Inklusion.

Den Faktor „Mensch“ vergessen

Bei all den technischen Richtlinien und Checklisten darf man nie vergessen, dass Barrierefreiheit für echte Menschen gemacht wird. Es geht darum, ihre Nutzungserfahrung zu verbessern und ihnen die Teilhabe zu ermöglichen. Ein rein technischer Ansatz, der den menschlichen Faktor ignoriert, kann zu einer Website führen, die zwar technisch „konform“ ist, aber in der Praxis unbrauchbar für Menschen mit Beeinträchtigungen.

Die Barrierefreiheitserklärung vernachlässigen

Die Barrierefreiheitserklärung ist mehr als nur ein Pflichtdokument. Sie ist Ihre Chance, transparent zu kommunizieren, wo Sie stehen, und einen Feedback-Kanal für Nutzer zu bieten. Eine unvollständige, unklare oder schwer auffindbare Erklärung kann Misstrauen schüren und rechtliche Probleme nach sich ziehen.

Weiterführende Ressourcen und Unterstützung

Der Weg zur digitalen Barrierefreiheit kann komplex sein, aber Sie müssen ihn nicht alleine gehen. Es gibt zahlreiche Ressourcen und Unterstützungsmöglichkeiten.

Nationale und internationale Anlaufstellen

• Bundesfachstelle Barrierefreiheit
  Die zentrale Anlaufstelle in Deutschland für Fragen zur Barrierefreiheit. Sie bietet Informationen, Beratung und ist eine wichtige Schnittstelle zwischen Verwaltung, Unternehmen und Menschen mit Beeinträchtigungen.
• Behindertenbeauftragte der Bundesregierung / der Länder
  Bieten ebenfalls Informationen und setzen sich für die Rechte von Menschen mit Beeinträchtigungen ein.
• W3C/WAI (Web Accessibility Initiative)
  Die offizielle Quelle für die WCAG-Richtlinien und viele weitere Ressourcen zur Web-Barrierefreiheit.
• BITV (Barrierefreie-Informationstechnik-Verordnung)
  Die BITV ist die deutsche Verordnung zur Barrierefreiheit von Informationstechnik und konkretisiert die Anforderungen für öffentliche Stellen. Auch wenn sie nicht direkt für alle privaten Unternehmen gilt, dient sie als wichtiger Referenzpunkt und basiert ebenfalls auf den WCAG.

Tools und Software für Barrierefreiheitstests

• Browser-Erweiterungen:
  • Lighthouse (integriert in Chrome DevTools)
    Bietet einen grundlegenden Audit für Performance, SEO und Barrierefreiheit.
  • axe DevTools (für Chrome, Firefox, Edge)
    Eine leistungsstarke Erweiterung, die direkt im Browser Barrierefreiheitsmängel erkennt und Vorschläge zur Behebung macht.
  • WAVE (Web Accessibility Evaluation Tool)
    Eine weitere beliebte Browser-Erweiterung und ein Online-Tool, das visuelle Overlays verwendet, um Barrierefreiheitsprobleme und -merkmale anzuzeigen.
• Screenreader (für manuelle Tests):
  • NVDA (NonVisual Desktop Access)
    Kostenloser, quelloffener Screenreader für Windows.
  • JAWS (Job Access With Speech)
    Kommerzieller, weit verbreiteter Screenreader für Windows.
  • VoiceOver
    Integrierter Screenreader auf Apple-Geräten (macOS, iOS).
  • TalkBack
    Integrierter Screenreader auf Android-Geräten.
• Kontrast-Checker
  Online-Tools und Desktop-Anwendungen, die Ihnen helfen, die Kontrastverhältnisse Ihrer Farbkombinationen zu überprüfen.

Dienstleister und Beratungsagenturen

Gerade für Unternehmen, die keine eigene Expertise aufbauen können oder wollen, ist die Zusammenarbeit mit spezialisierten Beratungsagenturen für Barrierefreiheit eine sinnvolle Investition. Sie bieten:

• Umfassende Barrierefreiheits-Audits (manuell und automatisiert).
• Strategieentwicklung und Roadmap-Erstellung.
• Technische Umsetzung und Unterstützung bei der Fehlerbehebung.
• Schulungen für Mitarbeiter.
• Begleitung bei der Erstellung der Konformitätserklärung und Barrierefreiheitserklärung.
• Rechtliche Beratung in Zusammenarbeit mit spezialisierten Anwälten.

Die Investition in externe Expertise kann langfristig Kosten sparen und die Einhaltung der gesetzlichen Anforderungen sicherstellen.

Fazit: Barrierefreiheit – Eine Notwendigkeit und eine Chance

Das Barrierefreiheitsstärkungsgesetz (BFSG) und die Web Content Accessibility Guidelines (WCAG 2.1 AA) sind mehr als nur neue Regeln, die es ab dem 28. Juni 2025 einzuhalten gilt. Sie sind ein Aufruf zur Veränderung, eine Chance für Unternehmen, ihre Angebote für alle Menschen zugänglich zu machen und damit nicht nur rechtliche Compliance zu gewährleisten, sondern auch neue Marktpotenziale zu erschließen und ihr Image als verantwortungsvolles und inklusives Unternehmen zu stärken.

Die digitale Welt entwickelt sich ständig weiter, und mit ihr auch die Erwartungen an Barrierefreiheit. Wer jetzt handelt und Barrierefreiheit als integralen Bestandteil seiner digitalen Strategie versteht, ist nicht nur auf der sicheren Seite, sondern auch bestens positioniert für die Zukunft. Beginnen Sie frühzeitig mit der Analyse, planen Sie strategisch und investieren Sie in die Ausbildung Ihrer Teams. Barrierefreiheit ist eine Win-Win-Situation: Sie machen Ihr Geschäft zugänglicher, Ihre Kunden zufriedener und stärken Ihre Position im Markt.