BFSG 2026: 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?

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:

<!-- Schlechtes Beispiel: Fokus entfernt -->
<button class="cta-btn">
  Jetzt anfragen
</button>

<style>
.cta-btn:focus {
  outline: none; /* NIEMALS machen! */
}
</style>

<!-- 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:

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

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

3. Alternative Texte für Bilder

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

<!-- Schlechte Beispiele -->
<img src="/image.jpg" alt="Bild" />
<img src="/image.jpg" />  <!-- Fehlt komplett! -->

<!-- Aussagekräftiger Alt-Text -->
<img
  src="/images/bfsg-deadline.webp"
  alt="Kalender zeigt 28. Juni 2025 - BFSG Deadline"
  width="800"
  height="450"
/>

<!-- Dekoratives Bild -->
<img src="/decoration.svg" alt="" role="presentation" />

4. Formular-Labels

Alle Formularfelder brauchen Labels:

<input type="email" placeholder="E-Mail" />
<!-- Kein Label, nur Placeholder! -->

<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</h1>
<h3>Sprung zu h3!</h3>  <!-- h2 fehlt! -->
<h1>Zweite h1</h1>  <!-- Nur eine erlaubt! -->

<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

7-Schritte-Plan zur BFSG-Compliance

Kritische Fehler zuerst beheben:

Schnelle Verbesserungen mit großer Wirkung:

Tools für BFSG-Compliance

Automatisierte Tools

Screenreader für manuelle Tests

Häufige Fehler und wie man sie vermeidet

Fehler 1: Fehlende Alt-Texte

<!-- Kein Alt-Text -->
<img src="/team.jpg" />

<!-- Nichtssagend -->
<img src="/team.jpg" alt="Bild" />

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

<!-- Dekorative Bilder -->
<img src="/decoration.svg" alt="" role="presentation" />

Fehler 2: Zu wenig Kontrast

/* 2.8:1 Kontrast - zu wenig! */
.button {
  color: #999999;
  background: #FFFFFF;
}

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

Fehler 3: Fehlende Fokus-Styles

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

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

Kosten der BFSG-Umsetzung

Realistische Preise

ROI-Berechnung

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