Formularfelder ohne Beschriftung in WooCommerce

WCAG 1.3.1, 3.3.2, 4.1.2 (A) · EN 301 549 9.1.3.1, 9.3.3.2, 9.4.1.2

Einige Formularfelder haben keinen zugänglichen Namen: kein <label>, kein aria-label, kein aria-labelledby.

Wo Sie es in WooCommerce ändern

Die Felder im WooCommerce-Bestellvorgang bringen Beschriftungen mit; Probleme kommen meist von Plugins für eigene Felder oder von Themes, die die Beschriftung aus Gestaltungsgründen ausblenden.

In WooCommerce liefern Theme und Plugins gemeinsam das Markup. Legen Sie vor dem Bearbeiten ein Child-Theme an, sonst überschreibt das nächste Update Ihre Änderungen.

So ist es

<input type="email" name="email">

So sollte es sein

<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email" autocomplete="email">

<!-- Oder durch Einschließen -->
<label>Postleitzahl
  <input type="text" name="plz" autocomplete="postal-code">
</label>

Warum das zählt

Ein Feld ohne Beschriftung wird als „Eingabefeld“ angesagt und sonst nichts. Im Suchfeld ist das ärgerlich; bei der Lieferanschrift im Bestellvorgang macht es den Kauf ohne Raten unmöglich.

In anderen Systemen

Hat Ihr WooCommerce-Shop diesen Mangel?

Wir erkennen Ihr System automatisch und geben Ihnen die Schritte dafür. Kostenlos und ohne Anmeldung.