BFSG Anforderungen für Websites & Online-Shops — Vollständiger Leitfaden 2026

Wenn Sie einen Online-Shop oder eine Website betreiben, sind Sie jetzt vom Barrierefreiheitsstärkungsgesetz (BFSG) betroffen. Seit dem 28. Juni 2025 müssen alle E-Commerce-Websites und -Apps barrierefrei sein – sonst drohen Bußgelder bis zu €100.000 und Abmahnungen.

Dieser vollständige Leitfaden erklärt alle BFSG Anforderungen für Websites und Online-Shops — von technischen Standards über häufige Verstöße bis hin zu konkreten Lösungen.

Welche Websites und Online-Shops sind vom BFSG betroffen?

Das BFSG gilt für alle E-Commerce-Websites und -Apps, über die Produkte oder Dienstleistungen an Verbraucher verkauft werden. Das bedeutet:

• Online-Shops — Alle E-Commerce-Websites, die Waren oder Dienstleistungen verkaufen
• Mobile Apps — Apps, über die Produkte oder Dienstleistungen angeboten werden
• Marktplätze — Plattformen wie Amazon, eBay, Etsy (wenn sie in Deutschland anbieten)
• Buchungssysteme — Hotels, Restaurants, Friseure, Ärzte mit Online-Buchung
• Ticket-Shops — Veranstaltungen, Konzerte, Sportevents

Nicht betroffen sind:

• Reine Informationsseiten ohne E-Commerce-Funktionalität (diese fallen unter BITV 2.0 für öffentliche Stellen)
• Mikrounternehmen mit weniger als 10 Mitarbeitern und Jahresumsatz unter €2 Millionen (Ausnahmen möglich)

BFSG-Anforderungen — Die wichtigsten WCAG 2.1 Kriterien

Die technischen Anforderungen des BFSG basieren auf WCAG 2.1 Level AA. Hier sind die wichtigsten Kriterien für Online-Shops:

1. Alternativer Text für Bilder (1.1.1)

Alle Produktbilder, Grafiken und Icons müssen alternativen Text (Alt-Text) haben. Screenreader können so beschreiben, was auf dem Bild zu sehen ist.

Beispiel:
<img src="produkt.jpg" alt="Rote Lederhandtasche mit goldenem Verschluss">

Häufiger Fehler: Fehlender Alt-Text bei Produktbildern. Screenreader sagen dann nur "Bild".

2. Farbkontraste (1.4.3)

Der Kontrast zwischen Text und Hintergrund muss mindestens 4.5:1 betragen (für normalen Text) oder 3:1 (für großen Text).

