Die häufigsten Barrierefreiheitsfehler in Online-Shops und wie man sie behebt

Warum automatische Prüfungen mehr aufdecken als erwartet

Die meisten Online-Shop-Betreiber gehen davon aus, dass ihre Website barrierefrei ist. Das Gegenteil ist häufig der Fall. Eine automatische Prüfung deckt typischerweise Dutzende bis Hunderte von Befunden selbst bei scheinbar normalen Online-Shops auf.

Die Automatisierung deckt etwa 30–50 % der WCAG 2.1 AA-Regeln ab. Was sind die häufigsten Probleme?

Fehlende Alt-Texte

Der am weitesten verbreitete Befund. Bilder ohne Textbeschreibung (das alt-Attribut) sind für Nutzer mit Screenreadern völlig unzugänglich.

So beheben Sie es:

• Funktionale Bilder (Produkte, Illustrationen, Logos): eine aussagekräftige Beschreibung dessen, was das Bild zeigt oder was die Schaltfläche tut
• Dekorative Bilder (Hintergründe, Verzierungen): leeres alt-Attribut, damit Screenreader sie korrekt überspringen
• Bilder mit Text: der Text muss im alt-Attribut enthalten sein

Geringer Farbkontrast

Das zweithäufigste Problem. WCAG 2.1 AA erfordert ein Mindestkontras​tverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text (18 pt oder 14 pt fett). Schlechter Kontrast beeinträchtigt Menschen mit Sehschwäche.

Typische problematische Elemente: eine helle Schaltfläche 'In den Warenkorb' auf weißem Hintergrund, grauer Beschreibungstext, Fehlermeldungen in blasser Farbe, Text auf Bild-Bannern.

So beheben Sie es: Tools wie der Colour Contrast Analyser oder ein automatischer Scan zeigen Ihnen sofort, welche Stellen den Standard nicht erfüllen.

Unzugängliche Formulare

Formulare sind ein kritischer Punkt in jedem Online-Shop. Die häufigsten Probleme:

• Fehlendes Label für ein Feld: ein E-Mail-Feld ohne programmatisch zugeordnetes Label ist für einen Screenreader nicht erkennbar
• Fehlermeldungen nicht über ARIA angekündigt: ein Nutzer mit Screenreader sieht nicht, dass ein Fehler aufgetreten ist
• Pflichtfelder ohne Kennzeichnung: ein Sternchen (*) ohne Texterklärung reicht nicht aus
• Schaltflächen ohne aussagekräftigen Text: 'Bestätigen' ist besser als nur ein Symbol ohne Beschreibung

Probleme mit der Tastaturnavigation

Ihr nationales Gesetz zur Umsetzung der EAA verlangt, dass der gesamte Online-Shop ohne Maus bedienbar ist. Die häufigsten Probleme:

• Fehlender sichtbarer focus ring: wenn ein Nutzer mit der Tab-Taste durch die Seite navigiert, muss er immer sehen können, wo er sich befindet
• Keyboard trap: ein Nutzer bleibt in einem modalen Fenster oder Menü gefangen und kann es nicht mit der Tastatur verlassen
• Schlechte Tab-Reihenfolge: Tab springt auf unnatürliche Weise über die Seite

Unzugängliche interaktive Elemente

Schaltflächen und Links müssen einen zugänglichen Namen haben, damit assistive Technologien sie korrekt ankündigen. Problematische Muster:

• Schaltfläche nur mit Symbol ohne Text oder aria-label
• Link mit dem Text 'Klicken Sie hier' oder 'Mehr' ohne Kontext
• Interaktives div oder span ohne role='button' und Tastaturunterstützung

So beginnen Sie mit der Behebung

Empfohlenes Vorgehen:

1. Führen Sie einen automatischen Scan durch — identifizieren Sie die wirkungsvollsten Probleme schnell und kostenlos
2. Priorisieren Sie nach Schweregrad: kritische (critical) und schwerwiegende (serious) Befunde zuerst beheben
3. Technische Fehler korrigieren: Alt-Texte, Kontrast und Formular-Labels sind verhältnismäßig einfache Korrekturen
4. Beauftragen Sie ein manuelles Audit: die übrigen Regeln (Verständlichkeit, Verhalten bei Screenreadern) erfordern menschliches Urteilsvermögen

Denken Sie daran: automatische Prüfungen decken etwa 30–50 % der WCAG-Regeln ab. Die Behebung automatisch erkannter Fehler ist ein notwendiger, aber nicht ausreichender Schritt zur Erfüllung Ihres nationalen Gesetzes zur Umsetzung der EAA.