input label html

input label html: Ist der Feldname wirklich verbunden?

Sichtbarer Text neben einem Feld reicht nicht. Erst wenn label for exakt zur input id passt, erhält das Feld einen zuverlässigen Namen. Hilfen und Fehlermeldungen brauchen eine eigene Verbindung.

HTML-A11y-Labor

Label, Feld und Hinweise verdrahten

1/4prüfen

Interaktive Vorschau

Klicken Sie auf das Label

E-Mail-Adresse

Format: name@domain.de

Geben Sie eine vollständige E-Mail-Adresse ein.

Erwartete Kurzansage

Kein zuverlässiger Name, Eingabefeld

Sichtbarer Feldnamebleibt beim Tippen erhalten
for = idWerte stimmen nicht überein
Hilfetextsichtbar, aber nicht referenziert
FehlertextFehler bleibt semantisch stumm

Konkrete Reparatur

Alle Beziehungen in einem Schritt setzen.

<label for="contact-email">E-Mail-Adresse</label>
<input id="contact-email" type="email" placeholder="name@beispiel.de" aria-invalid="true">
<p id="email-help">Format: name@domain.de</p>
<p id="email-error">Geben Sie eine vollständige E-Mail-Adresse ein.</p>

Das Labor prüft dieses Beispiel. Ob alle Formulare einer Website korrekte Namen und Beschreibungen haben, zeigt erst der URL-Scan.