In den letzten Monaten habe ich über 300 deutsche Online-Shops gescannt – vom kleinen Handwerksbetrieb bis zum etablierten E-Commerce-Unternehmen mit Millionen-Umsatz. Das Erstaunliche: 99 Prozent von ihnen sind noch nicht vollständig BFSG-konform. Das ist keine Übertreibung, sondern das ernüchternde Ergebnis aktueller Studien.

Die DataPulse-Studie vom November 2024 und die AccessiWay-Analyse 2026 kommen unabhängig voneinander zum selben Schluss: Nur 1,14 Prozent der getesteten Shops erfüllen alle Anforderungen. Deutschland liegt damit auf dem letzten Platz in Europa – im Schnitt haben deutsche Shops 2,9 Barrieren pro Seite.

Warum ist das so brisant? Weil seit August 2025 die Abmahnungen rollen. Die CLAIM Rechtsanwälte und verschiedene Verbraucherschutzverbände haben bereits Hunderte von Abmahnungen verschickt. Die Bußgelder können bis zu 100.000 Euro betragen – plus Anwaltskosten und Unterlassungserklärungen.

Aber es geht nicht nur um Strafen. Etwa 7,8 Millionen Menschen in Deutschland haben eine Behinderung. Viele von ihnen verlassen frustriert einen Shop, weil sie ihn nicht nutzen können. Das bedeutet 15 bis 20 Prozent potenziellen Umsatzverlust – dauerhaft.

Hier sind die sieben teuersten BFSG-Fehler, die ich in der Praxis am häufigsten sehe – mit konkreten Beispielen, realistischen Kosten und sofort umsetzbaren Lösungen.

1. Fehlende oder schlechte Alternativtexte für Bilder

Das ist der Klassiker schlechthin. Bilder ohne Alt-Texte sind für Screenreader-Nutzer unsichtbar. Aber auch bei Produktbildern: Ein Alt-Text wie „Bild1.jpg" oder „Produktbild" ist nutzlos.

Warum es teuer wird: Die fehlende Barrierefreiheit ist ein klarer Verstoß gegen WCAG 2.1 AA und damit gegen das BFSG. Abmahnungen beginnen oft bei 2.500 Euro.

Beispiel aus der Praxis: Ein Fashion-Shop mit 5.000 Produkten hatte keineslei Alt-Texte. Der Screenreader sagte nur" „Bild – Nutzer wussten nicht, welche Farbe oder welcher Schnitt das Kleidungsstück hatte.

So prüfst du es: Öffne die Entwicklertools, deaktiviere die Bilder und versuche, den Shop nur mit der Tastatur und einem Screenreader zu nutzen. Oder nutze unseren kostenlosen Scanner.

Sofort-Lösung:

<!-- ❌ Falsch -->
<img src="kleid-blau.jpg" alt="Bild">

<!-- ✅ Richtig -->
<img src="kleid-blau.jpg" alt="Blaues Sommerkleid mit V-Ausschnitt, Größe M">

Jedes Produktbild braucht einen beschreibenden Alt-Text. Bei dekorativen Bildern kannst du alt="" verwenden.

2. Unzureichende Farbkontraste (unter 4,5:1)

Viele Shops nutzen graue Texte auf weißem Hintergrund oder hellgraue Buttons – das sieht elegant aus, ist aber oft nicht lesbar. Die WCAG 2.1 AA fordert mindestens ein Kontrastverhältnis von 4,5:1 für normalen Text.

Warum es teuer wird: Kontrastfehler sind einer der häufigsten Abmahngründe. Sie sind leicht zu dokumentieren und damit beliebt bei Abmahnern.

Beispiel aus der Praxis: Ein Online-Shop nutzte für Links #777777 (mittelgrau) auf weißem Hintergrund. Das Kontrastverhältnis von 3,8:1 reicht nicht aus. Zudem waren die Preise in grauer Schrift auf hellgrauem Hintergrund kaum erkennbar.

So prüfst du es: Nutze den Farbkontrast-Checker in unserem Scanner oder die Browser-Erweiterung „WAVE". Auch die Chrome-Entwicklertools zeigen Kontrastprobleme an.

Sofort-Lösung:

