Barrierefreie Website ab 2025/2026: Die BFSG-Checkliste für Unternehmen & Online-Shops

Seit dem 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland verbindlich in Kraft getreten. Was viele Jahre lang primär für Bundesbehörden und öffentliche Verwaltungen galt, betrifft nun die gesamte gewerbliche Wirtschaft: Wer Produkte oder Dienstleistungen online anbietet, Tickets verkauft, Termine buchen lässt oder einen Webshop betreibt, muss seinen Webauftritt barrierefrei nach den Kriterien der WCAG 2.2 Level AA gestalten. Doch was bedeutet das in der Praxis? Wer ist wirklich betroffen, welche Ausnahmen gelten für Kleinstbetriebe, welche Bußgelder drohen – und wie lässt sich eine bestehende Website ohne unbezahlbaren Relaunch rechtssicher und benutzerfreundlich anpassen? In diesem ausführlichen Praxisleitfaden klären wir alle rechtlichen und technischen Fragen, decken die zehn häufigsten Barrierefreiheits-Sünden auf und geben Ihnen eine praxiserprobte 15-Punkte-Checkliste an die Hand.

1. Was das Barrierefreiheitsstärkungsgesetz (BFSG) wirklich bedeutet

In Deutschland leben rund 7,8 Millionen schwerbehinderte Menschen, hinzu kommen Millionen Personen mit temporären oder altersbedingten Einschränkungen – von nachlassender Sehkraft über motorische Beeinträchtigungen bis hin zu kognitiven Barrieren. Jahrzehntelang war Barrierefreiheit im Internet eine noble Empfehlung für private Unternehmen, während sich der Staat mit der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) selbst strengere Maßstäbe auferlegte.

Mit dem Barrierefreiheitsstärkungsgesetz (BFSG), das auf der europäischen Richtlinie 2019/882 (dem sogenannten European Accessibility Act, EAA) basiert, hat der Gesetzgeber die Spielregeln grundlegend geändert. Seit dem Stichtag 28. Juni 2025 müssen Produkte und Dienstleistungen, die für Verbraucher bestimmt sind, zwingend barrierefrei zugänglich sein.

Das Gesetz ist kein unverbindlicher Verhaltenskodex. Es ist ein reguläres Bundesgesetz mit strengen Marktüberwachungsmechanismen, behördlichen Kontrollen und drastischen Bußgeldvorschriften. Für Website-Betreiber bedeutet dies: Barrierefreiheit ist von einem „Nice-to-have“ für gemeinnützige Organisationen zu einer rechtlichen Grundvoraussetzung wie das Impressum oder die DSGVO geworden.

2. Wer betroffen ist – und wer unter die Ausnahmeregelung fällt

In Unternehmerkreisen kursieren noch immer zahlreiche Missverständnisse darüber, wer das Gesetz überhaupt beachten muss. Die Faustformel lautet: Bieten Sie über Ihre Website Dienstleistungen im elektronischen Geschäftsverkehr an Endverbraucher (B2C) an, sind Sie betroffen.

Unter den Begriff der Dienstleistungen im elektronischen Geschäftsverkehr fällt im Sinne des BFSG (§ 2 Abs. 2 Nr. 5 BFSG):

• Klassische Online-Shops: Jeder Warenkorb, jeder Checkout-Prozess, jede Produktdetailseite, über die Verbraucher Waren bestellen können.
• Digitale Buchungssysteme: Terminvereinbarungen beim Arzt, Reservierungs-Tools für Restaurants, Zimmerbuchungen in Hotels, Ticketverkäufe für Veranstaltungen.
• Personenbeförderung & Mobilität: Webseiten von Fahrdiensten, Reiseanbietern, Verkehrsbetrieben.
• Finanz- und Bankdienstleistungen: Online-Banking, Kreditrechner mit Antragsstrecke, Versicherungsabschlüsse.
• Kundenportale & SaaS-Anwendungen: Jeder geschützte Login-Bereich, in dem Verbraucher Verträge verwalten, Rechnungen einsehen oder Leistungen buchen.

Die Kleinstunternehmer-Ausnahme (§ 3 Abs. 2 BFSG)

