Zum Inhalt springen
Pandus
de Sprache ändern
Menü

Die 10 häufigsten Barrierefreiheitsfehler auf E-Commerce-Websites

· Lesezeit: 5 Min.

Die häufigsten Barrierefreiheitsfehler in Onlineshops sind schwacher Textkontrast, Bilder ohne Textalternative, Formularfelder ohne Beschriftung, Schaltflächen und Links ohne zugänglichen Namen sowie Bedienelemente, die nicht mit der Tastatur funktionieren. Die meisten stecken in wenigen Theme-Vorlagen, eine einmalige Korrektur verbessert also jede Seite. Hier sind die zehn Muster, die immer wieder auftauchen, mit dem, was sie für Ihre Kunden bedeuten, und wie Sie sie beheben.

1. Schwacher Textkontrast

Was es ist. Hellgrauer Text auf Weiß, weißer Text auf einem Banner in Pastellfarbe, ein blasses „Sale“-Badge. WCAG verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text (SC 1.4.3).

Warum es zählt. Kunden mit eingeschränktem Sehvermögen – und alle, die ihr Handy in der Sonne benutzen – können Preise, Größen oder Lieferinformationen nicht lesen.

So beheben Sie es. Passen Sie die Farbwerte in den Theme-Einstellungen an. Bei Shopify bieten die meisten Themes Text- und Schaltflächenfarben im Theme-Editor an; bei WooCommerce prüfen Sie den Customizer des Themes und die Stile eines eventuellen Page Builders. Platzhaltertext zählt ebenfalls.

2. Produktbilder ohne Alt-Text

Was es ist. Bilder ohne alt-Attribut oder mit Alt-Text wie „IMG_2041.jpg“ (SC 1.1.1).

Warum es zählt. Wer einen Screenreader nutzt, hört einen Dateinamen oder gar nichts und kann Produkte nicht voneinander unterscheiden.

So beheben Sie es. Füllen Sie im Shop-Backend das Alt-Text-Feld für jedes Produktbild aus. Beschreiben Sie, was für den Kauf wichtig ist: Farbe, Material, Ansicht. Dekorative Bilder erhalten ein leeres Alt.

3. Formularfelder ohne Beschriftung

Was es ist. Checkout-, Newsletter- oder Suchfelder, die statt eines echten, verknüpften Labels nur Platzhaltertext verwenden (SC 1.3.1, 3.3.2).

Warum es zählt. Sobald der Platzhalter verschwindet, vergessen sehende Nutzer, was sie eingeben sollten; Screenreader-Nutzer hören womöglich nur „Eingabefeld“. Im Checkout kann das einen Kauf verhindern.

So beheben Sie es. Verwenden Sie ein sichtbares <label>, das mit dem Eingabefeld verknüpft ist. Wenn Ihr Theme Labels visuell ausblendet, stellen Sie sicher, dass sie für assistive Technologien verfügbar bleiben.

Was es ist. Reine Icon-Schaltflächen für Warenkorb, Suche, Merkliste, Schließen oder Menü – ohne Textalternative (SC 4.1.2, 2.4.4).

Warum es zählt. Ein Screenreader sagt „Schaltfläche“ an, ohne jeden Hinweis darauf, was sie tut.

So beheben Sie es. Ergänzen Sie visuell versteckten Text oder ein aria-label wie „Warenkorb öffnen“ oder „Schließen“. Prüfen Sie auch Slider und Schnellansicht-Schaltflächen aus Apps.

5. Tastaturfallen in Pop-ups

Was es ist. Cookie-Banner, Newsletter-Pop-ups, Chat-Widgets oder Schnellansicht-Dialoge, in die man mit Tab hineinkommt, aber nicht wieder heraus, oder die sich nicht mit Escape schließen lassen (SC 2.1.2).

Warum es zählt. Tastaturnutzer stecken fest und verlassen die Seite.

