Formularfelder ohne Beschriftung

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.

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.

Ein unklares Feld im Bestellvorgang ist ein abgebrochener Kauf. Das ist nicht nur Rechtskonformität, das ist Conversion.

So wird es behoben

Verknüpfen Sie ein <label> über das for-Attribut mit der id des Feldes, oder schließen Sie das Feld in das label ein. Ein Platzhalter zählt nicht: Er verschwindet, sobald jemand tippt, und viele Screenreader sagen ihn nie an.

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

<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>

In Ihrem System

• Shopify

  Die Felder im Shopify-eigenen Bestellvorgang sind bereits beschriftet. Prüfen Sie die, die Sie ergänzt haben: Newsletter in der Fußzeile, Suche im Kopfbereich und Formulare aus Apps von Drittanbietern.

• WooCommerce

  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.

• PrestaShop

  Prüfen Sie die Module für Newsletter und Suche, die häufig nur einen Platzhalter verwenden.

Verwandte Themen

• Grafische Schaltfläche ohne Alternativtext
• Eingebetteter Rahmen ohne Titel
• Der Platzhalter übernimmt die Aufgabe der Beschriftung
• Schaltflächen ohne Namen