SevirantaDie 10 häufigsten Barrierefreiheitsfehler in Onlineshops (und wie Sie sie beheben)
4. Juni 2026
Kurze Antwort. Die meisten Onlineshops scheitern nicht an Hunderten verschiedenen Dingen, sondern an derselben Handvoll Fehler: zu wenig Farbkontrast, fehlende Alt-Texte, Schaltflächen und Links ohne Namen, Felder ohne Label, eine unaufgeräumte Überschriftenstruktur und mangelhafte Tastaturbedienung. Die gute Nachricht: genau deshalb ist es lösbar — oft themenweit, sodass eine einzige Korrektur sofort Hunderte Seiten abdeckt.
Die WebAIM-Million-Studie zeigt, dass ~96 % der Startseiten messbare WCAG-Fehler aufweisen, und diese konzentrieren sich auf die folgenden zehn. Wollen Sie wissen, welche Ihre Website hat? Ganz unten scannen Sie eine Seite gratis.
1. Zu wenig Farbkontrast
Mit Abstand der häufigste Fehler. Hellgrauer Text auf Weiß oder eine Schaltflächen- farbe, die nur etwas zu blass ist, ist für sehbehinderte Menschen und bei hellem Sonnenlicht auf dem Smartphone unlesbar. Die Norm verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text (3:1 für großen Text).
Lösung: Machen Sie die Text- oder Hintergrundfarbe dunkler oder heller, bis das Verhältnis stimmt. In Shopify passen Sie das einmal in Ihren Theme-Einstellungen → Farben an, und es gilt sofort für Ihren gesamten Shop. Mehr dazu in Farbkontrast: die WCAG-Anforderung und wie Sie sie messen.
2. Bilder ohne Alt-Text
Ein Produktfoto ohne Alt-Text ist für einen Screenreader unsichtbar — eine blinde Kundin weiß dann nicht, um welches Produkt es sich handelt. Das trifft direkt Ihren Umsatz.
Lösung: Geben Sie jedem informativen Bild einen kurzen Alt-Text, der
beschreibt, was darauf zu sehen ist. In Shopify: Produkt → Medien → "Alt-Text
bearbeiten". Rein dekorative Bilder erhalten einen leeren Alt-Text (alt=""). Siehe
Alt-Texte schreiben, die funktionieren.
3. Schaltflächen ohne Namen
Eine Schaltfläche, die nur ein Icon zeigt (Warenkorb, Suche, Menü), wird von einem Screenreader als "Schaltfläche" vorgelesen — ohne dass der Nutzer weiß, was sie bewirkt.
Lösung: Geben Sie der Schaltfläche Text oder ein aria-label, das die Aktion
beschreibt, zum Beispiel aria-label="In den Warenkorb".
4. Links ohne eindeutigen Text
Wie bei Schaltflächen: Ein Link, der nur aus einem Icon besteht, oder "Mehr lesen"-Links ohne Kontext sagen einem Screenreader-Nutzer nicht, wohin er gelangt.
Lösung: Geben Sie dem Link sichtbaren, beschreibenden Text oder ein aria-label
("Warenkorb ansehen" statt eines nackten Warenkorb-Icons).
5. Eingabefelder ohne Label
Such-, Login- und Checkout-Felder ohne verknüpftes Label sind mit Hilfstechnologien schwer oder gar nicht zu bedienen. Gerade beim Checkout kostet Sie das Kunden.
Lösung: Verknüpfen Sie ein sichtbares <label> mit jedem Eingabefeld (über
for/id) oder verwenden Sie ein aria-label, wenn kein Platz für sichtbaren Text
ist.
6. Eine unaufgeräumte Überschriftenstruktur
Screenreader-Nutzer navigieren über Überschriften, so wie Sie über ein Inhaltsverzeichnis. Wenn Sie von einer H1 zu einer H4 springen oder Überschriften nur für die Optik nutzen, zerbricht diese Struktur.
Lösung: Verwenden Sie Überschriften in logischer Reihenfolge (H1 → H2 → H3) und regeln Sie die Optik mit CSS, nicht über die Überschriftenebene.
7. Fehlendes Sprachattribut
Ohne Sprachattribut weiß ein Screenreader nicht, ob Ihre Seite Deutsch oder Englisch ist, und liest alles mit der falschen Aussprache vor.
Lösung: Setzen Sie lang="de" (oder die richtige Sprache) auf das
<html>-Element. In Shopify steht das in theme.liquid — meist bereits vorhanden,
aber manchmal leer.
8. Nicht mit der Tastatur bedienbar
Viele Menschen verwenden keine Maus. Wenn ein Menü, Slider oder Pop-up nur mit der Maus funktioniert oder wenn Sie nicht sehen können, wo der Fokus steht, schließen Sie diese Besucher aus.
Lösung: Sorgen Sie dafür, dass alles mit der Tab-Taste erreichbar ist, dass es einen sichtbaren Fokusrahmen gibt und dass Pop-ups den Fokus nicht "gefangen" halten.
9. Falsch eingesetztes ARIA
ARIA-Attribute können Hilfstechnologien unterstützen — aber falsch oder ungültig eingesetzt richten sie eher Schaden an. Das schleicht sich oft über installierte Apps oder Theme-Komponenten ein.
Lösung: Verwenden Sie ARIA nur dort, wo es nötig ist, und mit gültigen Werten. Kommt es aus einer App oder einem Theme, prüfen Sie diese Komponente.
10. Kein eindeutiger Seitentitel
Eine Seite ohne eindeutigen <title> zeigt im Browser-Tab und bei Screenreadern
keinen erkennbaren Namen — das Navigieren zwischen Tabs wird zum Ratespiel.
Lösung: Geben Sie jeder Seite einen eindeutigen, beschreibenden Titel. Shopify füllt das meist automatisch aus; prüfen Sie Ihre angepassten Templates.
Was ist der häufigste Barrierefreiheitsfehler?
Zu wenig Farbkontrast ist mit Abstand der häufigste Fehler — er steht in nahezu jeder großangelegten Studie deutlich an erster Stelle, weil er sich unbemerkt in Theme-Farben, Schaltflächentexte und Preisangaben einschleicht. Zugleich ist er einer der am einfachsten zu behebenden Fehler: einmal die Theme-Farben richtig setzen, und es gilt shopweit.
Lassen sich diese Fehler in einem Zug beheben?
Oft ja. Weil ein Onlineshop mit Templates arbeitet, tritt derselbe Fehler meist auf Hunderten Seiten gleichzeitig auf — und lässt sich daher auch themenweit reparieren. Eine Anpassung an Ihrem Theme (Farben, Überschriften, Labels) deckt dann mit einem Schlag Ihren gesamten Shop ab.
Erfasst ein kostenloser Scan all diese Fehler?
Ein automatisierter Scan stellt etwa 57 % der Probleme zuverlässig maschinell fest; der Rest erfordert eine menschliche Bewertung. Diese 57 % umfassen gerade die oben genannten Fehler — Kontrast, Alt-Texte, Labels, Schaltflächen, Überschriften — ein Scan bringt also den Löwenanteil sofort ins Bild, samt der passenden Korrektur.
Neugierig, welche dieser zehn auf Ihrer Website stehen? Fügen Sie Ihre URL ein und scannen Sie eine Seite gratis in voller Tiefe — ohne Konto, in weniger als 60 Sekunden.