Die 10 häufigsten Barrieren — und ihre Lösungen
Aus tausenden automatischen Scans und Prüfberichten: Diese Fehler finden sich auf fast jeder Website. Die gute Nachricht: Alle zehn sind ohne Redesign behebbar.
1. Fehlende oder nutzlose Alternativtexte
Bilder ohne alt-Attribut — oder mit „IMG_2043.jpg" als Text.
Screenreader-Nutzer erfahren dann nichts oder Unsinn.
Lösung: Informative Bilder beschreiben („Team vor dem Firmengebäude"),
dekorative mit alt="" leeren. Prüfschritt 9.1.1.1b.
2. Zu schwache Farbkontraste
Hellgrauer Text (#999) auf Weiß erreicht nur 2,8:1 — gefordert sind 4,5:1. Lösung: Farben mit dem Kontrast-Checker prüfen; oft genügt eine Stufe dunkler (#767676 schafft exakt 4,54:1). Prüfschritt 9.1.4.3.
3. Platzhalter statt Beschriftung
Formularfelder, deren einzige „Beschriftung" der Platzhaltertext ist — der beim
Tippen verschwindet. Lösung: Sichtbares <label for="…">
für jedes Feld. Prüfschritte 9.3.3.2 / 9.1.3.1h.
4. Der unsichtbare Tastaturfokus
outline: none im CSS — und Tastaturnutzer sind blind für ihre Position.
Lösung: Fokus-Stile gestalten statt löschen:
:focus-visible { outline: 3px solid #1d5fd6; }. Prüfschritt 9.2.4.7.
5. Klick-Elemente, die keine sind
<div onclick="…"> sieht aus wie ein Button, ist aber weder
fokussierbar noch für Screenreader als Bedienelement erkennbar.
Lösung: Echte <button>- und
<a>-Elemente verwenden. Prüfschritte 9.2.1.1 / 9.4.1.2.
6. „Hier klicken" und „mehr"
Screenreader-Nutzer springen von Link zu Link — „mehr, mehr, hier, mehr" hilft niemandem. Lösung: Linktexte, die das Ziel benennen („Preisliste als PDF herunterladen"). Prüfschritt 9.2.4.4.
7. Chaotische Überschriften-Struktur
Drei h1, dann ein Sprung zu h5, Fett-Text statt Überschrift. Lösung: Eine h1 pro Seite, Ebenen ohne Sprünge, jede visuelle Überschrift auch als h-Element auszeichnen. Prüfschritt 9.1.3.1a.
8. Videos ohne Untertitel
Für gehörlose und schwerhörige Menschen — und für alle im Großraumbüro.
Lösung: Untertitel-Spur (<track kind="captions">
oder im Player), bei wichtigen Inhalten zusätzlich Transkript.
Prüfschritte 9.1.2.2 ff.
9. Zoom-Verbot auf Mobilgeräten
user-scalable=no im viewport-Meta sperrt sehbehinderte Nutzer aus.
Lösung: Das Attribut ersatzlos streichen — modernes responsives
Design braucht es nicht. Prüfschritt 9.1.4.4.
10. Fehlende Sprachauszeichnung
Ohne <html lang="de"> raten Screenreader die Aussprache —
deutscher Text mit englischer Stimme ist kaum verständlich.
Lösung: Eine Zeile Code. Prüfschritt 9.3.1.1.
Wie viele davon hat Ihre Website? Unser Prüfwerkzeug findet alle zehn automatisch — plus das, was nur eine geführte manuelle Prüfung aufdeckt.