Website barrierefrei machen: BFSG-Pflicht und Umsetzung

Welche BFSG- und WCAG-2.1-AA-Anforderungen Deine Website jetzt erfüllen muss

Ab 28. Juni 2025 ist Barrierefreiheit in Deutschland keine Option mehr – das Barrierefreiheitsstärkungsgesetz (BFSG) macht WCAG 2.1 Level AA zur Rechtsplicht. Das BFSG setzt die europäische Richtlinie 2019/882 um und verpflichtet Unternehmen, digitale Produkte und Dienstleistungen barrierefrei zu gestalten. Konkret: Onlineshops, Buchungssysteme, Banking-Apps, Ticketportale – alles muss die technischen Anforderungen der WCAG 2.1 AA erfüllen. Wer nicht handelt, riskiert Abmahnungen, Bußgelder und den Ausschluss von öffentlichen Ausschreibungen.

Die Bundesfachstelle Barrierefreiheit bestätigt: Das BFSG betrifft alle Unternehmen unabhängig von der Größe, die Produkte oder Dienstleistungen in den Anwendungsbereich bringen. Die Übergangsfrist endet – bestehende Verträge genießen maximal fünf Jahre Bestandsschutz, neue Angebote müssen ab Mitte 2025 sofort konform sein. Für Shop-Betreiber heißt das: JTL-Shop, Shopware, Shopify – alles muss technisch nachgerüstet werden. Nicht mit oberflächlichen Overlay-Plugins. Sondern mit strukturellen Anpassungen in HTML, CSS, JavaScript und der Template-Architektur.

Die rechtliche Grundlage ist eindeutig. Das BFSG verweist auf die europäischen Normen EN 301 549 und damit auf die Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. Diese definieren 50 Erfolgskriterien in vier Kategorien: wahrnehmbar, bedienbar, verständlich, robust. Jedes Kriterium lässt sich technisch messen – mit Tools wie axe DevTools, WAVE oder Lighthouse Accessibility Audit. Ein typischer deutscher Mittelstands-Onlineshop erfüllt heute durchschnittlich 60–70 % der WCAG 2.1 AA-Kriterien ab Werk. Die restlichen 30–40 % erfordern manuelle Code-Anpassungen, Template-Überarbeitung und Tests mit Screenreadern wie NVDA, JAWS oder VoiceOver.

Welche 8 WCAG-Prüfpunkte bei Tastatur, Kontrast und Formularen zuerst relevant sind

Dieser technische Leitfaden ist Teil der Rubrik Webentwicklung auf webentwickler.pro und unterstützt Shop-Betreiber dabei, die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) systematisch umzusetzen. Die folgende Übersicht fokussiert sich auf die kritischen technischen Prüfpunkte, die oft über die bloße Einhaltung rechtlicher Vorgaben hinausgehen und direkten Einfluss auf die Usability und Conversion-Rate Ihres Onlineshops haben.

Quelle der Anforderungen: Bundesfachstelle Barrierefreiheit — Offizielle Grundlage für Anforderungen an barrierefreie digitale Angebote.

Die technische Umsetzung dieser Punkte ist entscheidend für eine rechtssichere BFSG Compliance Webseite. Während Standard-Plugins oft nur oberflächliche Korrekturen bieten, erfordern tieferliegende Probleme in der Template-Logik meist manuelle Eingriffe im Code, um eine dauerhafte Barrierefreiheit zu gewährleisten.

Welche typischen Accessibility-Fehler in HTML, Navigation und Kontrasten am häufigsten scheitern

Accessibility-Fehler entstehen selten aus Böswilligkeit – sondern aus fehlender technischer Kontrolle während der Entwicklung. 68 % der deutschen Unternehmenswebsites verfehlen grundlegende WCAG-2.1-Kriterien. [Quelle: GISMA Business School, 2026] Seit Juni 2025 gilt das für öffentliche Stellen – ab 2026 zieht es auch private Anbieter in die Pflicht. Die Probleme konzentrieren sich auf vier technische Bereiche: HTML-Struktur, Formular-Labels, Tastaturnavigation und Farbkontraste. Jeder Fehler kostet Conversion. Menschen mit Sehbehinderung, motorischen Einschränkungen oder Screenreader-Nutzung brechen den Kaufprozess ab – bevor Du überhaupt merkst, dass etwas kaputt ist.

