Im leeren Feld steht „E-Mail“. Sobald jemand tippt, verschwindet der Hinweis. Das kann die Zuordnung erschweren und ist kein Ersatz für eine richtige Beschriftung. Ein Feld braucht einen verständlichen Namen, der auch während der Eingabe zugänglich bleibt.
Ein einfaches Beispiel verknüpft sichtbares Label und Eingabe über dieselbe Kennung:
<label for="contact-email">E-Mail-Adresse</label>
<input id="contact-email" name="email" type="email"
autocomplete="email">
Verwende eine eindeutige id. Zwei Felder mit derselben Kennung können eine ansonsten richtige Beschriftung unzuverlässig machen. Ein erklärendes Beispiel gehört bei Bedarf zusätzlich an das Feld, nicht als einzige Benennung hinein.
Nach dem Tippen weiterprüfen
Fülle das Formular teilweise aus. Ist noch erkennbar, welches Feld welche Angabe verlangt? Klicke oder tippe auf das Label und prüfe, ob die richtige Eingabe fokussiert wird. Gehe die Felder anschließend mit der Tastatur durch.
Kontrolliere im Accessibility-Baum den zugänglichen Namen. Ein zusätzlicher aria-label kann einen sichtbaren Text überlagern; ergänze ihn nicht automatisch an jedem bereits korrekt beschrifteten Feld.
Halte optionale Angaben sichtbar als optional fest. Das hilft bei der Entscheidung, welche Daten überhaupt nötig sind. Die technische Zuordnung allein beweist noch keine verständliche Frage: „Referenz“ kann formal beschriftet und trotzdem unklar sein.
Teste mit einer Person, die das Formular nicht kennt, ob sie ohne Zusatzhinweis die benötigten Angaben versteht. Notiere die Felder, bei denen Rückfragen entstehen.