1. Zu wenig Farbkontrast
Betrifft 79,1% aller Websites. Der mit Abstand häufigste Fehler. Text ist zu schlecht vom Hintergrund zu unterscheiden - hellgrauer Text auf weißem Grund, dunkler Text auf dunklem Hintergrund.
Warum das ein Problem ist: Menschen mit Sehschwäche, ältere Menschen oder jeder der sein Handy bei Sonnenlicht benutzt kann den Text nicht lesen.
WCAG-Anforderung: Normaler Text braucht mindestens 4,5:1 Kontrastverhältnis, großer Text (ab 24px oder 18px fett) mindestens 3:1 (WCAG 1.4.3).
So beheben Sie es: Prüfen Sie Ihre Farben mit unserem Kontrast-Checker. Vermeiden Sie hellgrau auf weiß, verwenden Sie kräftigere Farben oder dunklere Hintergründe.
2. Fehlende Alt-Texte bei Bildern
Betrifft 55,5% aller Websites. Bilder ohne Alternativtext sind für Screenreader-Nutzer unsichtbar. Besonders kritisch: 44% der betroffenen Bilder sind verlinkt - ohne Alt-Text ist die Navigation komplett unbrauchbar.
Warum das ein Problem ist: Blinde Nutzer wissen nicht, was das Bild zeigt oder wohin ein verlinktes Bild führt. Der Screenreader liest stattdessen den Dateinamen vor - "IMG_20240315_143022.jpg" hilft niemandem.
So beheben Sie es: Jedes informative Bild braucht einen beschreibenden Alt-Text. Dekorative Bilder bekommen ein leeres Alt-Attribut (alt=""). Mehr dazu: Alt-Texte richtig schreiben.
3. Leere Links
Betrifft 45,3% aller Websites. Links ohne erkennbaren Text - zum Beispiel ein Icon ohne Beschriftung, ein Bild-Link ohne Alt-Text oder ein Link der nur aus Leerzeichen besteht.
Warum das ein Problem ist: Der Screenreader sagt "Link" - aber nicht wohin. Der Nutzer muss raten.
So beheben Sie es: Jeder Link braucht einen sichtbaren oder per aria-label zugänglichen Text, der das Ziel beschreibt. Statt "Hier klicken" besser "Zur Barrierefreiheits-Checkliste".
4. Fehlende Formular-Labels
Betrifft 44,6% aller Websites. Eingabefelder ohne zugeordnete Beschriftung. Der Nutzer sieht vielleicht einen Platzhaltertext im Feld, aber der Screenreader kann ihn nicht zuordnen.
Warum das ein Problem ist: Ohne Label weiß der Screenreader nicht, was in das Feld eingetragen werden soll. "Eingabefeld" statt "E-Mail-Adresse".
So beheben Sie es: Jedes Eingabefeld braucht ein <label>-Element mit einem for-Attribut das auf die id des Feldes zeigt. Platzhaltertext ersetzt kein Label.
5. Leere Buttons
Betrifft 26,1% aller Websites. Buttons ohne Text - häufig bei Icon-Buttons (Hamburger-Menü, Suche, Schließen-Kreuz) die nur ein SVG oder Bild enthalten.
Warum das ein Problem ist: Der Screenreader sagt "Button" - aber nicht was der Button tut.
So beheben Sie es: Ergänzen Sie ein aria-label-Attribut: <button aria-label="Menü öffnen">. Oder fügen Sie einen visuell versteckten Text ein.
6. Fehlende Dokumentsprache
Betrifft 15,8% aller Websites. Das lang-Attribut auf dem <html>-Element fehlt.
Warum das ein Problem ist: Ohne Sprachangabe weiß der Screenreader nicht, in welcher Sprache er vorlesen soll. Ein deutscher Text wird dann möglicherweise mit englischer Aussprache vorgelesen - unverständlich.
So beheben Sie es: Setzen Sie <html lang="de"> am Anfang Ihrer Seite. Das ist eine Zeile Code.
7. Fehlende oder falsche Überschriften-Struktur
Übersprungene Überschriften-Ebenen (z.B. von H1 direkt zu H3), fehlende H1, mehrere H1 auf einer Seite oder Überschriften die nur zum Styling verwendet werden.
Warum das ein Problem ist: Screenreader-Nutzer navigieren über Überschriften durch die Seite - wie ein Inhaltsverzeichnis. Wenn die Struktur nicht stimmt, finden sie sich nicht zurecht.
So beheben Sie es: Genau eine H1 pro Seite, darunter H2, dann H3. Keine Ebene überspringen. Überschriften nur für tatsächliche Überschriften verwenden, nicht für die Schriftgröße.
8. Fokus-Indikator entfernt
Viele Websites entfernen den Fokus-Rahmen per CSS (outline: none) weil er "hässlich" aussieht.
Warum das ein Problem ist: Tastaturnutzer sehen nicht mehr, welches Element gerade ausgewählt ist. Sie navigieren blind durch die Seite.
So beheben Sie es: Entfernen Sie nie den Fokus-Indikator. Gestalten Sie ihn stattdessen passend zu Ihrem Design - ein gut sichtbarer Rahmen mit ausreichend Kontrast (WCAG 2.4.7, 2.4.11).
9. Keine Tastaturnavigation möglich
Interaktive Elemente die nur per Maus funktionieren - Custom-Dropdowns, Slider, Tabs die mit <div onclick> statt <button> gebaut sind.
Warum das ein Problem ist: Menschen die keine Maus bedienen können (motorische Einschränkungen, Zittern, fehlende Gliedmaßen) können die Website nicht nutzen.
So beheben Sie es: Verwenden Sie native HTML-Elemente (<button>, <a>, <input>) statt <div> mit JavaScript. Native Elemente sind automatisch per Tastatur bedienbar.
10. Automatisch abspielende Inhalte
Videos, Animationen oder Slider die sich ohne Nutzer-Aktion bewegen oder abspielen.
Warum das ein Problem ist: Ablenkung für Menschen mit Aufmerksamkeitsstörungen, Anfallsrisiko bei schnellen Animationen, Audioüberlagerung mit Screenreadern.
So beheben Sie es: Keine automatische Wiedergabe. Wenn Bewegung nötig ist: Pause-Button anbieten und prefers-reduced-motion in CSS respektieren.
Die gute Nachricht
Sechs Fehlertypen verursachen 96% aller gefundenen Probleme (Quelle: WebAIM 2026). Das bedeutet: Wenn Sie die ersten sechs Punkte auf dieser Liste beheben, beseitigen Sie den Großteil aller Barrieren auf Ihrer Website. Die meisten dieser Fehler sind mit wenig Aufwand lösbar - kein teures Redesign nötig.
Prüfen Sie Ihre Website jetzt mit unserer Checkliste oder den kostenlosen Prüftools.