Onlineshop barrierefrei machen: die 7 häufigsten Fehler

Wir prüfen regelmäßig Onlineshops auf Barrierefreiheit. Dabei fällt auf: Selbst bekannte Marken haben oft mehrere Mängel, die sich auf jeder Seite wiederholen. Die gute Nachricht: Wer die typischen Fehler kennt, kann viele davon selbst erkennen. Hier sind die sieben häufigsten – mit Tipps für Shopify und WooCommerce.

Warum das Thema seit 2025 so wichtig ist, erklären wir im Artikel Muss mein Onlineshop barrierefrei sein?

1. Produktbilder und Logos ohne Alternativtext

Ein Screenreader liest blinden Menschen die Seite vor. Bei einem Bild ohne Alternativtext („Alt-Text“) hört man nur den Dateinamen – etwa „IMG_4711.jpg“ – oder gar nichts. Besonders oft fehlen Alt-Texte bei Logos im Footer (Zahlungsarten, Versanddienstleister, Gütesiegel) und bei Bannern.

• Gut: „Bio-Müsli mit Erdbeeren, 575-g-Packung“
• Schlecht: „Produktbild“ oder „muesli_final_2.jpg“
• Rein dekorative Bilder bekommen einen leeren Alt-Text, damit sie übersprungen werden.

Shopify: Produkt öffnen → auf das Bild klicken → „Alt-Text hinzufügen“. WooCommerce: Mediathek → Bild anklicken → Feld „Alternativer Text“.

2. Zu schwache Farbkontraste

Hellgraue Schrift auf weißem Grund sieht elegant aus – ist aber für viele Menschen kaum lesbar, besonders auf dem Handy in der Sonne. Die WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 : 1, für große Schrift 3 : 1. Typische Problemstellen: Preise, durchgestrichene Altpreise, Platzhaltertexte in Formularen und weiße Schrift auf hellen Bannerbildern.

Tipp: Den Kontrast prüfst du kostenlos mit dem „Contrast Checker“ von WebAIM. Meist reicht es, im Theme eine Textfarbe etwas dunkler zu stellen.

3. Symbol-Buttons ohne Namen

Lupe, Warenkorb, Herz, Hamburger-Menü, „ד zum Schließen, „+“ und „−“ bei der Menge: Sehende verstehen die Symbole sofort. Ein Screenreader liest aber nur „Schaltfläche“ vor – ohne zu sagen, was sie tut. Das ist einer der häufigsten Fehler überhaupt, weil er im Theme steckt und damit auf jeder Seite vorkommt.

Lösung: Jeder Symbol-Button bekommt im Code eine unsichtbare Beschriftung (aria-label), zum Beispiel „Warenkorb öffnen“ oder „Menge erhöhen“. Das ist eine Änderung an der Theme-Datei, die einmal gemacht wird und dann überall wirkt.

4. Formulare ohne Beschriftung

Viele Themes sparen Platz, indem sie Feldnamen nur als grauen Platzhalter im Feld anzeigen. Sobald man tippt, ist der Hinweis weg – und Screenreader lesen ihn oft gar nicht vor. Betroffen sind vor allem Checkout, Newsletter-Anmeldung, Suchfeld und Kundenkonto.

• Jedes Feld braucht eine echte, verknüpfte Beschriftung (label).
• Fehlermeldungen müssen in Worten sagen, was falsch ist – nicht nur das Feld rot färben.
• Pflichtfelder müssen erkennbar sein, nicht nur durch Farbe.

Shopify: Der Checkout selbst wird von Shopify gestellt und ist weitgehend barrierefrei – die Probleme liegen meist im Theme (Newsletter, Suche, Produktoptionen). WooCommerce: Hier ist auch der Checkout Teil des Themes und sollte unbedingt mitgeprüft werden.

5. Ohne Maus geht nichts

Menschen mit motorischen Einschränkungen und viele Screenreader-Nutzer bedienen Websites nur mit der Tastatur. Typische Stolperfallen:

• Mega-Menüs, die sich nur beim Darüberfahren mit der Maus öffnen
• Farbauswahl bei Produktvarianten als bunte Kreise, die man nicht per Tastatur erreicht
• Unsichtbarer Fokus: Das Theme entfernt den Rahmen, der anzeigt, wo man gerade ist – man navigiert blind
• Popups (Newsletter, Gutschein), die sich nicht mit der Escape-Taste schließen lassen

6. Slider und Banner, die sich von selbst bewegen

Automatisch wechselnde Bilder-Slider auf der Startseite sind für viele Menschen ein Problem: Wer langsamer liest, kommt nicht hinterher, und bewegte Inhalte lenken stark ab. Die WCAG verlangen, dass sich solche Inhalte anhalten lassen. Oft heißen die Pfeile außerdem auf Englisch „Previous“ und „Next“ – auf einer deutschen Seite wird das falsch vorgelesen.

Lösung: Autoplay abschalten oder einen sichtbaren Pause-Button ergänzen, Pfeile auf Deutsch beschriften.

7. Ein Overlay-Plugin als „Schnelllösung“

Tools, die per Klick eine Barrierefreiheits-Leiste mit Schriftvergrößerung und Kontrastmodus einblenden, versprechen „BFSG-Konformität in 5 Minuten“. Das funktioniert nicht: Die Fehler im Code bleiben, und viele Betroffene empfinden die Leisten sogar als störend, weil sie mit ihren eigenen Hilfsprogrammen kollidieren. Spar dir das Geld und steck es in die echte Behebung.

Der 5-Minuten-Selbsttest

Wichtig: Automatische Tests finden erfahrungsgemäß nur einen Teil der Barrieren. Ein grünes Ergebnis heißt nicht, dass der Shop barrierefrei ist – ein rotes heißt aber sicher, dass es etwas zu tun gibt.

Shopify oder WooCommerce – was ist leichter?

Shopify hat den Vorteil, dass der Checkout zentral von Shopify kommt und gut gepflegt ist. Die aktuellen Standard-Themes sind eine solide Basis; Probleme entstehen meist durch gekaufte Themes und Apps (Bewertungen, Popups, Slider). WooCommerce ist flexibler, dafür hängt mehr vom gewählten Theme und den Plugins ab – auch der Checkout. In beiden Fällen gilt: Die meisten Mängel lassen sich mit Anpassungen am Theme beheben, ein kompletter Neubau ist selten nötig.

Häufige Fragen