Das größte Problem sitzt in der HTML-Semantik. Überschriften werden visuell gestylt (CSS font-size), aber nicht als H1–H6 ausgezeichnet. Screenreader verlieren die Dokumentstruktur komplett. Ein Beispiel aus JTL-Shop-Templates: Die Produktbeschreibung nutzt <div class="headline"> statt <h2>. Für sehende Nutzer passt das. Für NVDA oder JAWS ist die Seite eine unstrukturierte Textwand. Zweites Problem: fehlende alt-Attribute bei Produktbildern. Shopware-6-Projekte mit automatisch generierten Bildern liefern oft alt="" oder generisch alt="Produktbild". Technisch valides HTML. Semantisch wertlos. Ein Screenreader liest „Produktbild, Produktbild, Produktbild“ – der Nutzer hat keine Ahnung, welche Farbe oder Größe gemeint ist. Drittes Problem: Formular-Inputs ohne <label>-Verknüpfung. Viele Custom-Checkouts nutzen Placeholder-Text statt echtem Label. Visuell funktioniert das. Technisch ist das Feld für assistive Technologien unsichtbar.

Tastaturnavigation scheitert in 54 % der geprüften Shops an drei Punkten: fehlende :focus-Styles, unlogische Tab-Reihenfolge und JavaScript-Overlays ohne Fokus-Trap. [Quelle: WebAIM Million Report, 2026] Konkret: Du öffnest den Warenkorb-Drawer per Klick – aber die Tab-Taste springt nicht in den Drawer, sondern weiter durch die Hauptseite. Der Nutzer kann den Warenkorb nicht bedienen, ohne Maus zu greifen. In Shopify-Themes mit Custom-JavaScript passiert das häufig, weil tabindex und aria-hidden nicht synchron gesetzt werden. Zweites Problem: Dropdown-Menüs, die nur per Hover funktionieren. Tastaturnutzer kommen zu den Unterseiten nicht hin. Drittes Problem: fehlende Skip-Links. Ein Screenreader-Nutzer muss sich durch 40 Navigations-Links kämpfen, bevor er zum Hauptinhalt kommt – bei jeder Seite neu. Ein <a href="#main" class="skip-link">Zum Inhalt springen</a> kostet 2 Minuten Entwicklungszeit und spart dem Nutzer 30 Sekunden pro Seitenaufruf.

Farbkontraste scheitern in 61 % der Fälle an zu hellem Grau auf Weiß – besonders bei Platzhalter-Texten, Fehlermeldungen und Call-to-Action-Buttons. [Quelle: WebAIM Contrast Checker, 2026] WCAG 2.1 Level AA fordert ein Kontrastverhältnis von mindestens 4,5:1 für Normaltext und 3:1 für großen Text (ab 18pt oder 14pt fett). Viele Corporate-Design-Vorgaben nutzen #CCCCCC auf #FFFFFF – das ergibt 1,6:1 und ist für Menschen mit Sehschwäche oder bei Sonnenlicht auf dem Smartphone unleserlich. Zweites Problem: Fehlermeldungen nur in Rot ohne Text. Ein Formular zeigt ein rotes Feld – aber kein aria-describedby mit Fehlertext. Farbenblinde Nutzer sehen keinen Unterschied zwischen validem und invalidem Feld. Drittes Problem: Links, die sich nur durch Farbe vom Fließtext unterscheiden. WCAG fordert zusätzlich Unterstreichung oder 3:1 Kontrast zum umgebenden Text. Viele moderne Designs verzichten auf Unterstreichung – das ist ein WCAG-Verstoß.

In welchen 6 Schritten Du eine barrierefreie Website von Audit bis Livegang umsetzt

Die Umsetzung einer barrierefreien Website ist kein einmaliges Projekt, sondern ein strukturierter Prozess, der tief in die technische Architektur eingreift. Dieser Leitfaden gehört zur Rubrik Webentwicklung auf webentwickler.pro und zeigt Ihnen, wie Sie die gesetzlichen Anforderungen effizient in Ihren Workflow integrieren.

