Barrierefreiheit für Websites: BFSG 2025 Leitfaden

Ab dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) auch für viele private Unternehmen. Websites und Online-Shops müssen dann barrierefrei zugänglich sein. Diese Anleitung erklärt die Anforderungen und wie Sie diese umsetzen.

Was ist das BFSG?

Das Barrierefreiheitsstärkungsgesetz setzt die EU-Richtlinie zur Barrierefreiheit (European Accessibility Act) in deutsches Recht um. Es verpflichtet Unternehmen, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten.

Wer ist betroffen?

• E-Commerce: Online-Shops und Buchungsplattformen
• Bankdienstleistungen: Online-Banking, Finanz-Apps
• Telekommunikation: Websites von Mobilfunk- und Internetanbietern
• Transport: Buchungssysteme für Reisen
• E-Books: Digitale Publikationen

💡 Ausnahme: Kleinstunternehmen (unter 10 Mitarbeiter UND unter 2 Mio. € Jahresumsatz) im Dienstleistungsbereich sind ausgenommen. Produkthersteller sind immer betroffen!

WCAG 2.1 - Der Standard

Die Web Content Accessibility Guidelines (WCAG) 2.1 bilden die Grundlage. Sie basieren auf vier Prinzipien:

Praktische Umsetzung

1. Alternativtexte für Bilder

<!-- Schlecht -->
<img src="produkt.jpg">

<!-- Gut -->
<img src="produkt.jpg" alt="Rotes Herren-T-Shirt aus Bio-Baumwolle, Größe M">

<!-- Dekoratives Bild (leerer Alt-Text) -->
<img src="dekoration.jpg" alt="" role="presentation">

2. Semantisches HTML verwenden

<!-- Schlecht -->
<div class="header">
    <div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>

<!-- Gut -->
<header>
    <nav aria-label="Hauptnavigation">...</nav>
</header>
<main>...</main>
<footer>...</footer>

3. Überschriften-Hierarchie

<!-- Richtige Reihenfolge -->
<h1>Seitentitel</h1>
    <h2>Hauptabschnitt</h2>
        <h3>Unterabschnitt</h3>
        <h3>Weiterer Unterabschnitt</h3>
    <h2>Nächster Hauptabschnitt</h2>

<!-- Keine Ebenen überspringen! -->

4. Farbkontraste

Mindestkontrastverhältnisse nach WCAG 2.1 AA:

• Normaler Text: Mindestens 4,5:1
• Großer Text (ab 18pt / 14pt fett): Mindestens 3:1
• Grafiken und UI-Elemente: Mindestens 3:1

/* Schlecht - Kontrast nur 2.5:1 */
.text { color: #999999; background: #ffffff; }

/* Gut - Kontrast 7:1 */
.text { color: #333333; background: #ffffff; }

🔧 Tool: Prüfen Sie Kontraste mit dem WebAIM Contrast Checker

5. Tastaturnavigation

/* Focus-Styles niemals entfernen! */
:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

/* Eigenen Focus-Style definieren */
button:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

6. Formulare richtig beschriften

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

<!-- Gut -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email" 
       aria-describedby="email-hint" required>
<span id="email-hint">Wir senden Ihnen eine Bestätigung.</span>

<!-- Fehlermeldungen -->
<input type="email" id="email" aria-invalid="true" 
       aria-describedby="email-error">
<span id="email-error" role="alert">
    Bitte geben Sie eine gültige E-Mail-Adresse ein.
</span>

7. ARIA richtig einsetzen

<!-- Button ohne nativen Button -->
<div role="button" tabindex="0" aria-pressed="false">
    Menü öffnen
</div>

<!-- Besser: Nativen Button verwenden -->
<button type="button" aria-expanded="false">
    Menü öffnen
</button>

<!-- Live-Regionen für dynamische Inhalte -->
<div aria-live="polite" aria-atomic="true">
    Artikel wurde zum Warenkorb hinzugefügt
</div>

Checkliste für barrierefreie Websites

1. ☐ Alle Bilder haben sinnvolle Alt-Texte
2. ☐ Videos haben Untertitel und Audiobeschreibungen
3. ☐ Überschriften-Hierarchie ist korrekt (H1 → H2 → H3)
4. ☐ Farbkontraste erfüllen WCAG-Anforderungen
5. ☐ Website ist vollständig per Tastatur bedienbar
6. ☐ Focus-Styles sind sichtbar
7. ☐ Formulare sind korrekt beschriftet
8. ☐ Fehlermeldungen sind verständlich
9. ☐ Sprache ist im HTML-Element definiert
10. ☐ Responsive Design funktioniert bis 400% Zoom

Test-Tools

• WAVE: wave.webaim.org - Browser-Extension
• axe DevTools: Chrome/Firefox Extension für detaillierte Tests
• Lighthouse: In Chrome DevTools integriert
• NVDA: Kostenloser Screenreader für Windows
• VoiceOver: Screenreader auf macOS/iOS

Strafen bei Nicht-Einhaltung

Bei Verstößen gegen das BFSG drohen:

• Bußgelder bis zu 100.000 €
• Abmahnungen durch Verbraucherschutzverbände
• Reputationsschäden

Weitere Hilfe

Wir unterstützen Sie bei der Umsetzung barrierefreier Websites:

• 📧 E-Mail: support@enjyn.de
• 📚 WCAG 2.1 Kurzreferenz