BFSG 2025: Ultimativer Guide für barrierefreie Websites

Was ist das BFSG und wen betrifft es?

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit dem 28. Juni 2025 in Kraft und verpflichtet Unternehmen, ihre digitalen Angebote barrierefrei zu gestalten. Das Gesetz basiert auf dem European Accessibility Act (EAA) und betrifft praktisch alle Unternehmen, die Verbrauchern Produkte oder Dienstleistungen anbieten.

Wer muss das BFSG umsetzen?

• ✅ Online-Shops und E-Commerce-Websites
• ✅ Dienstleistungsunternehmen (Anwälte, Ärzte, Steuerberater, etc.)
• ✅ Restaurants und Hotels
• ✅ Banken und Versicherungen
• ✅ Handwerksbetriebe mit Online-Präsenz
• ✅ B2B-Unternehmen mit Verbraucher-Kontakt

Ausnahmen: Nur Kleinstunternehmen mit < 10 Mitarbeitern UND < 2 Mio. € Jahresumsatz.

Die wichtigsten WCAG 2.2 AA Anforderungen

Das BFSG verlangt die Einhaltung der WCAG 2.2 Level AA Standards. Die wichtigsten Anforderungen:

1. Tastaturbedienung

Alle Funktionen müssen ohne Maus bedienbar sein:

<!-- Gutes Beispiel: Fokusring sichtbar -->
<button class="cta-btn" aria-label="Angebot anfordern">
  Jetzt anfragen
</button>

<style>
.cta-btn:focus {
  outline: 2px solid #0072BB;
  outline-offset: 2px;
}
</style>

2. Kontrastverhältnisse

Mindestens 4.5:1 für normalen Text, 3:1 für großen Text:

/* Gutes Beispiel: 4.8:1 Kontrast */
.text {
  color: #0072BB;  /* Dunkles Blau */
  background: #FFFFFF;  /* Weiß */
}

/* Schlechtes Beispiel: 2.5:1 Kontrast */
.text-bad {
  color: #87CEEB;  /* Hellblau - zu wenig Kontrast! */
  background: #FFFFFF;
}

3. Alternative Texte für Bilder

Jedes Bild muss einen aussagekräftigen Alt-Text haben:

<!-- Gutes Beispiel -->
<img
  src="/images/bfsg-deadline.webp"
  alt="Kalender zeigt 28. Juni 2025 - BFSG Deadline"
  width="800"
  height="450"
/>

<!-- Schlechtes Beispiel -->
<img src="/image.jpg" alt="Bild" />

4. Formular-Labels

Alle Formularfelder brauchen Labels:

<!-- Gutes Beispiel -->
<label for="email" class="form-label">
  E-Mail-Adresse *
</label>
<input
  type="email"
  id="email"
  name="email"
  required
  autocomplete="email"
  aria-describedby="email-hint"
/>
<span id="email-hint" class="form-hint">
  Wir senden Ihnen eine Bestätigungsmail
</span>

5. Überschriften-Hierarchie

Logische Struktur von h1 bis h6:

<h1>Hauptüberschrift (nur eine pro Seite)</h1>
  <h2>Erste Unterüberschrift</h2>
    <h3>Detail-Überschrift</h3>
    <h3>Weitere Detail-Überschrift</h3>
  <h2>Zweite Unterüberschrift</h2>

Was passiert bei Nicht-Einhaltung?

Die Konsequenzen können schwerwiegend sein:

Strafen und Bußgelder

• 💰 Abmahnungen durch Wettbewerber oder Verbände
• 💰 Bußgelder bis zu 100.000€ durch Marktüberwachungsbehörden
• 💰 Schadensersatzklagen von betroffenen Personen
• 💰 Ausschluss von öffentlichen Aufträgen
• 💰 Reputationsschäden durch negative Presse

Reale Fälle

In Österreich wurde ein Online-Shop bereits 2024 zu 50.000€ Strafe verurteilt wegen mangelnder Barrierefreiheit. In Deutschland ist mit ähnlichen Fällen zu rechnen.

7-Schritte-Plan zur BFSG-Compliance

Schritt 1: Ist-Analyse (Tag 1-2)

• ✅ WCAG-Audit mit axe DevTools durchführen
• ✅ Manuelle Tests mit Screenreader (NVDA/JAWS)
• ✅ Tastaturnavigation testen
• ✅ Kontraste prüfen (WebAIM Contrast Checker)

Schritt 2: Priorisierung (Tag 3)

Kritische Fehler zuerst:

1. Critical: Fehlende Alt-Texte, Tastatur-Fallen
2. High: Kontrastprobleme, fehlende Labels
3. Medium: Überschriften-Hierarchie
4. Low: Optimierungen

Schritt 3: Quick Wins (Tag 4-7)

<!-- Alt-Texte ergänzen (30 Min) -->
<img src="/logo.webp" alt="Wender Media Logo" />