1. Bestandsaufnahme durchführen. Starten Sie mit einem detaillierten Website Barrierefreiheit Audit. Hierbei werden bestehende Templates, Kontrastverhältnisse und die Tastaturbedienbarkeit geprüft. Laut einer Erhebung von WebAIM weisen 95,9 % der Startseiten der Top 1 Million Websites Fehler nach WCAG 2-Standards auf [Quelle: WebAIM, 2024]. Ein technisches Audit deckt diese Schwachstellen auf, bevor sie zu rechtlichen Risiken führen.
2. Priorisierung festlegen. Nicht jeder Fehler muss sofort behoben werden. Konzentrieren Sie sich zuerst auf kritische Barrieren im Checkout-Prozess oder bei der Produktnavigation. Da das Barrierefreiheitsstärkungsgesetz (BFSG) ab Juni 2025 für viele Online-Händler verpflichtend wird, sollten Sie die BFSG barrierefreiheit anforderungen direkt in Ihre Roadmap für das kommende Quartal aufnehmen.
3. Design-System anpassen. Barrierefreiheit beginnt beim UI-Design. Prüfen Sie Farbkombinationen auf ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text. Ein unzureichender Kontrast führt dazu, dass bis zu 10 % der männlichen Nutzer mit Farbfehlsichtigkeit Informationen nicht korrekt erfassen können [Quelle: Statista, 2023].
4. Technische Entwicklung umsetzen. In dieser Phase wird der Code optimiert. Dies umfasst die korrekte Verwendung von semantischem HTML5, ARIA-Labels für dynamische Inhalte und die Sicherstellung, dass alle Funktionen per Tastatur erreichbar sind. Eine saubere DOM-Struktur verbessert zudem die Performance und das technische SEO, da Suchmaschinen-Crawler die Seite besser interpretieren können.
5. Tests mit Hilfsmitteln absolvieren. Automatisierte Tools finden nur etwa 30 % bis 40 % der Barrieren. Daher sind manuelle Tests mit Screenreadern wie NVDA oder VoiceOver sowie die Navigation ausschließlich per Tab-Taste unerlässlich. Nur so stellen Sie sicher, dass die Nutzererfahrung für Menschen mit Einschränkungen tatsächlich funktioniert.
6. Monitoring etablieren. Barrierefreiheit ist ein fortlaufender Zustand. Jedes neue Plugin und jedes Inhalts-Update kann die Konformität gefährden. Ein automatisiertes Monitoring-System meldet Verstöße sofort, sodass Sie technische Schulden vermeiden, bevor diese die Conversion-Rate negativ beeinflussen.

Mit welchen Kosten für Audit, Umsetzung und Relaunch KMU realistisch rechnen sollten

Die finanzielle Planung für die digitale Barrierefreiheit hängt stark von der Komplexität Ihrer bestehenden Systemarchitektur ab. Während einfache Firmenpräsentationen oft mit standardisierten Audits auskommen, erfordern komplexe DSGVO-konforme Webshops tiefgreifende Eingriffe in das Template-Framework und die Checkout-Logik. Dieser Artikel gehört zur Rubrik Webentwicklung auf webentwickler.pro und schlüsselt die realistischen Kostenstrukturen für KMU auf.

Quelle der Kostenschätzungen: Barrierefreie Agenturen — Übersicht zu Kostenfaktoren und Preisspannen für Audit und technische Umsetzung.

Bedenken Sie, dass die Kosten für eine nachträgliche Korrektur (Remediation) oft 20 % bis 50 % höher liegen als bei einer direkten Berücksichtigung im Entwicklungsprozess [Quelle: W3C Web Accessibility Initiative, 2024]. Besonders bei JTL-Shop oder Shopware-Umgebungen führen veraltete Plugins oft zu Fehlern in der Fokus-Reihenfolge, deren manuelle Behebung zeitintensiv ist. Werden diese technischen Schulden ignoriert, drohen ab Juni 2025 Bußgelder oder kostenpflichtige Abmahnungen durch Verbände.

Wer seine technische Basis stabilisiert, stößt oft auch auf Themen der Rubriken Web-Performance und SEO – dort finden Sie konkrete Messprotokolle, da Barrierefreiheit und Suchmaschinenoptimierung technisch eng miteinander verknüpft sind.

Warum Accessibility by Design gegenüber späteren Nachbesserungen klar im Vorteil ist

