Barrierefreiheit für Online-Shops: EAA-Checkliste für E-Commerce

Online-Shops sind nach dem Barrierefreiheitsstärkungsgesetz (BFSG) explizit als "Dienstleistungen im elektronischen Geschäftsverkehr" gelistet und damit seit 28. Juni 2025 verpflichtet, WCAG 2.1 Level AA zu erfüllen. Diese Checkliste zeigt, was das konkret für Ihren Shop bedeutet — von der Produktseite bis zum Checkout.

Warum E-Commerce besonders betroffen ist

E-Commerce-Plattformen sind komplex: Dynamische Inhalte, Produktfilter, Warenkorb-Updates, mehrstufige Checkouts, Payment-Integrationen von Drittanbietern — all das stellt besondere Anforderungen an Barrierefreiheit. Gleichzeitig sind die Stakes hoch: Ein nicht-barrierefreier Checkout schließt zahlungswillige Kunden aus.

Lesen Sie auch unseren Artikel über die 10 häufigsten Barrierefreiheitsprobleme bei deutschen Online-Shops.

1. Produktseiten

Produktseiten sind oft die erste Seite, auf der ein Nutzer landet. Hier zählt erster Eindruck:

• Produktbilder mit Alt-Text: Jedes Produktbild braucht einen beschreibenden Alt-Text — nicht nur "Produkt", sondern "Rotes Ledersofa Modell Barcelona, Draufsicht, 3-Sitzer".
• Preisinformationen für Screenreader: Durchgestrichene Preise müssen als "Ursprungspreis: 99 €, jetzt: 69 €" ausgezeichnet sein — nicht nur visuell.
• Verfügbarkeitsstatus: "Nur noch 3 auf Lager" muss auch im Code ausgezeichnet sein, nicht nur durch Farbe (rot/grün).
• Varianten-Auswahl (Größe/Farbe): Dropdown-Menüs und Farbwähler müssen per Tastatur bedienbar sein und den aktuellen Status kommunizieren (aria-selected, aria-pressed).
• "In den Warenkorb"-Button: Der Button braucht einen aussagekräftigen Namen — nicht nur ein Icon. Bei dynamischem Update: ARIA-Live-Region für Screenreader-Bestätigung.

2. Produktsuche und Filter

Suchfunktionen und Produktfilter sind oft barrierefreiheits-technisch problematisch:

• Sucheingabe mit Label: Das Suchfeld braucht ein korrektes <label> oder ein aria-label="Produkte suchen".
• Suchergebnisse als Live-Region: Wenn sich Ergebnisse dynamisch aktualisieren, müssen Screenreader darüber informiert werden: aria-live="polite" mit Anzahl der gefundenen Produkte.
• Filter-Checkboxen: Alle Filter-Optionen brauchen echte <input type="checkbox"> oder ARIA-Rollen — nicht nur optisch gestaltete Div-Elemente.
• Aktive Filter anzeigen: Screenreader müssen erkennen können, welche Filter aktiv sind (aria-checked, aria-pressed auf den Filterelementen).

3. Warenkorb und Navigation

• Warenkorb-Updates kommunizieren: Wenn ein Artikel in den Warenkorb gelegt wird, muss das für Screenreader-Nutzer spürbar sein — entweder durch Fokus-Verschiebung auf eine Bestätigungsmeldung oder durch eine ARIA-Live-Ankündigung.
• Warenkorb-Icon mit Anzahl: "Warenkorb (3 Artikel)" muss im Code stehen, nicht nur als visuelle Badge-Zahl.
• Navigation per Tastatur: Alle Kategorien, Mega-Menüs und Flyouts müssen mit Tab und Pfeiltasten bedienbar sein.
• Skip-Link zum Hauptinhalt: Besonders wichtig bei langen Navigation­sleisten — Tastaturnutzer müssen direkt zum Produkt-Grid springen können.

4. Checkout-Prozess

Der Checkout ist die kritischste Phase — hier muss alles funktionieren:

• Jedes Formularfeld hat ein Label: Name, Adresse, PLZ, Stadt — kein Feld ohne explizites <label for="...">. Placeholder ersetzt kein Label.
• Fehlermeldungen beschreibend: Nicht "Ungültige Eingabe", sondern "Bitte geben Sie eine gültige PLZ ein (5 Ziffern)". Fehler müssen per aria-describedby mit dem Feld verknüpft sein.
• Zeitlimits verlängerbar: Session-Timeouts im Checkout müssen mindestens 20 Minuten betragen und verlängerbar sein (WCAG 2.2.1 Timing Adjustable).
• Schritt-Anzeige zugänglich: "Schritt 2 von 4: Versand" muss auch im Code vorhanden sein — nicht nur visuell als Fortschrittsbalken.
• Fehlerkorrektur: Vor dem Abschicken der Bestellung muss der Nutzer alle Angaben prüfen und korrigieren können (WCAG 3.3.4).

<!-- Korrektes Formularfeld mit Label und Fehler-Verknüpfung -->
<div>
  <label for="plz">Postleitzahl *</label>
  <input
    type="text"
    id="plz"
    name="plz"
    aria-required="true"
    aria-describedby="plz-error"
    autocomplete="postal-code"
  />
  <span id="plz-error" role="alert">
    Bitte geben Sie eine gültige PLZ ein (5 Ziffern)
  </span>
</div>

5. Bezahlseiten und Payment

• Kreditkarten-Eingabe: Eingabefelder für Kartennummer, Ablaufdatum und CVV brauchen korrekte Labels und autocomplete-Attribute (autocomplete="cc-number", "cc-exp", "cc-csc").
• Drittanbieter-Payment: PayPal, Stripe, Klarna müssen eigene WCAG-Anforderungen erfüllen. Prüfen Sie die Barrierefreiheits-Dokumentation Ihres Payment Providers.
• CAPTCHA: Visuelle CAPTCHAs ohne Audio-Alternative sind nicht konform. Nutzen Sie Google reCAPTCHA v3 (unsichtbar) oder Alternativen wie hCaptcha mit Audio-Fallback.
• Fehlermeldungen bei Kartenfehler: "Zahlung fehlgeschlagen" reicht nicht — geben Sie den Grund an und führen Sie den Fokus auf das fehlerhafte Feld zurück.

EAA-Checkliste für Online-Shops

Verwenden Sie diese Checkliste als Ausgangspunkt für Ihre interne Prüfung:

Shopify, WooCommerce & Co.: Plattform-spezifische Hinweise