Die 10 häufigsten BFSG-Verstöße — und wie du sie sofort behebst
Wir haben hunderte Webseiten mit bf-check.de gescannt und ausgewertet, welche Barrierefreiheits-Fehler am häufigsten auftreten. Hier sind die Top 10 — mit konkreten Code-Beispielen zum direkten Kopieren. Du kannst die meisten dieser Probleme in weniger als einer Stunde lösen.
Bilder ohne alt-Text
Screenreader lesen Bilder nicht "sehen" — sie benötigen einen Text-Ersatz. Fehlt der
alt-Text, wissen blinde Nutzer nicht, was auf dem Bild ist. Für rein
dekorative Bilder reicht ein leeres alt-Attribut.
Schlecht:
<img src="produkt.jpg">Gut:
<img src="produkt.jpg" alt="Rote Winterjacke mit Kapuze und Fellkragen">Dekoratives Bild (z.B. Trennlinie):
<img src="trennung.png" alt="">alt="". Dauer: ~30 Min für eine mittlere Seite.
Fehlende Sprach-Definition im HTML
Screenreader müssen wissen, in welcher Sprache die Seite ist, um sie korrekt vorzulesen.
Ohne lang-Attribut wird deutsche Sprache oft mit englischer Aussprache gelesen.
Schlecht:
<html>Gut:
<html lang="de"><html>-Tag deines Templates. Dauer: 30 Sekunden.
Links ohne erkennbaren Text
Screenreader lesen nur "Link" vor, wenn kein Text im Link steht. Betrifft vor allem Icons (Facebook, Twitter, Warenkorb) und "Mehr lesen"-Buttons ohne Kontext.
Schlecht:
<a href="/facebook"><img src="fb-icon.png"></a>Gut:
<a href="/facebook" aria-label="Facebook-Seite von Mustermann GmbH">
<img src="fb-icon.png" alt="">
</a>aria-label-Attribut setzen, das beschreibt wohin er führt. Dauer: ~15-20 Min für typische Webseiten.
Formulare ohne Labels
Eingabefelder müssen ein zugeordnetes <label> haben. Ein Placeholder-Text
zählt nicht — er verschwindet sobald man etwas eintippt. Nutzer mit Screenreader hören
sonst nur "Editor".
Schlecht:
<input type="email" placeholder="Deine E-Mail">Gut:
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" placeholder="du@beispiel.de">Oder versteckt (visuell):
<label for="suche" class="sr-only">Suche</label>
<input type="search" id="suche" placeholder="Produkte suchen...">sr-only). Dauer: ~15 Min pro Formular.
Unzureichender Farbkontrast
Texte müssen einen Kontrast von mindestens 4.5:1 zum Hintergrund haben (oder 3:1 bei großen Texten ab 18pt). Graue Texte auf hellem Hintergrund sind der häufigste Verstoß.
Schlecht:
color: #888; background: #fff; /* Kontrast: 3.5:1 ❌ */Gut:
color: #595959; background: #fff; /* Kontrast: 7:1 ✓ */Übersprungene Überschriften-Ebenen
Überschriften müssen hierarchisch sein: H1 → H2 → H3, nicht H1 → H4. Screenreader-Nutzer navigieren per Überschriften und verlieren sonst die Orientierung.
Schlecht:
<h1>Über uns</h1>
<h4>Unser Team</h4> <!-- H2 oder H3 übersprungen -->Gut:
<h1>Über uns</h1>
<h2>Unser Team</h2>Buttons ohne erkennbaren Text
Ähnlich wie Links: Buttons mit nur Icons ohne Label sind für Screenreader unverständlich.
Schlecht:
<button><i class="menu-icon"></i></button>Gut:
<button aria-label="Menü öffnen">
<i class="menu-icon" aria-hidden="true"></i>
</button>aria-label auf Icon-Buttons, aria-hidden="true" auf dekorative Icons. Dauer: 5 Min.
Links öffnen neues Fenster ohne Warnung
Wenn ein Link ein neues Tab öffnet (target="_blank"), sollten Nutzer
vorab informiert werden. Sonst ist der Zurück-Button plötzlich ohne Funktion.
Schlecht:
<a href="https://externe-seite.de" target="_blank">Mehr Infos</a>Gut:
<a href="https://externe-seite.de" target="_blank" rel="noopener"
aria-label="Mehr Infos (öffnet in neuem Fenster)">Mehr Infos</a>target="_blank"-Links den Hinweis ins aria-label oder sichtbar im Text. Dauer: ~10 Min.
Fehlender "Skip to Content"-Link
Nutzer mit Tastatur-Navigation müssen sonst bei jeder Seite durch die ganze Navigation tabben bevor sie zum Inhalt kommen. Ein versteckter Skip-Link ist die einfachste Lösung.
Gut:
<body>
<a href="#content" class="skip-link">Zum Inhalt springen</a>
<nav>...</nav>
<main id="content">...</main>CSS:
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 10px;
top: 10px;
z-index: 9999;
}Fehlende ARIA-Landmarks
Semantische HTML5-Elemente (<nav>, <main>,
<footer>) geben Screenreadern die Struktur der Seite.
Ohne sie weiß der Screenreader nicht wo "Navigation" aufhört und "Inhalt" anfängt.
Schlecht:
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>Gut:
<header><nav>...</nav></header>
<main>...</main>
<footer>...</footer><div class="nav"> durch <nav> ersetzen, etc. Semantisch korrektes HTML5 nutzen. Dauer: 10 Min im Template.
🎯 Welche dieser Fehler hat DEINE Seite?
Unser kostenloser Scanner prüft alle diese Punkte (und noch ~40 weitere) in 30 Sekunden und zeigt dir konkret wo die Probleme liegen.
Jetzt kostenlos scannenDie 3 wichtigsten Sofort-Maßnahmen
Wenn du nur eine Stunde Zeit hast, konzentriere dich auf diese drei Dinge. Sie beseitigen ~70% deines Abmahnrisikos:
- Alle Bilder mit alt-Texten versehen (Fehler #1) — Größter Hebel
lang="de"im HTML-Tag setzen (Fehler #2) — 30-Sekunden-Fix- Formulare mit Labels versehen (Fehler #4) — Rechtssicher
Nachdem diese drei Sachen gefixt sind, lohnt sich der bf-check.de Scan nochmal — um zu sehen, welche Fehler noch übrig sind.
📊 Kostenloser BFSG-Scan deiner Webseite
30 Sekunden. Sofortiger Report. Keine Anmeldung. Direkter Link zu Lösungsvorschlägen für jeden gefundenen Fehler.
Jetzt scannen → bf-check.de