Beschriftete Formularfelder

Was geprüft

Für jedes Eingabefeld (input, select, textarea) wird ein zugänglicher Name gesucht: zugeordnetes <label>, aria-label, aria-labelledby mit existierender id, title oder Platzhaltertext. Felder, die für Hilfsmittel verborgen sind (aria-hidden, hidden, display:none im style, <template>), zählen nicht — typisch sind Honeypot-Felder gegen Spam. Ist ein Feld nur über den Platzhalter benannt, gibt es einen Hinweis ohne Abzug. Der Check liest nur das ausgelieferte HTML, nicht die gerenderte Seite, und deckt damit nur einen automatisch messbaren Teil ab.

Wie relevant

Hoch, sobald ein Feld gar keinen Namen hat. Ohne Namen ist ein Formular für Screenreader-Nutzer kaum ausfüllbar, und Formulare sind oft der Weg zur Kontaktaufnahme oder zum Kauf.

Warum

Screenreader sagen beim Fokus auf ein Feld dessen Namen an. Fehlt er, hören Nutzer nur „Eingabefeld“ und wissen nicht, was einzutragen ist. Ein sichtbares <label> hilft auch allen anderen: Ein Klick darauf setzt den Fokus ins Feld, und der Platzhalter verschwindet beim Tippen. Ob daraus eine rechtliche Pflicht folgt, klären Sie mit Ihrer Rechtsberatung; öffentliche Leitfäden bietet die Bundesfachstelle Barrierefreiheit (Deutschland).

Wie beheben

Verbinden Sie jedes Feld mit einem sichtbaren <label for="…"> oder umschließen Sie das Feld mit dem <label>. Wo kein sichtbarer Text möglich ist (z. B. Suchfeld mit Lupe), setzen Sie aria-label.

Nebenwirkung: Sichtbare Beschriftungen ändern das Layout; prüfen Sie Formulare danach auf Mobilgeräten. Wenn Sie ein Honeypot-Feld nutzen, verbergen Sie es mit dem Attribut hidden oder per CSS display:none, damit es weder Menschen noch Hilfsmitteln angeboten wird; aria-hidden allein reicht nicht, weil das Feld per Tab erreichbar bleibt. Der Check lässt Felder mit aria-hidden bei der Zählung aus; unauffällig heißt hier also nicht, dass ein solches Feld für Tastaturnutzer unsichtbar ist.

WordPress: Formular-Plugins (z. B. Contact Form 7, WPForms, Gravity Forms) bieten Beschriftungen an, manche Vorlagen zeigen aber nur Platzhalter. In Contact Form 7 umschließen Sie das Feld-Tag mit <label>…</label>.

Codebeispiel

HTML

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

<!-- ohne sichtbaren Text -->
<input type="search" name="s" aria-label="Website durchsuchen">

<!-- Honeypot: für alle verborgen -->
<input type="text" name="website" hidden tabindex="-1" autocomplete="off">

Contact Form 7 (Formularvorlage)

<label>Ihr Name
  [text* ihr-name autocomplete:name]
</label>

Weiterführende Quellen

• https://www.w3.org/WAI/tutorials/forms/labels/
• https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html
• https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html