Die 5 häufigsten Barrierefreiheits-Fehler auf Webshops

94,8% aller Websites haben Fehler

Der WebAIM Million Report 2025 hat über 1 Million Webseiten analysiert und durchschnittlich **51 einzelne Barrierefreiheits-Fehler pro Seite** gefunden. Die Aktion Mensch hat gezielt deutsche und österreichische Webshops getestet — nur ein Drittel der untersuchten Shops erfüllt grundlegende Standards.

Hier sind die 5 häufigsten Fehler — und wie Sie sie beheben.

1. Zu geringe Kontraste — 79,1% betroffen

Das Problem: Hellgrauer Text auf weißem Hintergrund sieht elegant aus, ist aber für viele Menschen nicht lesbar. WCAG 1.4.3 verlangt ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für großen Text. Mit 79,1% ist dies der häufigste Fehler überhaupt.

Typische Stellen: Footer-Links, Placeholder-Texte in Formularen, Preise und Rabatt-Labels, Hinweistexte.

Der Fix: Prüfen Sie Ihre Farbkombinationen mit dem WebAIM Contrast Checker. Verwenden Sie für Fließtext mindestens #595959 auf weißem Hintergrund. Placeholder-Text in Formularen: mindestens #767676 — oder besser: verwenden Sie sichtbare Labels.

2. Fehlende Alt-Texte — 18,5% aller Bilder

Das Problem: Produktbilder haben keinen oder einen nichtssagenden Alt-Text wie "IMG_2847.jpg". Screenreader-Nutzer erfahren nicht, was auf dem Bild zu sehen ist. Laut WebAIM Million Report 2025 haben 55,5% aller Websites fehlende Alt-Texte — bei 44% davon betrifft es verlinkte Bilder, was die Navigation für Screenreader komplett bricht.

Der Fix: Beschreiben Sie das Produkt konkret: alt="Rotes Leinenkleid mit V-Ausschnitt, Größe S-XL, 89 Euro". Dekorative Bilder bekommen ein leeres alt="" damit sie von Screenreadern übersprungen werden.

3. Formulare ohne Labels — weit verbreitet

Das Problem: Suchfelder, Newsletter-Anmeldungen und der Checkout haben oft nur Placeholder-Text, aber kein HTML-Label. Sobald der Nutzer tippt, verschwindet der Placeholder.

Warum kritisch: Screenreader lesen das Label vor, nicht den Placeholder. Ohne Label ist das Feld für blinde Nutzer ein Rätsel. Auch problematisch für Menschen mit Gedächtnisschwierigkeiten.

Der Fix: Jedes Eingabefeld braucht ein zugeordnetes label-Element. Placeholder sind eine Ergänzung, kein Ersatz. Pflichtfelder mit aria-required="true" kennzeichnen.

4. Nicht-tastatur-bedienbare Elemente

Das Problem: Dropdown-Menüs, Slider, Modals, Tabs und Custom-Selects funktionieren nur mit der Maus. Tests der Aktion Mensch zeigen: nur 20 von 65 getesteten Websites waren vollständig per Tastatur bedienbar. Das bedeutet: rund 70% der Webshops schließen Menschen aus, die keine Maus benutzen können.

Warum kritisch: Nicht nur blinde Menschen nutzen die Tastatur — auch Menschen mit motorischen Einschränkungen, Tremor oder temporären Verletzungen sind darauf angewiesen.

Der Fix: Testen Sie Ihre Website nur mit der Tastatur: Tab, Enter, Escape, Pfeiltasten. Verwenden Sie native HTML-Elemente statt gestylter divs. Focus-Styles nie mit outline:none entfernen — passen Sie sie an Ihr Design an.

5. Fehlende Seitensprache und Struktur

Das Problem: Das lang-Attribut im HTML fehlt oder ist falsch gesetzt. Überschriften werden nicht hierarchisch verwendet. Landmarks (header, nav, main, footer) fehlen.

Warum kritisch: Ohne korrektes lang-Attribut liest der Screenreader in der falschen Sprache vor. Ohne korrekte Überschriften-Hierarchie können Screenreader-Nutzer nicht durch die Seite navigieren.

Der Fix: Eine Zeile reicht für die Seitensprache. Genau ein h1 pro Seite. Überschriften hierarchisch verwenden ohne Stufen zu überspringen. Semantische HTML5-Landmarks verwenden. Skip-Link am Anfang der Seite.

Bonus: Cookie-Banner als Barriere

Ein oft übersehenes Problem: Cookie-Banner, die den Hauptinhalt überlagern und schwer zu bedienen sind. Viele Cookie-Banner sind per Tastatur nicht erreichbar oder der "Ablehnen"-Button ist visuell versteckt.

Kostenlos prüfen

Mit dem BarriereRadar Gratis-Scan finden Sie diese und weitere Probleme in unter 60 Sekunden — mit konkreten Fix-Vorschlägen für jedes einzelne Problem.