So beheben Sie es. Machen Sie Dialoge mit Escape und einer beschrifteten Schließen-Schaltfläche schließbar, setzen Sie den Fokus an die vorherige Stelle zurück und testen Sie jedes Widget von Drittanbietern.

6. Unsichtbarer Fokus

Was es ist. Themes, die den Fokusrahmen mit outline: none entfernen (SC 2.4.7), oder fixierte Elemente, die das fokussierte Element verdecken (SC 2.4.11, neu in WCAG 2.2).

Warum es zählt. Tastaturnutzer sehen nicht, wo sie sich auf der Seite befinden.

So beheben Sie es. Fügen Sie einen deutlichen Fokusstil mit ausreichendem Kontrast hinzu und lassen Sie unter fixierten Kopfzeilen und Bannern genug Platz.

7. Winzige Zielflächen

Was es ist. Mengenauswahl, Farbfelder und Schließen-Icons, die kleiner als 24 × 24 CSS-Pixel sind und keinen Abstand haben (SC 2.5.8, neu in WCAG 2.2).

Warum es zählt. Menschen mit Zittern – und alle auf einem kleinen Handy – tippen auf das falsche Element.

So beheben Sie es. Vergrößern Sie die klickbare Fläche mit Padding; das sichtbare Icon kann klein bleiben.

8. Fehlende oder falsche Seitensprache

Was es ist. Das lang-Attribut fehlt oder passt nicht zum Inhalt, häufig in mehrsprachigen Shops (SC 3.1.1, 3.1.2).

Warum es zählt. Screenreader sprechen deutschen Text nach englischen Regeln aus oder umgekehrt.

So beheben Sie es. Setzen Sie für jede Sprachversion das korrekte lang am <html>-Element; Übersetzungs-Apps haben dafür meist eine Einstellung.

9. Unklare Fehlermeldungen

Was es ist. Ein roter Rahmen ohne Text oder ein allgemeines „Es ist ein Fehler aufgetreten“ oben im Checkout (SC 3.3.1, 3.3.3).

Warum es zählt. Kunden wissen nicht, welches Feld falsch ist oder wie sie es korrigieren, und brechen die Bestellung ab.

So beheben Sie es. Zeigen Sie eine Textmeldung direkt am Feld an („Geben Sie eine Postleitzahl mit 5 Ziffern ein“) und verschieben Sie den Fokus oder lassen Sie den Fehler ansagen.

10. Kaputte Überschriftenstruktur

Was es ist. Überschriften, die wegen ihrer Größe statt für die Struktur verwendet werden, fehlende H1 oder Produktnamen, die als normaler Text formatiert sind (SC 1.3.1, 2.4.6).

Warum es zählt. Screenreader-Nutzer navigieren über Überschriften; ohne sie ist eine Produktseite ein einziger langer Block.

So beheben Sie es. Eine H1 pro Seite (meist der Produkt- oder Kategoriename), gefolgt von logischen H2- und H3-Abschnitten. Korrigieren Sie das in der Vorlage, nicht Seite für Seite.

Was diese Fehler gemeinsam haben

Fast alle stecken in Vorlagen und Einstellungen, nicht in einzelnen Seiten. Ein Shop mit zehntausend Produkten hat oft weniger als zehn Vorlagen. Das ist eine gute Nachricht: Eine gezielte Korrekturrunde verändert die ganze Website.

Die meisten der zehn Fehler lassen sich zumindest teilweise durch einen automatischen Scan erkennen. Tastaturfallen, Fokussichtbarkeit und die Qualität von Fehlermeldungen erfordern eine manuelle Prüfung. Deshalb sind unsere Berichte eine automatische Prüfung, kein vollständiges Audit, und keine Rechtsberatung, und deshalb empfehlen wir nach jedem größeren Update einen kurzen Tastaturtest Ihres Checkouts.

Nächste Schritte

Sie möchten wissen, welche dieser zehn Fehler Ihr Shop hat? Starten Sie eine kostenlose Prüfung.

Weitere Artikel