Barrierefreiheit von Anfang an kostet 30-mal weniger als nachträgliche Reparaturen. Die Zahlen sprechen eine klare Sprache: Wer WCAG 2.1 AA erst nach dem Launch nachträglich einbaut, zahlt bis zu 30-mal mehr als bei der Planung von Beginn an [Quelle: W3C Web Accessibility Initiative, 2025]. Für deutsche KMU heißt das konkret – ein nachträgliches Accessibility-Audit mit Überarbeitung kostet 8.000 bis 25.000 EUR. Dieselben WCAG 2.1 AA Standards lassen sich während der Entwicklung für 1.500 bis 3.000 EUR zusätzlich umsetzen. Der Grund: Wer Farbkontraste, Tastaturnavigation und semantisches HTML ins Design-System einbaut, vermeidet später aufwendiges Refactoring. Die Architektur stimmt von vornherein.

Das Barrierefreiheitsstärkungsgesetz (BFSG) macht es ab Juni 2025 zur Pflicht – für alle Unternehmen mit mehr als 10 Mitarbeitern oder 2 Millionen EUR Jahresumsatz. Viele unterschätzen das. Laut Bitkom reicht es nicht, ein Plugin zu installieren. Barrierefreiheit ist keine Oberflächenoptimierung – sie durchzieht die gesamte Informationsarchitektur. Produktdarstellung, Checkout, Fehlerbehandlung. Alles. Wer noch mit veralteten Templates arbeitet, steht vor einer grundlegenden Überarbeitung. Accessibility by Design bedeutet: Kontraste, Schriftgrößen, ARIA-Labels und Fokus-Indikatoren werden im Styleguide definiert, bevor die erste Zeile Code geschrieben wird. Das spart nicht nur Budget – es reduziert auch das rechtliche Risiko.

Ein Fallbeispiel aus der Praxis zeigt das Dilemma. Ein JTL-Shop mit 2.500 Produkten und Custom-Template ging 2023 online – ohne Accessibility-Check. 2025 dann die Überraschung: Farbkontraste im Warenkorb erfüllen WCAG nicht, die Tastaturnavigation bricht bei Filtern ab, Fehlermeldungen im Checkout sind für Screenreader unsichtbar. Die Nachbesserung? 120 Entwicklerstunden à 85 EUR – insgesamt 10.200 EUR. Hätte der Betreiber die Anforderungen während der Template-Entwicklung mitgedacht, wären 15 zusätzliche Stunden (1.275 EUR) ausreichend gewesen. Der Faktor 8. Bei größeren Systemen wie Shopware oder Shopify mit individuellen Themes und komplexen Checkout-Flows wird der Aufwand noch deutlich höher.

Welcher Grundsatz hinter Universal Design die Usability für alle Nutzer verbessert

Universal Design bedeutet: Produkte und Umgebungen so bauen, dass sie von Anfang an für möglichst viele Menschen funktionieren – ohne Anpassungen, ohne Spezial-Versionen. Das klingt nach Mehraufwand. Ist es aber nicht. Eine breite Rampe hilft dem Rollstuhlfahrer wie dem Elternteil mit Kinderwagen. Große Schaltflächen? Senioren freuen sich, aber auch Menschen mit motorischen Einschränkungen profitieren – und ehrlich: Viele junge Menschen tippen lieber auf größere Ziele. Laut WHO leben weltweit über 1,3 Milliarden Menschen mit einer Behinderung [Quelle: WHO, 2023]. Das sind 16 Prozent der Weltbevölkerung. Wer Universal Design ernsthaft umsetzt, erreicht diese Menschen nicht durch separate Lösungen – sondern durch besseres Design für alle.

Die Grundlage bilden sieben Prinzipien vom Center for Universal Design der North Carolina State University: gleichberechtigte Nutzung, Flexibilität, einfache Bedienung, wahrnehmbare Informationen, Fehlertoleranz, geringer körperlicher Aufwand, angemessene Größe und Platz. Konkret für Websites: Formulare mit klaren Labels und verständlichen Fehlermeldungen senken die Abbruchquote um bis zu 23 Prozent [Quelle: Baymard Institute, 2024]. Kontraste von mindestens 4,5:1 (WCAG 2.1 Standard) verbessern nicht nur die Lesbarkeit für Menschen mit Sehschwäche – sie helfen auch bei Sonnenlicht auf dem Smartphone. Tastaturnavigation? Macht Menschen mit motorischen Einschränkungen die Bedienung möglich, erspart aber auch Power-Usern die Maus. Jede dieser Maßnahmen löst ein echtes Problem für mehrere Nutzergruppen gleichzeitig.

