Die häufigsten Barrierefreiheitsfehler auf Websites

Barrierefreiheitsprobleme sind häufig dieselben – egal ob kleines Unternehmen oder großer Konzern. Diese sechs Fehler tauchen bei fast jeder Website auf und sind oft schnell behebbar.

Hinweis: Automatische Tests finden diese Fehler gut. Es gibt jedoch WCAG-Kriterien, die nur durch manuelle Prüfung überprüft werden können (z. B. Qualität von Alt-Texten oder Verständlichkeit von Texten).

Fehlende Alt-Texte bei Bildern

1.1.1 Nicht-Text-Inhalt

Bilder ohne aussagekräftigen Alt-Text sind für Screenreader-Nutzer unsichtbar. Dekorative Bilder erhalten alt="" (leeres Attribut), inhaltstragende Bilder eine konkrete Beschreibung.

Fix

Füge jedem <img>-Tag ein alt-Attribut hinzu. Bei Icons ohne Text nutze aria-hidden="true".

Unzureichender Farbkontrast

1.4.3 Kontrast (Minimum)

Heller Text auf hellem Hintergrund (oder dunkler Text auf dunklem) ist für Menschen mit Sehschwäche oder Farbenblindheit kaum lesbar. Mindestanforderung: 4,5:1 für normalen Text, 3:1 für großen Text.

Fix

Nutze einen Kontrast-Checker (z. B. WebAIM). Passe Schrift- oder Hintergrundfarbe an, bis die Anforderung erfüllt ist.

Formularfelder ohne Label

1.3.1 Info und Beziehungen, 3.3.2 Beschriftungen oder Anweisungen

Ein Eingabefeld mit nur einem Platzhalter ("E-Mail eingeben") reicht nicht. Screenreader lesen Placeholder oft nicht vor, und er verschwindet beim Tippen.

Fix

Verwende <label for="id">E-Mail</label> oder aria-label für jedes Eingabefeld. Placeholder ist keine Label-Alternative.

Keine Tastaturnavigation

2.1.1 Tastatur

Viele Nutzer navigieren ausschließlich per Tastatur. Wenn Custom-Buttons, Dropdowns oder Modals nicht per Tab erreichbar oder per Enter/Escape steuerbar sind, sind diese Inhalte für sie unzugänglich.

Fix

Teste deine Website komplett per Tab-Taste. Nutze semantische HTML-Elemente (<button>, <a>), die von Natur aus tastaturfähig sind.

Fehlende Seitensprache

3.1.1 Sprache der Seite

Ohne lang-Attribut im <html>-Tag weiß der Screenreader nicht, in welcher Sprache er vorlesen soll. Das führt zu falsch betonter oder unverständlicher Ausgabe.

Fix

Ergänze <html lang="de"> in deinem Root-Layout. Für Abschnitte in anderer Sprache: <span lang="en">.

Kein Skip-Link

2.4.1 Blöcke überspringen

Tastaturnutzer und Screenreader-User müssen sonst bei jeder Seite die gesamte Navigation durchklicken, bevor sie zum Hauptinhalt gelangen.

Fix

Füge als erstes Element im Body einen versteckten Link ein: <a class="sr-only focus:not-sr-only" href="#main">Zum Inhalt springen</a>.

Wie viele dieser Fehler hat deine Website?

Finde es in ~30 Sekunden heraus – mit dem kostenlosen Sofort-Scan.

Jetzt kostenlos prüfen →