WooCommerce · BFSG

WooCommerce barrierefrei machen (BFSG): Checkout, Formulare, Alt-Texte

WooCommerce selbst ist solide, die Barrieren stecken meist im Theme, in Plugins und in den Inhalten. Diese fünf Stellen bringen am meisten.

Erst messen, dann reparieren. Der kostenlose Schnellcheck zeigt in Sekunden, was im HTML deines Shops fehlt. Das Umsetzungspaket (29 €) liefert den Reparatur-Code zu jedem Fund, den Generator für die Erklärung zur Barrierefreiheit und die Prüfliste für alles, was kein Automat findet.

Shop kostenlos prüfen Umsetzungspaket kaufen

1. Alt-Texte in der Mediathek

Medien → Mediathek → Bild → „Alternativtext“. Produktbilder beschreiben (Farbe, Ausführung), reine Deko leer lassen.

2. Checkout-Felder mit echten Labels

Manche Themes blenden Labels aus und lassen nur Platzhalter stehen. Labels sichtbar lassen oder nur visuell verstecken:

/* im Child-Theme, Label nur optisch verstecken */
.woocommerce form .form-row label.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

Felder im Code über den Filter woocommerce_checkout_fields anpassen, das label dabei nie leeren.

3. Zoom-Sperre entfernen

Steht im Theme in header.php ein maximum-scale=1 oder user-scalable=no, im Child-Theme auf width=device-width, initial-scale=1 ändern.

4. Warenkorb- und Menü-Symbole benennen

<a class="cart-contents" href="/warenkorb/" aria-label="Warenkorb"><span class="icon" aria-hidden="true"></span></a>

5. Erklärung zur Barrierefreiheit

Seiten → Erstellen → „Barrierefreiheit“, Text aus dem Generator einfügen, unter Design → Menüs ins Footer-Menü.

Häufige Fragen

Macht ein Barrierefreiheits-Plugin meinen WooCommerce-Shop konform?

Plugins, die per Overlay nachträglich Schalter für Kontrast oder Schriftgröße einblenden, beheben die Fehler im Code nicht. Sinnvoll sind Korrekturen im Theme und in den Inhalten.

Wo stelle ich Alt-Texte in WordPress ein?

Medien → Mediathek → Bild öffnen → Feld „Alternativtext“.

Shop kostenlos prüfen Umsetzungspaket kaufen