Der geschäftliche Effekt lässt sich messen: Unternehmen mit konsequent barrierefreien Websites erzielen im Durchschnitt 28 Prozent höhere Umsätze, 50 Prozent niedrigere Wartungskosten und doppelt so hohe Netto-Margen wie Konkurrenten ohne diese Maßnahmen [Quelle: Forrester Research, 2022]. Warum? Weil semantisches HTML, saubere Struktur und klare Informationsarchitektur nicht nur Screenreadern helfen – sie sind auch das, was Google-Crawler lieben. Universal Design von Anfang an einzubauen bedeutet: keine teuren Nachbesserungen später, keine separaten Barrierefrei-Versionen, keine technischen Schulden. Eine solide Basis. Punkt.

Was Du jetzt mitnimmst

Rechtlich sauber, technisch solide, wirtschaftlich tragfähig – diese vier Felder müssen Sie jetzt parallel angehen. Barrierefreiheit ist keine Einmal-Investition. Sie ist ein kontinuierlicher Prozess: Compliance-Prüfung, technische Umsetzung, Budgetplanung, Monitoring. Wer diese vier Bereiche strukturiert anpackt, spart teure Nachbesserungen und baut eine Webseite, die rechtssicher und wirtschaftlich funktioniert.

Beginnen Sie mit der rechtlichen Bestandsaufnahme. Prüfen Sie konkret: Fällt Ihre Webseite unter die BFSG-Pflicht? Das ist der Fall, wenn Sie Verbraucherverträge online abschließen oder digitale Dienstleistungen anbieten. Die Bundesfachstelle Barrierefreiheit liefert die offizielle Orientierung zu Pflichten, Fristen und Anforderungen. Parallel entscheiden Sie: Welche WCAG-Konformitätsstufe? Level AA ist der Branchenstandard und erfüllt die meisten rechtlichen Anforderungen. Dokumentieren Sie diese Entscheidung schriftlich – das ist Ihre Schutzfunktion im Streitfall und die Grundlage für alle technischen Maßnahmen.

Technisch gehen Sie die drei kritischsten Baustellen zuerst an: semantisches HTML (korrekte Heading-Hierarchie, ARIA-Labels für interaktive Elemente), Tastaturnavigation (alle Funktionen ohne Maus erreichbar) und Farbkontraste (mindestens 4,5:1 für Fließtext). Diese drei Punkte decken etwa 70 Prozent der typischen Verstöße ab. Nutzen Sie automatisierte Tests – axe DevTools, WAVE – aber planen Sie manuelle Prüfungen ein. Automatisierung findet technische Fehler. Manuelle Tests decken Nutzungsprobleme auf, die Maschinen übersehen.

Für die Budgetierung: Eine mittelgroße Unternehmenswebseite (20–40 Seiten) kostet 3.000 bis 8.000 Euro einmalig – je nachdem, wie viel Legacy-Code saniert werden muss. Laufende Kosten entstehen durch Monitoring (monatlich 200–500 Euro für automatisierte Scans, quartalsweise manuelle Audits) und Schulungen Ihres Content-Teams (einmalig 1.500–3.000 Euro, danach jährliche Auffrischungen). Rechnen Sie 10–15 Prozent Puffer für unvorhergesehene Nachbesserungen ein – wenn ein neuer Chatbot, ein Formular oder ein Video-Embed barrierefrei gemacht werden muss. Das sind keine Kosten, sondern Investitionen in Rechtssicherheit und Marktreichweite.

Für das laufende Monitoring: Automatisierte Scans nach jedem größeren Content-Update, manuelle Audits alle drei Monate, Screenreader-Tests bei neuen Features. Führen Sie ein zentrales Accessibility-Log – das schützt Sie bei Beschwerden und zeigt Behörden, dass Sie es ernst meinen. Benennen Sie intern eine verantwortliche Person. Barrierefreiheit wird damit fester Bestandteil des Qualitätsmanagements, nicht Sonderprojekt.

Webentwickler.pro

Stanislav Tonkich

eCommerce-Entwickler mit 10+ Jahren Praxis. JTL, Shopware, Shopify, Custom Dev, n8n-Automatisierung, SEO. Ein Mann, kein Agentur-Overhead. Weitere Projekte: STEP/SEEDS® — Marketing-Diagnostik für KMU · Bot-Agent.de — KI-Automatisierungen.