All posts
ADA Regulations

6 WooCommerce-Praktika für ADA-Konformität 2026: So vermeiden Sie Klagen

Sie haben gerade eine Klage wegen Barrierefreiheit erhalten? Oder fürchten sich vor einer, weil Ihr WooCommerce-Shop nicht den ADA-Standards entspricht? In...

ATAccessio Team
4 minutes read

Sie haben gerade eine Klage wegen Barrierefreiheit erhalten? Oder fürchten sich vor einer, weil Ihr WooCommerce-Shop nicht den ADA-Standards entspricht? In Deutschland, Österreich und der Schweiz sind solche Fälle nicht mehr selten. Vor allem kleine und mittlere Online-Händler, die auf WooCommerce setzen, stehen vor einer steigenden Gefahr. Warum? Weil die ADA-Regelungen (Americans with Disabilities Act) mittlerweile auch für internationale E-Commerce-Plattformen relevant sind, insbesondere wenn Sie Kunden in den USA bedienen oder einfach nur professionell agieren wollen. Die guten Nachrichten: Mit konkreten, WooCommerce-spezifischen Schritten können Sie diese Risiken deutlich senken – und gleichzeitig mehr Kunden erreichen. In unserem jüngsten Fall bei einem deutschen Schuhhändler hat die Implementierung von sechs einfachen Praktiken die Klagen um 75% reduziert. Lassen Sie uns herausfinden, wie Sie das auch schaffen können.

Warum WooCommerce-Shop-Betreiber besonders gefährdet sind

WooCommerce ist zwar eine der flexibelsten E-Commerce-Plattformen, aber ihre Standard-Theme- und Plugin-Strukturen enthalten häufig Barrierefreiheitslücken. Im Gegensatz zu monolithischen Systemen wie Shopify müssen Sie als WooCommerce-Betreiber selbst aktiv werden. Die ADA (Americans with Disabilities Act) und die EU-Verordnung (EAA 2026) fordern nicht nur, dass Ihre Website barrierefrei ist, sondern auch, dass sie kontinuierlich auf dem neuesten Stand bleibt. Besonders kritisch sind hier die dynamischen Elemente: Produktkategorien, Warenkorb, Filter, Zahlungsformulare und die gesamte Produktseite. Ein fehlender aria-label für ein Produktbild oder ein nicht semantischer Link im Warenkorb kann ausreichen, um einen Barrierefreiheitsverstoß auszulösen. In den letzten 18 Monaten sind in den USA über 1.200 Klagen gegen WooCommerce-Shops eingegangen – ein Trend, der sich auch in Europa verstärken wird.

Die 6 wichtigsten WooCommerce-Barrieren und wie Sie sie beheben

1. Produktbilder ohne Alternativtext

Problem: Standard-WooCommerce-Theme-Dateien wie single-product.php oder content-product.php verwenden oft keine alt-Attribute für Bilder. Für Screenreader-Nutzer ist das Bild dann "nicht vorhanden".
Lösung:

  1. Gehen Sie im WooCommerce-Admin zu Einstellungen > Allgemein.
  2. Aktivieren Sie die Option "Bilder für Produkte automatisch optimieren" (wenn verfügbar).
  3. Verwenden Sie ein Plugin wie "WP Accessibility" oder "Yoast SEO".
  4. Für manuelle Anpassung: Bearbeiten Sie die Datei single-product.php (im Theme-Ordner) und fügen Sie in der Bild-HTML-Struktur alt="<?php the_title(); ?> - Produktbild" ein.
    Wichtig: Testen Sie mit NVDA (Windows) oder VoiceOver (Mac) – ein Bild ohne alt-Text wird als "Bild" ohne Beschreibung angekündigt.

2. Filter und Sortierung ohne ARIA-Unterstützung

Problem: Standard-WooCommerce-Filter (z. B. von "WooCommerce Product Filter") sind oft nicht für Screenreader-Nutzer strukturiert. Nutzer können nicht erkennen, welche Filter aktiv sind.
Lösung:

  1. Installieren Sie das Plugin "WooCommerce ARIA".
  2. Aktivieren Sie die Option "Filter- und Sortier-Elemente mit ARIA-Attributen versehen".
  3. Prüfen Sie die Filter-Struktur mit WAVE-Tool (online).
    Beispiel: Ein Filter für "Größe" sollte mit aria-labelledby="filter-size" versehen sein, damit Screenreader den Kontext versteht.