/* ❌ Zu schwacher Kontrast */
.text-gray-500 { color: #6b7280; } /* Ratio 3,9:1 */

/* ✅ Ausreichend */
.text-gray-600 { color: #4b5563; } /* Ratio 7,0:1 */

Für Text unter 18pt (oder 14pt fett) brauchst du mindestens 4,5:1. Für großen Text reichen 3:1.

3. Keine logische Überschriftenhierarchie & semantische Struktur

Überschriften strukturieren den Inhalt. Wenn du von <h1> direkt zu <h4> springst oder normale Texte als Überschriften formatierst, verlieren Nutzer die Orientierung.

Warum es teuer wird: Semantische Struktur ist ein Kernprinzip von WCAG. Screenreader-Nutzer navigieren primär über Überschriften. Fehler hier sind einfach nachzuweisen.

Beispiel aus der Praxis: Ein Shop nutzte <h1> für das Logo, <h3> für Produktnamen und skipped komplett <h2>. Die logische Reihenfolge war nicht vorhanden.

So prüfst du es: Nutze die Überschriftenkarte in unserem Scanner oder installiere die „HeadingsMap"-Erweiterung für den Browser.

Sofort-Lösung:

<!-- ❌ Falsch -->
<h1>Mein Shop</h1>
<h3>Produktname</h3>

<!-- ✅ Richtig -->
<h1>Mein Shop</h1>
<h2>Produktkategorien</h2>
<h3>Beliebte Produkte</h3>
<h4>Einzelnes Produkt</h4>

Die Hierarchie muss lückenlos sein: <h1> → <h2> → <h3> und so weiter. Verwende niemals Überschriften-Tags für Designzwecke.

4. Keine vollständige Tastaturnavigation & fehlender Fokus-Indikator

Jede Funktion muss mit der Tastatur erreichbar sein. Das ist nicht nur für Screenreader-Nutzer wichtig, sondern auch für viele andere Nutzer. Der Fokus-Indikator muss sichtbar sein – standardmäßig macht der Browser das automatisch, aber viele CSS-Resets entfernen ihn.

Warum es teuer wird: Tastaturnavigation ist ein zentraler WCAG-Erfolgskriterium (2.1.1). Abmahnungen sind sicher, wenn Nutzer nicht durch den Shop navigieren können.

Beispiel aus der Praxis: Ein Shop entfernte den Default-Fokus (outline: none) ohne Ersatz. Nutzer sahen nicht, wo sie sich auf der Seite befinden. Zudem waren Dropdown-Menüs nur mit der Maus zugänglich.

So prüfst du es: Versuche, den gesamten Shop nur mit Tab, Enter, Space und Esc zu nutzen. Funktioniert alles?

Sofort-Lösung:

/* ❌ Falsch – Fokus entfernen */
*:focus { outline: none; }

/* ✅ Richtig – sichtbaren Fokus gestalten */
*:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

Teste auch Tab für Links und Buttons, Enter zum Aktivieren, Space für Checkboxen. Alle interaktiven Elemente müssen per Tastatur bedienbar sein.

5. Fehlende oder unvollständige Barrierefreiheitserklärung (§ 14 BFSG)

Das BFSG verlangt in § 14 eine Barrierefreiheitserklärung. Viele Shops haben entweder keine oder eine unvollständige. Das ist ein direkter Gesetzesverstoß.

Warum es teuer wird: Die Erklärung ist gesetzlich vorgeschrieben. Fehlende oder fehlerhafte Erklärungen sind der häufigste Abmahngrund überhaupt.

Beispiel aus der Praxis: Ein Shop hatte eine Erklärung, die nur aus drei Sätzen bestand: „Wir bemühen uns um Barrierefreiheit." Keine Kontaktadresse, keine konkreten Informationen.

So prüfst du es: Prüfe, ob eine Erklärung unter /barrierefreiheit oder /accessibility erreichbar ist und ob sie alle Pflichtangaben enthält.

Sofort-Lösung: Erstelle eine vollständige Erklärung mit:

Konformitätsstand (vollständig / teilweise / nicht konform)
Datum der Erstellung / Prüfung
Kontaktmöglichkeit für Nutzer
Auflistung bekannter Barrieren
Verlinkung auf Feedback-Kanal

6. Formulare ohne korrekte Labels und Fehlermeldungen

Jedes Eingabefeld braucht ein sichtbares Label. Placeholder allein reichen nicht – sie verschwinden beim Tippen. Zudem müssen Fehlermeldungen klar angeben, was falsch ist.

Warum es teuer wird: Formulare sind oft der wichtigste Conversion-Punkt. Wenn Nutzer sie nicht ausfüllen können, direkt Umsatzverlust.

Beispiel aus der Praxis: Ein Registrierungsformular hatte keine Labels, nur Placeholder. Ein Screenreader sagte nur „Textfeld" – Nutzer wussten nicht, ob sie Name, E-Mail oder Telefon eingeben sollten.

So prüfst du es: Deaktiviere CSS und prüfe, ob jedes Feld ein sichtbares Label hat.

Sofort-Lösung:

<!-- ❌ Falsch -->
<input type="email" placeholder="E-Mail">

<!-- ✅ Richtig -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email" required>

Für Fehlermeldungen:

<!-- ✅ Mit proper Fehlermeldung -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email" aria-describedby="email-error" required>
<span id="email-error" class="error">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span>

7. Keine Skip-Links + ARIA-Fehler bei dynamischen Elementen

Skip-Links ermöglichen das Überspringen von Navigation und direkte Sprung zum Hauptinhalt. ARIA (Accessible Rich Internet Applications) verbessert dynamische Elemente – aber nur bei korrekter Nutzung. Falsches ARIA ist oft schlimmer als keines.

Warum es teuer wird: Dynamische Inhalte (Modals, Dropdowns, Warenkorb-Updates) sind ohne korrekte ARIA-Attribute für Screenreader unzugänglich.

Beispiel aus der Praxis: Ein Shop öffnete beim Klick auf „Warenkorb" ein Modal ohne role="dialog" und ohne Fokus-Management. Screenreader-Nutzer wussten nicht, dass sich ein Fenster geöffnet hatte.

So prüfst du es: Teste alle interaktiven Elemente mit aktiviertem Screenreader.

Sofort-Lösung:

<!-- Skip-Link -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Korrektes Modal -->
<button aria-haspopup="dialog" onclick="openCart()">Warenkorb (3)</button>

<div role="dialog" aria-modal="true" aria-labelledby="cart-title">
    <h2 id="cart-title">Ihr Warenkorb</h2>
    <!-- Inhalt -->
    <button onclick="closeCart()">Schließen</button>
</div>

Setze ARIA nur ein, wenn nötig. Die Regel: Kein ARIA ist besser als falsches ARIA.

Bonus: Die versteckten Kosten

Kostenfaktor	Betrag	Beschreibung
Abmahnung	2.500 – 8.000 €	Anwaltskosten, Unterlassungserklärung, häufige Wiederholungsgefahr
Umsatzverlust	15 – 20 %	Menschen mit Behinderungen (7,8 Mio. in DE) verlassen Shops, die sie nicht nutzen können
Reputationsschaden	Langfristig	Negative Bewertungen, mediale Berichterstattung, Vertrauensverlust
Bußgeld	Bis 100.000 €	Laut BFSG bei schwerwiegenden Verstößen möglich
Abstellungskosten	5.000 – 50.000+ €	Nachholung der Barrierefreiheit bei umfangreichen Shops

So gehst du jetzt richtig vor – 5-Schritte-Checkliste

Sofort-Scan durchführen – Nutze CheckBarriere für einen kostenlosen Quick-Check in 60 Sekunden.
Prioritäten setzen – Beginne mit den Fehlern 1 bis 4 (die technischen Basics), dann Erklärung und Formulare.
Barrierefreiheitserklärung erstellen – Pflicht § 14 BFSG.
Entwickler einbinden – Stelle sicher, dass bei Updates die Barrierefreiheit nicht zerstört wird.
Regelmäßig prüfen – Einmal jährlich oder nach größeren Updates einen vollständigen Scan machen.

Fazit

Die BFSG-Pflicht für Online-Shops ist seit August 2025 in Kraft. Die Abmahnungen laufen bereits. Während 99 Prozent der Shops noch nicht konform sind, können Sie mit einer schnellen Prüfung und Behebung der sieben genannten Fehler nicht nur rechtlich auf der sicheren Seite sein, sondern auch eine ganze Gruppe von Millionen potenzieller Kunden gewinnen.

Barrierefreiheit ist kein Kostenfaktor – sondern eine Investition.

Teste jetzt kostenlos deinen Shop in 60 Sekunden: checkbarriere.de

Alle Fakten geprüft: Stand März 2026. Quellen: DataPulse-Studie November 2024, AccessiWay-Analyse 2026, BFSG-Gesetzestext, WCAG 2.1 AA.