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. Weitere Informationen finden Sie im BFSG-Glossar.
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.
Weiterlesen
Warum automatisierte Scans nicht jeden Fehler finden
Tools wie bf-check.de oder andere automatisierte Scanner erkennen zuverlässig strukturelle Probleme wie fehlende alt-Texte, fehlende Formular-Labels oder zu geringen Farbkontrast, weil sich diese Kriterien aus dem HTML-Code direkt ableiten lassen. Andere Barrieren lassen sich dagegen nur durch manuelles Testen aufdecken: ob eine Tab-Reihenfolge dem visuellen Aufbau der Seite entspricht, ob ein Screenreader Inhalte in sinnvoller Reihenfolge vorliest oder ob eine Fehlermeldung im Formular tatsächlich vorgelesen wird, sobald sie erscheint.
Ein automatisierter Scan ist deshalb ein guter erster Schritt, ersetzt aber keinen Test mit Tastatur und Screenreader. Plane für neue oder überarbeitete Seiten beides ein: den automatisierten Check für die Breite und einen manuellen Durchgang für die Tiefe.
Häufig gestellte Fragen
🎯 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