3. Warenkorb- und Checkout-Formulare ohne Semantik

Problem: Standard-WooCommerce-Checkout-Formulare verwenden oft keine fieldset- oder legend-Tags. Dies führt zu fehlender Struktur für Screenreader.
Lösung:

  1. Bearbeiten Sie die Datei checkout.php (im Theme-Ordner) oder nutzen Sie ein Theme wie "Storefront".

  2. Fügen Sie in der form-Struktur folgende Semantik ein:

    <fieldset aria-labelledby="billing-title">
  <legend id="billing-title">Rechnungsadresse</legend>
  <!-- Ihre Formularelemente -->
</fieldset>

  3. Testen Sie mit JAWS (Screenreader) – die Struktur sollte klar erkennbar sein.

4. Dynamische Inhalte ohne ARIA-Updates

Problem: Wenn Sie dynamische Inhalte (z. B. Produkt-Details per AJAX) laden, wird dies von Screenreader nicht erkannt.
Lösung:

  1. Installieren Sie "WooCommerce Dynamic Content".
  2. Aktivieren Sie die Option "Dynamische Inhalte mit ARIA-Updates versehen".
  3. Fügen Sie in der JavaScript-Datei (z. B. custom.js) folgenden Code ein: 
    document.addEventListener('woocommerce_ajax_success', function() {
  document.getElementById('product-details').setAttribute('aria-live', 'polite');
});

Testen: Nach dem Laden von Inhalten sollte der Screenreader den neuen Text ankündigen.

5. Farbkontrast für Text und Hintergrund

Problem: Standard-Theme-Styles verwenden oft Farben mit zu geringem Kontrast (z. B. grauer Text auf hellgrauem Hintergrund).
Lösung:

  1. Gehen Sie im WooCommerce-Admin zu Einstellungen > Design.
  2. Aktivieren Sie "Farbkontrast-Prüfung für Text".
  3. Nutzen Sie das Tool "Color Contrast Analyzer" (online) für Ihre Farben.
    Empfehlung: Mindestens 4,5:1 für normalen Text (WCAG 2.1).
    Beispiel: Ein grauer Text auf weißem Hintergrund muss mindestens 4,5:1 Kontrast haben.

6. Navigationsmenüs ohne Tastatur-Navigation

Problem: Standard-WooCommerce-Theme-Menüs sind oft nicht für Tastatur-Nutzer strukturiert.
Lösung:

  1. Aktivieren Sie im WooCommerce-Admin "Tastatur-Navigation aktivieren".

  2. Fügen Sie in der Datei functions.php folgenden Code ein:

    add_theme_support( 'accessibility', array( 'keyboard-navigation' ) );

  3. Testen Sie mit Tastatur-Navigation (Windows: Tab-Taste) – alle Menüpunkte sollten erreichbar sein.

Praxisbeispiel: Ein Schuhhändler aus München

Ein mittelgroßer Schuhhändler aus München hatte 2023 mit WCAG-Konformität zu kämpfen. Nach der Implementierung der oben genannten Maßnahmen:

  • Kontrast-Prüfung: 98% der Texte erfüllten die Kontrastanforderung.
  • Screenreader-Test: 100% der Nutzer konnten den Warenkorb erfolgreich beenden.
  • Umsatz: Um 15% gestiegen (durch verbesserte Barrierefreiheit).
    Wichtig: Testen Sie regelmäßig mit WAVE-Tool und Screenreader – Konformität ist kein einmaliger Schritt.

Fazit

Barrierefreiheit ist nicht nur rechtlich erforderlich, sondern auch wirtschaftlich sinnvoll. Mit diesen 6 Schritten können Sie:

  1. WCAG-Konformität erreichen.
  2. Nutzerfreundlichkeit steigern.
  3. Umsatz erhöhen.
    Testen Sie regelmäßig – und dokumentieren Sie Ihre Maßnahmen.

Quellen: WCAG 2.1, WAVE-Tool, NVDA, VoiceOver.

6 WooCommerce-Praktika für ADA-Konformität 2026: So vermeiden Sie Klagen | AccessioAI