Beispiel:
❌ Grauer Text (#888888) auf weißem Hintergrund — Kontrast 2.8:1 → Fällt durch
✅ Dunkelgrauer Text (#333333) auf weißem Hintergrund — Kontrast 12.6:1 → Besteht

Häufiger Fehler: Graue "Aktion"-Buttons (wie "In den Warenkorb") auf hellen Hintergründen.

3. Tastaturzugänglichkeit (2.1.1)

Die gesamte Website muss nur mit der Tastatur bedienbar sein. Kunden müssen mit Tab, Enter und Pfeiltasten durch den gesamten Shop navigieren können.

Beispiel: Der gesamte Checkout-Prozess muss ohne Maus funktionieren.

Häufiger Fehler: Dropdown-Menüs, die nur mit der Maus geöffnet werden können.

4. Beschriftete Formularfelder (3.3.2)

Alle Formularfelder (Name, E-Mail, Adresse, Zahlungsinformationen) müssen sichtbare Beschriftungen haben.

Beispiel:
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email">

Häufiger Fehler: Formularfelder ohne Labels oder mit Platzhaltern als einziger Beschriftung.

5. Logische Überschriftenstruktur (1.3.1)

Die Überschriften müssen eine logische Hierarchie bilden: H1 → H2 → H3 → H4. Screenreader-Nutzer navigieren über Überschriften.

Beispiel:
✅ H1: "Produktkategorie" → H2: "Produktname" → H3: "Beschreibung"

Häufiger Fehler: Übersprungenen Überschriftenebenen (z.B. H1 → H3).

6. Fokusindikatoren (2.4.7)

Jedes Element, das per Tastatur erreichbar ist, muss einen sichtbaren Fokusindikator haben. Nutzer müssen sehen können, wo sie sich auf der Seite befinden.

Beispiel:
button:focus { outline: 2px solid #3b82f6; }

Häufiger Fehler: outline: none; ohne sichtbaren Ersatz.

7. Springen zum Hauptinhalt (2.4.1)

Jede Seite muss einen "Zum Hauptinhalt springen" Link haben. Dieser ist der erste fokussierbare Link auf der Seite.

Beispiel:
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

8. Beschreibende Linktexte (2.4.4)

Linktexte müssen den Zweck des Links beschreiben. "Hier klicken" oder "Mehr erfahren" sind nicht aussagekräftig.

Beispiel:
✅ <a href="/produkt">Mehr über unser Produkt erfahren</a>
❌ <a href="/produkt">Hier klicken</a>

BFSG-Checkliste für Online-Shops

Häufige BFSG-Verstöße im E-Commerce

1. Fehlender Alt-Text bei Produktbildern

Problem: Produktbilder ohne Alt-Text — Screenreader sagen nur "Bild".

Lösung: Fügen Sie beschreibenden Alt-Text zu allen Produktbildern hinzu.

2. Zu geringer Farbkontrast bei Buttons

Problem: "In den Warenkorb" Buttons mit geringem Kontrast.

Lösung: Verwenden Sie dunklere Farben für Buttons und erhöhen Sie den Kontrast auf 4.5:1.

3. Nicht bedienbare Dropdown-Menüs

Problem: Dropdown-Menüs können nur mit der Maus geöffnet werden.

Lösung: Implementieren Sie Tastaturunterstützung für alle Menüs (Enter zum Öffnen, Pfeiltasten zur Navigation).

4. Unbeschriftete Formularfelder

Problem: Formularfelder ohne Labels oder nur mit Platzhaltern.

Lösung: Verwenden Sie sichtbare <label>-Elemente für jedes Formularfeld.

5. Fehlender Fokusindikator

Problem: Nutzer können nicht erkennen, welches Element fokussiert ist.

Lösung: Fügen Sie sichtbare Fokusindikatoren hinzu: a:focus, button:focus { outline: 2px solid #3b82f6; }

So erreichen Sie BFSG-Konformität — Schritt für Schritt

Schritt 1: BFSG-Check durchführen

Nutzen Sie unseren kostenlosen BFSG-Checker, um Ihre Website auf WCAG 2.1 Level AA zu testen.

Schritt 2: Kritische Verstöße beheben

Konzentrieren Sie sich zuerst auf die Verstöße, die am häufigsten zu Abmahnungen führen: fehlender Alt-Text, fehlende Formularbeschriftungen und fehlende Tastaturzugänglichkeit.

Schritt 3: Barrierefreiheitserklärung erstellen

Erstellen Sie eine Barrierefreiheitserklärung für Ihre Website. Dies ist rechtlich erforderlich und zeigt Ihre Compliance-Bemühungen.

Schritt 4: Regelmäßige Prüfungen

Führen Sie monatliche BFSG-Prüfungen durch, um neue Verstöße zu erkennen.

BFSG-Checker — Kostenlose Tools

• BFSG-Checker — Kostenloser WCAG 2.1 AA Scan
• Tastatur-Checker — Testen Sie die Tastaturzugänglichkeit
• Farbkontrast-Checker — Testen Sie Textkontraste
• Screen-Reader-Checker — Testen Sie ARIA und Alt-Text
• PDF-Checker — Testen Sie PDF-Dokumente

Häufig gestellte Fragen — BFSG für Websites

Interne Links — BFSG-Ressourcen