Zum Inhalt springen
BarriereCheck
Shopsystem

WooCommerce barrierefrei: Die häufigsten Fehler und wo Sie sie beheben

In einem WooCommerce-Shop kommen Barrieren aus drei Quellen: dem Theme, den Plugins und den Inhalten, die Sie selbst pflegen. Vieles lässt sich deshalb mit Bordmitteln von WordPress beheben – in der Mediathek, im Customizer oder im Block-Editor. Hier stehen die typischen Probleme in Klartext, wen sie betreffen und wo Sie sie in WooCommerce ändern.

ca. 6 Minuten Lesezeit Stand: Oktober 2026

1Woher kommen die Barrieren?

  • Theme: Farben, Überschriften-Ebenen, Menü und Fußzeile legt das Theme fest – bei vielen Shops Storefront oder ein Block-Theme.
  • Plugins: Slider, Formulare, Cookie-Banner, Bewertungen und Filter bringen eigenen Code mit – und damit eigene Barrieren.
  • Inhalte: Produktbilder, Überschriften im Block-Editor, Tabellen und Texte pflegen Sie selbst.

2Die häufigsten Probleme

Diese Probleme findet ein automatischer Test in Onlineshops besonders oft. Sie sind nach Schweregrad sortiert – fangen Sie oben an.

  1. Problem 1: Bilder ohne Alternativtext

    WCAG 1.1.1 Nicht-Text-Inhalt · Stufe A

    Kritisch

    Was ist das Problem?

    Produkt-, Kategorie- oder Bannerbilder haben keinen Alt-Text – häufig nach einem Produktimport.

    Wen betrifft es?

    Blinde und sehbehinderte Menschen mit Screenreader. Sie hören nur „Bild“ oder den Dateinamen.

    So beheben Sie es in WooCommerce

    Medien, dann Mediathek, dann Bild öffnen, dann Feld „Alternativer Text“ ausfüllen

    Gilt auch für Produkt- und Galeriebilder. Ratgeber: Alt-Texte für Produktbilder

  2. Problem 2: Formularfelder ohne Beschriftung

    WCAG 4.1.2 Name, Rolle, Wert · Stufe A

    Kritisch

    Was ist das Problem?

    Suchfeld, Newsletter-Anmeldung oder Kontaktformular haben nur einen Platzhaltertext, aber keine echte Beschriftung.

    Wen betrifft es?

    Screenreader-Nutzer wissen nicht, was sie eingeben sollen. Und sobald man tippt, verschwindet der Platzhalter für alle.

    So beheben Sie es in WooCommerce

    Häufig Formular-Plugins (Contact Form 7, WPForms) oder Newsletter-Widgets. Im Plugin für jedes Feld eine Beschriftung aktivieren statt nur Platzhaltertext. Ratgeber: Formulare und Kasse per Tastatur

  3. Problem 3: Buttons ohne erkennbaren Namen

    WCAG 4.1.2 Name, Rolle, Wert · Stufe A

    Kritisch

    Was ist das Problem?

    Icon-Buttons wie Suche, Menü, Warenkorb oder Slider-Pfeile haben keinen Text.

    Wen betrifft es?

    Screenreader sagen nur „Schaltfläche“ an, ohne zu verraten, was sie tut.

    So beheben Sie es in WooCommerce

    Meist Icon-Buttons aus Theme oder Plugins (Slider, Mini-Warenkorb). Im Child-Theme ein aria-label ergänzen oder den Plugin-Anbieter um eine Korrektur bitten. Ratgeber: Links und Buttons richtig benennen

  4. Problem 4: Text mit zu wenig Kontrast

    WCAG 1.4.3 Kontrast (Minimum) · Stufe AA

    Hoch

    Was ist das Problem?

    Graue Preise, helle Buttons, Sale-Badges oder Links in der Fußzeile heben sich zu wenig vom Hintergrund ab.

    Wen betrifft es?

    Menschen mit Sehschwäche, ältere Menschen und alle, die das Handy in der Sonne benutzen.

    So beheben Sie es in WooCommerce

    Design → Customizer → Farben bzw. bei Block-Themes Design → Editor → Stile → Farben. Eigene Farben ggf. unter „Zusätzliches CSS“ prüfen. Ratgeber: Kontraste im Onlineshop

  5. Problem 5: Links ohne erkennbaren Namen

    WCAG 2.4.4 Linkzweck (im Kontext) · Stufe A

    Hoch

    Was ist das Problem?

    Icon-Links in Kopf- und Fußzeile, etwa Social-Media-Symbole oder das Warenkorb-Icon, haben keinen Text.

    Wen betrifft es?

    Screenreader lesen nur „Link“ vor, ohne Ziel. Wer per Sprachsteuerung bedient, kann den Link nicht ansprechen.

    So beheben Sie es in WooCommerce

    Meist Icon-Links in Menü, Social-Icons-Block oder Header. Im Block-Editor beim Social-Icons-Block das Feld „Beschriftung“ füllen, im Theme ein aria-label ergänzen. Ratgeber: Links und Buttons richtig benennen

  6. Problem 6: Überschriften in falscher Reihenfolge

    Best Practice

    Mittel

    Was ist das Problem?

    Überschriften überspringen Ebenen, etwa von H2 direkt zu H4, weil sie nach Optik statt nach Gliederung gewählt wurden.

    Wen betrifft es?

    Screenreader-Nutzer, die sich über die Überschriften einen Überblick über die Seite verschaffen.

    So beheben Sie es in WooCommerce

    Im Block-Editor beim Überschrift-Block die Ebene (H2, H3 …) passend wählen. Widget- und Theme-Überschriften ggf. im Child-Theme anpassen. Ratgeber: Überschriften richtig gliedern