Der Gesetzgeber hat für kleine Betriebe eine bürokratische Entlastung vorgesehen. Von den Pflichten für Dienstleistungen sind Kleinstunternehmen ausgenommen, die beide der folgenden Kriterien erfüllen:

1. Beschäftigung von weniger als 10 Mitarbeitern (Vollzeitäquivalente) UND
2. Jahresumsatz von höchstens 2 Millionen Euro ODER Jahresbilanzsumme von höchstens 2 Millionen Euro.

3. Bußgelder, Abmahnungen & Rechtsrisiken: Was bei Verstößen passiert

Viele Unternehmer unterschätzen die Härte der Sanktionen. Das BFSG sieht ein mehrstufiges Kontroll- und Durchsetzungssystem vor, das von behördlichen Eingriffen bis hin zum wettbewerbsrechtlichen Abmahnwesen reicht:

1. Behördliche Bußgelder bis zu 100.000 Euro

Jedes Bundesland hat zuständige Marktüberwachungsbehörden benannt. Diese Behörden prüfen Webseiten stichprobenartig oder auf Beschwerde von Bürgern hin. Stellen die Prüfer Barrieren fest, erlassen sie zunächst Mängelbeseitigungsanordnungen mit Fristsetzung. Werden diese Fristen ignoriert oder wird Barrierefreiheit vorsätzlich verweigert, drohen empfindliche Bußgelder nach § 37 BFSG von bis zu 100.000 Euro.

2. Anordnung der Betriebseinstellung (Sperrung des Online-Angebots)

Die Marktüberwachungsbehörden haben nach § 27 BFSG das Recht, das Inverkehrbringen einer Dienstleistung zu untersagen. Im Klartext: Die Behörde kann anordnen, dass Ihr Online-Shop oder Ihr Buchungssystem vorübergehend vom Netz genommen werden muss, bis die barrierefreie Nutzbarkeit nachgewiesen ist. Für ein E-Commerce-Unternehmen bedeutet dies den sofortigen Totalausfall des Umsatzes.

3. Abmahnungen durch Verbände und Mitbewerber (UWG)

Da das BFSG als Marktverhaltensregelung im Interesse der Verbraucher eingestuft wird, stellen Verstöße unlautere geschäftliche Handlungen nach § 3a des Gesetzes gegen den unlauteren Wettbewerb (UWG) dar. Qualifizierte Wirtschaftsverbände, Verbraucherschutzorganisationen und Behindertenverbände besitzen ein gesetzliches Klagerecht. Die Kosten für Unterlassungserklärungen, anwaltliche Gebühren und die erzwungene Sofort-Nachbesserung belasten die Liquidität massiv.

4. WCAG 2.2 Level AA: Die 4 Säulen digitaler Barrierefreiheit (POUR)

Um Barrierefreiheit messbar und technisch überprüfbar zu machen, stützt sich das Gesetz auf die Richtlinien des World Wide Web Consortiums (W3C). Die Web Content Accessibility Guidelines (WCAG 2.2) basieren auf vier fundamentalen Prinzipien, die im Englischen das Akronym POUR bilden:

1. Wahrnehmbarkeit (Perceivable)

Informationen und Benutzeroberflächen-Komponenten müssen den Nutzern so präsentiert werden, dass sie sie mit ihren Sinnen wahrnehmen können. Nichts darf für einen menschlichen Sinn unsichtbar oder unhörbar sein.

• Textalternativen: Jedes Bild, jede Grafik und jedes Icon mit Informationsgehalt benötigt einen aussagekräftigen Alternativtext (Alt-Attribut).
• Zeitbasierte Medien: Videos benötigen zwingend Untertitel; reine Audiodateien verlangen Texttranskripte.
• Anpassbarkeit: Inhalte müssen auf verschiedene Weisen dargestellt werden können (z. B. Hoch- und Querformat, Vergrößerung auf 200 %), ohne dass Informationen oder Strukturen verloren gehen.
• Unterscheidbarkeit: Starker Kontrast zwischen Vordergrund (Schrift) und Hintergrund (mindestens 4,5:1 bei Fließtext). Farbe darf niemals die einzige Informationsträgerin sein (z. B. rot markierte Pflichtfelder ohne Textzusatz).

