WCAG-Checkliste für Online-Shops: 15 Punkte vor dem 28. Juni

Der 28. Juni 2025 ist das BFSG-Stichtag für Online-Shops mit mehr als 10 Mitarbeitern oder über 2 Millionen Euro Jahresumsatz. Was genau müssen Sie bis dahin umsetzen? Wir haben die 55 WCAG 2.1 AA-Erfolgskriterien auf die 15 praxisrelevantesten für E-Commerce-Shops reduziert.

Warum WCAG für Online-Shops besonders wichtig ist

Online-Shops haben komplexe Interaktionen: Produktfilter, Warenkorb, Checkout, Formulare, Popups und Slider. Genau diese Elemente bereiten blinden und motorisch eingeschränkten Nutzern die größten Probleme — und genau hier schauen die Prüfbehörden zuerst hin.

Wichtig: Die Prüfbehörde in Deutschland ist das Marktüberwachungs- und Landesamt für Barriere- und Fernabsatz (MLBF) Sachsen-Anhalt. Sie kann Bußgelder bis 100.000 Euro verhängen und Abmahnungen werden nach dem UWG möglich.

---

Die 15 wichtigsten WCAG-Punkte für E-Commerce

1. Tastaturnavigation (WCAG 2.1.1)

Was: Alle Shop-Funktionen müssen ohne Maus bedienbar sein. Warum kritisch: Blinde Nutzer navigieren ausschließlich per Tastatur. Motorisch eingeschränkte Nutzer verwenden Tastaturalternativen. Praxis: Testen Sie Ihren gesamten Checkout-Prozess per Tab-Taste. Funktioniert der Produktfilter? Ist der Warenkorb erreichbar?

2. Fokus-Sichtbarkeit (WCAG 2.4.7)

Was: Das aktive Element muss sichtbar hervorgehoben sein. Warum kritisch: Ohne sichtbaren Fokus-Ring wissen Tastaturnutzer nicht, wo sie sich befinden. Praxis: Entfernen Sie niemals outline: none ohne Ersatz. Definieren Sie einen deutlichen Fokus-Stil (Mindest-Kontrast 3:1).

3. Bilder mit Alternativtext (WCAG 1.1.1)

Was: Alle informativen Bilder brauchen beschreibende alt-Attribute. Warum kritisch: Screenreader lesen alt-Texte vor. Produktbilder ohne alt sind für blinde Nutzer unsichtbar. Praxis: alt="Roter Wollpullover, Herren, Größe L" statt alt="img_4567.jpg". Dekorative Bilder: alt="".

4. Farbkontrast (WCAG 1.4.3)

Was: Normaler Text: 4,5:1, großer Text (18pt+): 3:1 Kontrast. Warum kritisch: 8% der Männer sind farbenblind. Grauer Text auf weißem Hintergrund ist häufig problematisch. Praxis: Prüfen Sie besonders Aktionspreise, Verfügbarkeitsanzeigen und Filterlabels.

5. Formular-Labels (WCAG 1.3.1, 3.3.2)

Was: Jedes Formularfeld braucht ein sichtbares, programmatisch verbundenes Label. Warum kritisch: Placeholder-Texte verschwinden beim Tippen und sind kein Ersatz für Labels. Praxis: Checkout-Formulare sind besonders betroffen. <label for="email">E-Mail</label> statt nur Placeholder.

6. Fehlermeldungen (WCAG 3.3.1, 3.3.3)

Was: Fehler müssen in Text beschrieben und mit dem Feld verknüpft sein. Warum kritisch: "Rot" reicht nicht. Screenreader müssen den Fehlertext vorlesen. Praxis: aria-describedby verbindet Fehlertext mit Eingabefeld. Konkrete Meldung: "E-Mail ungültig — Bitte Format prüfen (name@beispiel.de)".

7. Statusmeldungen (WCAG 4.1.3)