3Was können Sie selbst beheben?

  • Ohne Programmierkenntnisse: Alt-Texte in der Mediathek, Farben im Customizer oder Editor, Überschriften-Ebenen im Block-Editor und Beschriftungen in den Einstellungen Ihres Formular-Plugins.
  • Mit Unterstützung: Icon-Buttons und Icon-Links im Theme sowie fehlende Beschriftungen in Theme-Vorlagen. Bei Problemen in Plugins hilft oft eine Anfrage beim Plugin-Anbieter.

4Was ein automatischer Test hier nicht findet

Warenkorb und Kasse sind in WooCommerce oft eine Mischung aus Theme, WooCommerce-Blöcken und Zahlungs-Plugins. Ob man sie nur mit der Tastatur bis zum Ende bedienen kann, prüfen Sie am besten selbst: einmal komplett durchklicken, nur mit Tab, Enter und Leertaste.

  • Kommen Sie mit der Tastatur in jedes Menü und wieder heraus?
  • Sehen Sie jederzeit, wo der Fokus gerade steht?
  • Werden Fehlermeldungen im Formular vorgelesen, wenn Sie etwas vergessen haben?
  • Beschreiben die Alt-Texte das, was auf dem Bild zu sehen ist?

5Häufige Fragen

Gibt es ein Plugin, das das löst?

Es gibt Plugins, die einzelne Dinge verbessern, etwa einen Link „Zum Inhalt springen“. Ein Plugin, das einen Shop auf Knopfdruck barrierefrei macht, gibt es nicht – auch kein Overlay-Widget. Warum Overlays nicht reichen

Muss ich mein Theme wechseln?

Meist nicht. Viele Probleme stecken in Inhalten und Einstellungen. Ein Wechsel lohnt sich erst, wenn das Theme Grundlegendes falsch macht – etwa ein Menü, das sich nicht per Tastatur bedienen lässt – und keine Updates mehr bekommt.

Erkennt BarriereCheck, dass mein Shop WooCommerce nutzt?

Meist ja. Dann steht im vollständigen Report bei den häufigsten Problemen zuerst der Weg in WooCommerce, danach die Wege in Shopify und Shopware.

Quellen

Die Menüpfade beziehen sich auf die deutsche Oberfläche und die Standard-Themes. Eigene Themes, Apps und Plugins können abweichen.

Dieser Artikel gibt einen allgemeinen Überblick und ersetzt keine Rechtsberatung.

Weiterlesen

Und Ihr WooCommerce-Shop?

Der kostenlose Test zeigt, wo in Ihrem Shop Barrieren stecken. Im vollständigen Report steht bei den häufigsten Problemen zusätzlich der Weg in WooCommerce.

Kostenlos · bis zu 3 Seiten ohne Anmeldung · mit Konto 10 · DSGVO-konform