2. Bedienbarkeit (Operable)

Die Benutzeroberfläche und die Navigation dürfen nicht davon abhängen, dass der Nutzer eine Maus oder einen Touchscreen bedienen kann.

• Tastatur-Vollzugänglichkeit: Jede Funktion (Menü öffnen, Warenkorb-Checkout, Video starten) muss ausschließlich mit der Tab-, Pfeil-, Enter- und Leertaste erreichbar und steuerbar sein.
• Keine Tastaturfallen: Der Fokus darf niemals in einem Element (wie einem Cookie-Banner oder Modal) hängenbleiben, ohne dass man es mit der Tastatur (z. B. ESC) verlassen kann.
• Ausreichend Zeit: Nutzer müssen genug Zeit haben, um Inhalte zu lesen oder Interaktionen auszuführen (keine aggressiven Countdown-Timer ohne Pausenfunktion).
• Auffindbarkeit: Es muss mehrere Wege geben, eine Unterseite zu finden (z. B. Navigation, Breadcrumbs, HTML-Sitemap oder Volltextsuche).
• Zielgrößen für Touch-Elemente: Klickbare Schaltflächen müssen groß genug sein (mindestens 24x24 Pixel nach WCAG 2.2; ideal sind 44x44 Pixel), damit Menschen mit Tremor oder auf mobilen Geräten nicht versehentlich danebenklicken.

3. Verständlichkeit (Understandable)

Informationen und die Bedienung der Benutzeroberfläche müssen für den Menschen logisch nachvollziehbar und berechenbar sein.

• Lesbarkeit: Die Hauptsprache der Website muss im HTML-Header deklariert sein (<html lang="de">). Fachbegriffe oder Abkürzungen müssen erklärt werden.
• Vorhersehbarkeit: Wenn ein Nutzer ein Element fokussiert oder ein Formularfeld ausfüllt, darf die Seite nicht unvermittelt den Kontext wechseln, unaufgefordert neue Fenster öffnen oder Formulare automatisch absenden.
• Eingabehilfe: Fehler in Formularen müssen präzise und in menschlicher Sprache beschrieben werden (z. B. „Bitte geben Sie eine gültige E-Mail-Adresse mit @-Zeichen ein“ statt „Fehlercode 402“), und Vorschläge zur Korrektur müssen angeboten werden.

4. Robustheit (Robust)

Inhalte müssen so robust und standardkonform programmiert sein, dass sie von einer Vielzahl von Benutzeragenten, einschließlich aktueller und zukünftiger Hilfsmittel (Assistive Technologies wie Screenreader, Braillezeilen oder Spracheingabesoftware), zuverlässig interpretiert werden können.

• Semantisches HTML: Verwendung korrekter HTML5-Tags (<main>, <nav>, <article>, <button>) statt div-Wüsten mit künstlichen Klick-Events.
• Statusmeldungen & ARIA: Dynamische Änderungen (wie „Produkt wurde in den Warenkorb gelegt“) müssen Screenreadern über ARIA-Live-Regionen mitgeteilt werden.

5. Die 10 häufigsten Barrierefreiheits-Fehler auf deutschen Unternehmens-Websites

In unserer täglichen Agenturpraxis bei Hauptstadt Homepage analysieren wir hunderte bestehende Websites. Über 92 % aller nicht optimierten Seiten fallen durch einen standardisierten WCAG-2.2-Audit. Das Erstaunliche daran: Oft sind es gar nicht hochkomplexe Spezialfunktionen, sondern elementare handwerkliche Versäumnisse, die zur Nicht-Konformität führen.

6. Farbkontraste, Typografie & Skalierbarkeit: So sieht barrierefreies Design aus

Ein weit verbreiteter Irrglaube lautet: „Barrierefreie Webseiten sehen altbacken und hässlich aus.“ Das Gegenteil ist der Fall. Professionelles barrierefreies Design zeichnet sich durch erstklassige typografische Hierarchie, klare visuelle Führung und hochmoderne Ästhetik aus.

