Die 10 häufigsten Barrierefreiheits-Probleme bei deutschen Online-Shops

Seit Juni 2025 müssen Online-Shops in Deutschland den European Accessibility Act (EAA) erfüllen. Doch die Realität sieht anders aus: Bei der Analyse hunderter deutscher E-Commerce-Websites zeigen sich immer wieder dieselben Fehler. Hier sind die zehn häufigsten — und wie ihr sie behebt.

1. Fehlende Alt-Texte bei Produktbildern

Das häufigste Problem in Online-Shops: Produktbilder ohne alt-Attribut oder mit nichtssagenden Texten wie "Bild1.jpg". Für Screenreader-Nutzer sind diese Bilder unsichtbar — sie hören nur "Grafik" oder gar nichts. Ein guter Alt-Text beschreibt das Bild präzise: "Rotes Herren-T-Shirt mit V-Ausschnitt, Größe M" statt "Produktfoto".

Fix: Jedes <img> braucht ein aussagekräftiges alt-Attribut. Rein dekorative Bilder erhalten alt="" (leerer String).

2. Unzureichende Farbkontraste

Hellgrauer Text auf weißem Hintergrund ist ein Klassiker — und ein WCAG-Verstoß. WCAG 2.1 AA fordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (ab 18pt/24px oder 14pt/19px fett). Besonders häufig betroffen: Platzhaltertexte in Formularfeldern, "Sale"-Badges, sekundäre Buttons und Footer-Links.

Fix: Verwendet den WebAIM Contrast Checker oder das Browser-Devtool, um alle Textfarben zu prüfen. Dunkelt helle Grautöne nach — oft reicht eine kleine Anpassung.

3. Nicht per Tastatur bedienbare Navigation

Viele Online-Shops sind per Maus perfekt zu bedienen — per Tastatur aber kaum. Nutzer, die auf Tastaturnavigation angewiesen sind (motorische Einschränkungen, keine Maus), können dann weder Dropdown-Menüs öffnen noch Produkte in den Warenkorb legen.

Fix: Testet eure Website mit Tab, Enter, Leertaste und Pfeiltasten. Alle interaktiven Elemente (Links, Buttons, Formulare, Modals) müssen per Tastatur erreichbar und bedienbar sein. Focus-Trapping in Dialogen ist korrekt zu implementieren.

4. Fehlende oder falsche ARIA-Labels

Icon-Buttons ohne Text — zum Beispiel ein "X" zum Schließen eines Modals oder ein Warenkorb-Symbol — werden von Screenreadern nur als "Schaltfläche" vorgelesen, ohne zu erklären, was sie tun. Auch Slideshows und Akkordeons verwenden oft falsche oder fehlende aria-label- und aria-expanded-Attribute.

Fix: Icon-only Buttons brauchen ein aria-label oder einen visuell versteckten Span-Text. Dynamische Komponenten (Akkordeons, Tabs, Modals) müssen korrekte ARIA-Rollen und States verwenden.

5. Formularfelder ohne Labels

Checkout-Formulare ohne korrekte <label>-Elemente sind ein sehr häufiger Fehler. Wenn Felder nur durch Placeholder-Text beschriftet sind, verschwinden die Hinweise beim Eintippen — und Screenreader lesen Placeholder oft gar nicht oder inkonsistent vor.

Fix: Jedes Formularfeld braucht ein <label for="feldId"> oder ein aria-label. Placeholder ersetzt kein Label.

6. Fehlende Fokus-Indikatoren

Viele Designs entfernen den Standard-Fokusrahmen des Browsers mit outline: none — aus ästhetischen Gründen. Für Tastaturnutzer ist das fatal: Sie sehen nicht mehr, welches Element gerade aktiv ist.

Fix: Niemals outline: none ohne Alternative. Gestaltet eigene Fokus-Stile, die gut sichtbar sind: :focus-visible als CSS-Selektor erlaubt es, den Fokus nur für Tastaturnutzer anzuzeigen, nicht beim Mausklick.

7. Falsche Überschriften-Hierarchie

Online-Shops springen oft von H1 direkt zu H4, oder verwenden Überschriften nur aus optischen Gründen (weil sie fett und groß aussehen). Screenreader-Nutzer navigieren Seiten über Überschriften — eine chaotische Hierarchie macht die Navigation unbrauchbar.

Fix: Jede Seite hat genau ein <h1>. Unterthemen sind <h2>, Sub-Unterthemen <h3>. Keine Ebene überspringen.

8. Videos ohne Untertitel

Produktvideos, Erklärvideeos und Werbefilme ohne Untertitel sind für gehörlose und schwerhörige Nutzer nicht zugänglich. WCAG 2.1 AA fordert Untertitel für alle voraufgezeichneten Videos mit Audio-Inhalten (Erfolgskriterium 1.2.2).

Fix: Fügt allen Videos WebVTT-Untertitel hinzu. Tools wie YouTube Studio generieren automatische Untertitel, die nachbearbeitet werden können.

9. Unzugängliche Modals und Overlays

Cookie-Banner, Newsletter-Popups, Warenkorb-Sidebars: Diese Overlays sind häufig per Tastatur nicht korrekt zu schließen, der Fokus wandert nicht ins Modal, und nach dem Schließen kehrt er nicht zum auslösenden Element zurück. Für Tastaturnutzer führt das in Sackgassen.

Fix: Modals brauchen korrektes Focus-Trapping (Tab bleibt im Modal), eine Schließen-Funktion per Escape-Taste, die Rolle role="dialog" und ein aria-modal="true".

10. Fehlende Sprachauszeichnung

Das lang-Attribut im HTML-Element gibt Screenreadern und Übersetzungstools an, in welcher Sprache die Seite verfasst ist. Fehlt es, liest der Screenreader deutschen Text mit falscher Aussprache vor — das macht den Inhalt unverständlich.

Fix: <html lang="de"> — eine Zeile, die riesigen Unterschied macht. Fremdsprachige Abschnitte erhalten ebenfalls ein lang-Attribut.

Wie schlecht ist euer Shop?

Die gute Nachricht: Die meisten dieser Probleme sind mit überschaubarem Aufwand zu beheben. Das Schwierigste ist oft, sie überhaupt zu finden. Ein automatisierter Scan gibt euch eine schnelle Übersicht — kostenlos und ohne Anmeldung.