Was: Erfolgsmeldungen und Statusänderungen müssen von Screenreadern ausgegeben werden. Warum kritisch: "Zum Warenkorb hinzugefügt" als visueller Toast ist unsichtbar für blinde Nutzer. Praxis: role="status" oder aria-live="polite" für dynamische Meldungen (Warenkorb, Lagerbestand).

8. Seitentitel (WCAG 2.4.2)

Was: Jede Seite braucht einen eindeutigen, beschreibenden Titel. Warum kritisch: Screenreader-Nutzer navigieren oft über Seitentitel. Praxis: <title>Rote Wollpullover | Mein-Shop.de</title> statt generisch Produkt | Shop.

9. Überschriften-Hierarchie (WCAG 1.3.1)

Was: H1, H2, H3 müssen logisch hierarchisch aufgebaut sein. Warum kritisch: Screenreader-Nutzer navigieren über Überschriften durch die Seite. Praxis: Jede Seite hat genau eine H1. Produktfilter, -namen, -beschreibung haben konsistente H-Ebenen.

10. Link-Texte (WCAG 2.4.4)

Was: Links müssen aus dem Kontext heraus verständlich sein. Warum kritisch: Screenreader lesen alle Links als Liste vor. "Hier klicken" ist dann bedeutungslos. Praxis: "Jetzt kaufen: Roter Pullover" statt "Hier klicken". Buttons: sprechender Text oder aria-label.

11. Video-Untertitel (WCAG 1.2.2)

Was: Voraufgezeichnete Videos müssen synchrone Untertitel haben. Warum kritisch: Produktvideos ohne Untertitel sind für gehörlose Nutzer nicht zugänglich. Praxis: Gilt für Produktdemonstrations-Videos. YouTube-Untertitel aktivieren oder WebVTT-Datei bereitstellen.

12. Keine Zeitlimits (WCAG 2.2.1)

Was: Zeitbeschränkte Sessions müssen verlängerbar sein. Warum kritisch: Motorisch eingeschränkte Nutzer brauchen länger. Checkout-Timeouts sind problematisch. Praxis: Warnung mindestens 20 Sekunden vor Ablauf. Verlängerungsoption anbieten.

13. Keine rein farblichen Informationen (WCAG 1.4.1)

Was: Farbe darf nicht das einzige Unterscheidungsmerkmal sein. Warum kritisch: "Verfügbar" als grüner Punkt ist für Farbenblinde unsichtbar. Praxis: Symbol + Text + Farbe kombinieren: "✓ Verfügbar", "✗ Ausverkauft".

14. Responsive und Zoom (WCAG 1.4.4, 1.4.10)

Was: Text muss auf 200% zoombar sein ohne horizontalen Scroll. Reflow bei 320px Breite. Warum kritisch: Nutzer mit Sehbehinderung zoomen die Seite häufig stark. Praxis: Testen Sie mit browser-zoom 200%. Kein user-scalable=no im Viewport-Meta-Tag.

15. Slider und Karussells (WCAG 2.2.2)

Was: Automatisch bewegende Inhalte müssen pausierbar sein. Warum kritisch: Bewegung lenkt ab und kann Anfälle auslösen. Praxis: "Pause"-Button für Produktkarussells. Kein Auto-Play ohne Stopp-Option.

---

Priorisierung nach Impact

| Priorität | Kriterien | Aufwand | |-----------|-----------|---------| | Sofort | 1, 2, 4, 5, 7 | Niedrig–Mittel | | Kurzfristig | 3, 6, 9, 10, 13 | Niedrig | | Mittelfristig | 8, 11, 12, 14, 15 | Mittel–Hoch |

---

Wie BFSG-Guard hilft

Statt 55 Kriterien manuell zu prüfen, scannt BFSG-Guard Ihre Shop-URL automatisch und identifiziert die kritischsten Verstöße. Der PDF-Report priorisiert nach Schweregrad und gibt konkrete Code-Fixes.

Tipp: Scannen Sie zunächst Ihre Startseite, eine Produktseite und Ihren Checkout — das deckt 80% der typischen Probleme ab.

Jetzt kostenlos scannen →