Die häufigsten Barrierefreiheits-Fehler und wie man sie behebt

Top 10 der häufigsten Fehler

1. Fehlende Alt-Texte bei Bildern

Der häufigste Fehler überhaupt. Jedes Bild, das Informationen vermittelt, braucht einen beschreibenden Alt-Text. Dekorative Bilder sollten ein leeres alt-Attribut haben.

2. Unzureichender Farbkontrast

Text muss gegen seinen Hintergrund ein Kontrastverhältnis von mindestens 4.5:1 haben (3:1 für großen Text). Nutzen Sie einen Kontrast-Checker.

3. Fehlende Formular-Labels

Jedes Eingabefeld braucht ein zugeordnetes Label-Element. Placeholder-Text ist kein Ersatz für Labels.

4. Nicht erreichbare interaktive Elemente

Buttons, Links und Formularfelder müssen per Tastatur (Tab/Enter) erreichbar und bedienbar sein.

5. Fehlende Seitensprache

Das lang-Attribut im HTML-Tag hilft Screenreadern, den Text korrekt vorzulesen.

6. Leere Links und Buttons

Interaktive Elemente ohne sichtbaren Text brauchen ein aria-label oder sr-only Text.

7. Fehlende Heading-Hierarchie

Überschriften sollten eine logische Reihenfolge haben (h1 → h2 → h3), ohne Ebenen zu überspringen.

8. Nicht-responsive Designs

Inhalte müssen bei 200% Zoom noch nutzbar sein, ohne horizontales Scrollen.

9. Automatisch abspielende Medien

Videos und Audio sollten nicht automatisch starten. Nutzer brauchen die Möglichkeit, Medien zu pausieren.

10. Fehlende Skip-Navigation

Ein "Zum Inhalt springen"-Link am Seitenanfang ermöglicht es Tastaturnutzern, die Navigation zu überspringen.