Die mathematischen Kontrastregeln der WCAG 2.2

• Normaler Fließtext (unter 18pt bzw. 24px): Benötigt ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund.
• Großer Text (ab 18pt bzw. ab 14pt / 18,5px fett): Benötigt ein Mindestkontrastverhältnis von 3:1.
• Grafische Benutzeroberflächen-Elemente: Rahmen von Eingabefeldern, Icons mit Steuerungsfunktion und aktive Statusindikatoren müssen mindestens ein Kontrastverhältnis von 3:1 zu benachbarten Farben aufweisen.

Relative Einheiten für Schriftgrößen

Vermeiden Sie feste Pixelwerte (px) für Schriftgrößen im CSS. Verwenden Sie konsequent relative Einheiten wie rem (Root Em). Nur so passt sich die gesamte Seite harmonisch an, wenn ein Nutzer in den Systemeinstellungen seines Betriebssystems oder Browsers eine größere Basisschriftgröße hinterlegt hat.

7. Tastaturbedienbarkeit & sichtbare Foki: Der Test ohne Maus

Menschen mit motorischen Beeinträchtigungen, chronischem Zittern oder Verletzungen bedienen ihren Computer oft ohne Maus. Sie nutzen ausschließlich die Tastatur, Einhand-Keyboards, Mundstäbe oder Augensteuerungs-Software. Für diese Zielgruppe ist die Tastatur-Vollzugänglichkeit die wichtigste Voraussetzung überhaupt.

Die drei goldenen Regeln der Tastaturbedienung

1. Alles muss erreichbar sein: Jeder Link, jeder Button, jedes Akkordeon-Element und jeder Formular-Submit muss über die Tab-Taste erreicht werden können. Die Aktivierung erfolgt mit Enter (für Links) bzw. Leertaste / Enter (für Buttons).
2. Logische Tab-Reihenfolge: Der Tab-Fokus muss der visuellen Lesereihenfolge der Seite folgen (von links nach rechts, von oben nach unten). Wenn durch CSS-Flexbox (order) oder absolute Positionierung die visuelle Reihenfolge von der DOM-Reihenfolge abweicht, entsteht Verwirrung.
3. Deutlicher Fokus-Indikator: Das aktuell aktive Element muss zu jedem Zeitpunkt optisch unübersehbar hervorgehoben sein.

Der Skip-To-Content-Link

Ein unverzichtbares Feature für Tastaturnutzer ist der sogenannte Skip-Link. Er wird ganz oben im Quellcode platziert, ist standardmäßig außerhalb des Bildschirms positioniert und wird erst sichtbar, wenn der Nutzer nach dem Laden der Seite zum ersten Mal die Tab-Taste drückt:

8. Screenreader-Tauglichkeit: Warum semantisches HTML entscheidet

Ein Screenreader (wie JAWS, NVDA oder Apple VoiceOver) liest blinden Nutzern den Inhalt einer Website synthetisch vor. Doch ein Screenreader liest nicht einfach Pixel ab, sondern wandert durch den Dokumentenbaum (Accessibility Tree). Wenn dieser Baum unstrukturiert ist, scheitert die Nutzung.

Die Bedeutung korrekter Landmark-Elemente

Blinde Nutzer navigieren nicht linear von oben nach unten. Sie nutzen Tasten-Kürzel, um direkt von Region zu Region zu springen. Verwenden Sie daher konsequent echte HTML5-Landmarks:

• <header> für den Kopfbereich der Seite.
• <nav aria-label="Hauptnavigation"> für Navigationsbereiche.
• <main id="main-content"> für den eigentlichen, einzigartigen Hauptinhalt der Unterseite.
• <aside aria-label="Seitenleiste"> für weiterführende Inhalte und Widgets.
• <footer> für Impressum, Datenschutz und Kontaktangaben.

Strikte Überschriftenhierarchie ohne Lücken