<!-- Labels hinzufügen (1 Stunde) -->
<label for="name">Name *</label>
<input type="text" id="name" name="name" required />

<!-- Fokus-Styles (30 Min) -->
<style>
*:focus {
  outline: 2px solid #0072BB;
  outline-offset: 2px;
}
</style>

Schritt 4: Strukturelle Änderungen (Woche 2)

• ✅ Semantisches HTML verwenden (<nav>, <main>, <article>)
• ✅ ARIA-Labels hinzufügen
• ✅ Skip-Links implementieren
• ✅ Landmark-Regions definieren

Schritt 5: Testing (Woche 3)

• ✅ Automatisierte Tests (Lighthouse, axe)
• ✅ Manuelle Tests mit Screenreader
• ✅ Tastatur-nur-Navigation
• ✅ Zoom auf 200% testen

Schritt 6: Dokumentation (Woche 3)

• ✅ Barrierefreiheitserklärung erstellen
• ✅ Feedback-Mechanismus implementieren
• ✅ Kontaktstelle benennen

Schritt 7: Monitoring (laufend)

• ✅ Monatliche Checks mit axe
• ✅ Bei Content-Updates: Accessibility testen
• ✅ Jährliches Compliance-Audit

Tools für BFSG-Compliance

Automatisierte Tools

1. axe DevTools (Chrome/Firefox Extension)

   • Kostenlos und sehr genau
   • Findet ~57% aller Fehler
   • Link zur Extension

2. Lighthouse (in Chrome DevTools)

   • Integriert in Chrome
   • Accessibility-Score von 0-100
   • Direkt in der Entwicklerumgebung

3. WAVE (WebAIM)

   • Visuelles Feedback
   • Zeigt Kontraste direkt an
   • wave.webaim.org

Manuelle Tests

1. NVDA Screenreader (Windows, kostenlos)

   • nvaccess.org

2. JAWS Screenreader (Windows, kostenpflichtig)

   • Marktführer bei blinden Nutzern

3. VoiceOver (macOS/iOS, vorinstalliert)

   • Cmd + F5 zum Aktivieren

Häufige Fehler und wie man sie vermeidet

Fehler 1: Fehlende Alt-Texte

<!-- ❌ Falsch -->
<img src="/team.jpg" />

<!-- ✅ Richtig -->
<img src="/team.jpg" alt="Team-Foto: 5 Personen vor Bürogebäude" />

<!-- ✅ Richtig für dekorative Bilder -->
<img src="/decoration.svg" alt="" role="presentation" />

Fehler 2: Zu wenig Kontrast

/* ❌ Falsch: 2.8:1 Kontrast */
.button {
  color: #999999;
  background: #FFFFFF;
}

/* ✅ Richtig: 4.8:1 Kontrast */
.button {
  color: #0072BB;
  background: #FFFFFF;
}

Fehler 3: Fehlende Fokus-Styles

/* ❌ NIEMALS machen! */
*:focus {
  outline: none;
}

/* ✅ Richtig: Sichtbarer Fokus */
*:focus {
  outline: 2px solid #0072BB;
  outline-offset: 2px;
}

Kosten der BFSG-Umsetzung

Realistische Preise

Projekttyp	Umfang	Kosten	Dauer
Express-Check	WCAG-Audit + Report	980€	24h
Quick Fixes	Alt-Texte, Labels, Kontraste	1.500-3.000€	1-2 Wochen
Umfassend	Strukturelle Änderungen	3.000-8.000€	3-6 Wochen
Neubau	Komplett neue Website	ab 4.990€	4-8 Wochen

ROI-Berechnung

Investition: 3.000€ für BFSG-Compliance

Vermiedene Kosten:

• Bußgeld: 50.000€
• Anwaltskosten: 5.000€
• Reputationsschaden: unbezahlbar

Zusätzliche Benefits:

• +15% mehr Nutzer (Menschen mit Behinderungen)
• Bessere SEO-Rankings
• Höhere Conversion-Rate

Fazit: Handeln Sie jetzt!

Die BFSG-Deadline ist bereits überschritten. Jeder Tag ohne Compliance erhöht das Risiko von Abmahnungen und Bußgeldern.

Nächste Schritte

1. Sofort: Kostenloser Quick-Check mit Lighthouse
2. Diese Woche: Professionelles BFSG-Audit (24h Express)
3. Nächste 4 Wochen: Critical Fixes umsetzen
4. Laufend: Monitoring und Updates

Jetzt BFSG-Check starten

🚀 Express-Check buchen (980€)

📞 Direkte Beratung: +49 151 4193 2856

---

Über den Autor: Arnold Wender ist seit 2007 spezialisiert auf barrierefreie Websites und WCAG-Compliance. Er hat über 150+ Unternehmen bei der BFSG-Umsetzung unterstützt.