Seitenreport Seitenreport
Medien in WooCommerce

Alt-Text fehlt in WooCommerce beheben

Informative und dekorative Bilder getrennt behandeln. In WooCommerce prüfen Sie dafür Produktgalerie, Variantenbilder und Vorschaubilder.

Produktgalerie, Variantenbilder und Vorschaubilder

Vergleichen Sie das Beitragsbild des Produkts mit den Galerie-Bildern. Ein gepflegter Hauptbildtext korrigiert fehlende Alternativen in der Galerie nicht automatisch.

Vergleichen Sie Produkt-Hauptbild, Galerie und das Bild der ausgewählten Variante. In Block-Themes bestimmt die Galerie-Komponente ihre Darstellung; klassische Customizer-Einstellungen gelten nicht automatisch für jeden Galerieblock.

Wo Sie die Einstellung in WooCommerce prüfen

Öffnen Sie Produktbild, Galerie und das Bild der betroffenen Variante. Kontrollieren Sie die konkrete Bildreferenz und ihre Mediathek-Angaben. Beim Variantenwechsel muss auch die neue Bildausgabe eine passende Alternative und einen reservierten Darstellungsraum besitzen.

Beispiel für diesen konkreten Befund

Illustrativer Kontrollfall: Ein Bild erklärt den Anschluss eines Geräts, besitzt aber kein alt-Attribut. Eine rein dekorative Hintergrundwelle enthält dagegen keine zusätzliche Information.

<img src="anschluss.webp" alt="Netzkabel am linken Anschluss einstecken">
<img src="dekorative-welle.svg" alt="">

Nachprüfung in WooCommerce

Galerie-Wechsel und Variantenauswahl mobil testen. Tatsächlich geladene Größe, Alternativtext und reservierte Fläche für jede Ansicht prüfen.

Für das informative Bild eine knappe passende Alternative bereitstellen. Dekorative img-Elemente mit leerem alt kennzeichnen; bei verlinkten Bildern die Linkfunktion berücksichtigen.

Ausnahmen und Geltungsbereich

Ein leeres alt ist bei dekorativen Bildern beabsichtigt und darf nicht pauschal als fehlender Inhalt korrigiert werden.

Bezug: WooCommerce auf WordPress. Block- und klassische Produkt-Templates sowie SEO-Erweiterungen können unterschiedliche Ausgabestellen besitzen.

Den allgemeinen Fehler einordnen

Definition, systemunabhängige Ursachen und weitere Korrekturbeispiele: Informative und dekorative Bilder getrennt behandeln

Dokumentation zur Konfiguration und zum Prüfsignal

WooCommerce: Produktbilder und Galerien

W3C: Aufgabe und Alternative eines Bildes

web.dev: Bildausgabe optimieren

Verwandte Medien-Fehler in WooCommerce