Screenreader-Nutzer lassen sich häufig ein Inhaltsverzeichnis aller Überschriften anzeigen, um die Seite zu überfliegen. Daher gilt die goldene Regel: Eine einzige <h1> pro Seite, gefolgt von logischen <h2>-Kapiteln und untergeordneten <h3>-Abschnitten. Überspringen Sie niemals Ebenen (z. B. von H2 direkt auf H4, bloß weil die Schriftgröße im CSS gerade passte).

9. Barrierefreie Formulare: Checkouts & Kontaktfelder ohne Hürden

Das Herzstück eines jeden Online-Shops oder einer Dienstleister-Website sind Formulare: Kontaktformulare, Buchungskalender, Zahlungsstrecken. Hier entscheidet sich, ob ein Interessent zu einem zahlenden Kunden wird oder die Seite frustriert verlässt.

1. Echte Labels statt reiner Platzhalter

Jedes Formularfeld muss über ein <label>-Element mit dem entsprechenden Eingabefeld verknüpft sein:

2. Autocomplete-Attribute unterstützen

Nach WCAG 2.2 (Kriterium 1.3.5) müssen Formularfelder, die persönliche Daten abfragen, den Zweck der Eingabe maschinenlesbar deklarieren. Browser und Hilfsmittel können so Felder wie Name, Straße, Postleitzahl und Kreditkartennummer automatisch ausfüllen – eine enorme Hilfe für Menschen mit motorischen oder kognitiven Einschränkungen.

3. Verständliche Fehlermeldungen

Wird ein Formular fehlerhaft ausgefüllt, muss der Fehler sofort und präzise benannt werden:

• Der Fehlertext muss direkt beim betreffenden Feld stehen und per aria-describedby mit dem Input verknüpft sein.
• Das fehlerhafte Feld erhält das Attribut aria-invalid="true".
• Nach dem Absenden wird der Fokus automatisch auf das erste fehlerhafte Feld gesetzt.

10. Alt-Texte, Audio & Video-Untertitel: Multimedia barrierefrei umsetzen

Bilder transportieren Emotionen und Markenwerte. Doch für einen Screenreader ist eine Bilddatei erst einmal nur ein leerer Kasten, sofern kein alt-Attribut existiert.

Die drei Kategorien von Bildern und wie man sie auszeichnet

1. Informative Bilder: Bilder, die eine Aussage vermitteln (z. B. ein Schaubild oder ein Foto des Teams). Hier beschreibt der Alt-Text präzise den Inhalt: alt="Benjamin Machalz im Gespräch mit Kunden in der Berliner Agentur".
2. Dekorative Bilder: Reine Schmuckgrafiken, abstrakte Hintergrund-Blobs oder Linien. Diese MÜSSEN ein leeres Alt-Attribut erhalten: alt="". Der Screenreader ignoriert das Bild dann lautlos. Fehlt das Attribut völlig, liest der Screenreader den Dateinamen („hero-graphic-final-v2.png“) vor!
3. Funktionale Bilder: Icons, die als Link oder Button dienen (z. B. eine Lupe für die Suche). Hier gehört die Funktion in den Alt-Text oder ein ARIA-Label: alt="Website durchsuchen".

11. Warum Accessibility-Plugins & Widgets („Overlays“) rechtlich scheitern

Mit dem Herannahen des BFSG ist ein florierender Markt für sogenannte „Accessibility-Overlays“ entstanden. Anbieter werben mit Versprechen wie: „Ein Zeile Code einbinden und Ihre Website ist sofort 100 % barrierefrei und abmahnsicher!“ – meist visualisiert durch ein kleines blaues Rollstuhl- oder Mensch-Icon in der Bildschirmecke.

Die nüchterne Wahrheit: Diese Widgets sind eine gefährliche Scheinlösung.

Echte Barrierefreiheit kann nicht wie ein Pflaster über eine kaputte Struktur geklebt werden. Sie muss im Quellcode, im semantischen HTML und im CSS des Themes verankert sein.

12. Die große WCAG 2.2 Kriterien-Tabelle für den Unternehmens-Check

Die folgende Tabelle fasst die wichtigsten Anforderungen der WCAG 2.2 Level AA zusammen, stellt die typischen Praxisfehler gegenüber und zeigt, wie viel Aufwand die Behebung in einem professionellen Webdesign-Projekt erfordert:

13. Der 10-Schritte-Fahrplan: So machen Sie Ihre Website barrierefrei

Die Umsetzung von digitaler Barrierefreiheit muss kein unüberschaubares Mammutprojekt sein. Mit einem strukturierten Vorgehen lassen sich 80 % aller Barrieren oft innerhalb weniger Werktage beseitigen:

14. Die Erklärung zur Barrierefreiheit: Gesetzliche Pflichtangaben & Muster

Ähnlich wie das Impressum nach § 5 DDG (ehemals TMG) und die Datenschutzerklärung nach DSGVO verlangt das Barrierefreiheitsstärkungsgesetz eine offizielle Erklärung zur Barrierefreiheit. Sie muss von jeder Unterseite aus mit einem Klick erreichbar sein (idealerweise im Footer).

Eine rechtskonforme Erklärung zur Barrierefreiheit muss zwingend folgende vier Abschnitte enthalten:

1. Stand der Vereinbarkeit: Die explizite Aussage, inwieweit die Website mit den Anforderungen der WCAG 2.2 Level AA bzw. EN 301 549 übereinstimmt (vollständig vereinbar, größtenteils vereinbar oder nicht vereinbar).
2. Nicht barrierefreie Inhalte: Eine transparente Auflistung aller Bereiche, die aktuell noch Barrieren enthalten, samt Begründung (z. B. ältere PDF-Dateien zum Download oder externe Drittanbieter-Karten).
3. Erstellungsdatum & Prüfmethode: Das Datum der Erstellung/Aktualisierung der Erklärung sowie die angewendete Bewertungsmethode (z. B. Selbstbewertung oder Audit durch eine spezialisierte Agentur).
4. Feedback-Mechanismus & Schlichtungsverfahren: Eine konkrete E-Mail-Adresse oder ein Kontaktformular, an das sich Nutzer wenden können, um Barrieren zu melden, sowie der Verweis auf die zuständige Schlichtungsstelle des jeweiligen Bundeslandes.

15. Kostenlose Prüf-Tools für Entwickler & Website-Betreiber

Um Barrieren aufzuspüren, benötigen Sie keine teure Spezialsoftware. Die folgenden frei verfügbaren Werkzeuge decken bereits einen Großteil der typischen Fehlerquellen zuverlässig ab:

• axe DevTools (Browser-Erweiterung für Chrome & Firefox): Das weltweit führende und verlässlichste Entwickler-Tool für automatisierte Barrierefreiheits-Tests. Liefert praktisch null Fehlalarme und zeigt direkt die betroffenen Code-Zeilen.
• WAVE (Web Accessibility Evaluation Tool): Ein hervorragendes visuelles Tool der Utah State University. Blendet Symbole direkt in die Website ein, um fehlende Alt-Texte, Kontrastprobleme und Strukturlücken anzuzeigen.
• Google Chrome Lighthouse: Im Inspektor jedes Chrome-Browsers integriert. Vergibt einen Accessibility-Score von 0 bis 100 und gibt konkrete Handlungsempfehlungen.
• Colour Contrast Analyser (CCA): Ein kleines Desktop-Programm für Windows und Mac, mit dem Sie per Pipette jede beliebige Farbkombination auf Konformität nach WCAG 2.2 prüfen können.
• NVDA (NonVisual Desktop Access): Ein komplett kostenloser Open-Source-Screenreader für Windows, um die eigene Seite wie ein blinder Nutzer auditieren zu können. Auf dem Mac ist VoiceOver (mit Cmd + F5 aktivierbar) bereits vorinstalliert.

16. Häufig gestellte Fragen zur barrierefreien Website (FAQ)

EXPERTE & AUTOR

Benjamin Machalz

Gründer und Inhaber von Hauptstadt Homepage in Berlin. Mit über 15 Jahren praktischer Erfahrung in moderner Webentwicklung, strategischem SEO und barrierefreiem Webdesign begleitet er Handwerksbetriebe, Kanzleien und den Mittelstand bei zukunftssicheren, BFSG-konformen Weblösungen.