1.3.5 Zweck der Eingabe bestimmen

WCAG-Definition

Der Zweck eines Eingabefelds (z. B. Name, E-Mail, Adresse) muss programmatisch ermittelbar sein, damit Hilfstechnologien und Browser ihn erkennen und unterstützen können.

Bedeutung

Viele Nutzer (z. B. mit kognitiven Einschränkungen oder körperlichen Einschränkungen) sind auf automatische Ausfüllhilfen oder Symbolunterstützung angewiesen. Damit Browser, Screenreader oder Tools wie Passwortmanager den Zweck des Feldes erkennen, müssen Entwickler standardisierte Attribute verwenden.

Ausreichende Techniken

G151 – Verwendung von autocomplete-Attributen für HTML-Formulare

<form>
  <label for="fname">Vorname</label>
  <input id="fname" name="given-name" autocomplete="given-name" type="text">

  <label for="lname">Nachname</label>
  <input id="lname" name="family-name" autocomplete="family-name" type="text">

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

  <label for="phone">Telefonnummer</label>
  <input id="phone" name="tel" autocomplete="tel" type="tel">
</form>

Das Attribut autocomplete sorgt dafür, dass der Zweck des Feldes maschinell erkennbar ist – egal wie das Label heißt.

Weitere häufige autocomplete-Werte

Eingabezweck - autocomplete
Vorname - given-name
Nachname - family-name
E-Mail - email
Telefonnummer - tel
Straße - address-line1
PLZ - postal-code
Stadt - address-level2
Land - country-name
Benutzername - username
Neues Passwort - new-password
Aktuelles Passwort - current-password

Die vollständige Liste findest du z. B. bei MDN autocomplete docs

Entwickler-Tipp

  • Nutze autocomplete konform zur Spezifikation – falsch geschriebene Werte werden ignoriert.
  • Verwende das Attribut zusätzlich zu <label> – es ersetzt kein sichtbares Label!

Beratungstechniken

G162 - Verwende eindeutige IDs und for-Attribute, um Labels mit Feldern zu verknüpfen
G205 - Füge visuelle Hinweise hinzu, um den Zweck zu unterstützen (z. B. Icon bei Passwortfeld)
G208 - Nutze sprechende aria-label/aria-labelledby, wenn label visuell nicht möglich ist
G211 - Beschrifte Pflichtfelder klar, ergänze sie mit ARIA-Attributen (aria-required="true")

Fehler

  • Eingabefeld hat keine maschinell erkennbare Zweckangabe (kein autocomplete)
  • autocomplete ist falsch oder nicht standardkonform geschrieben
  • Eingabefeld ohne verbundenes <label> oder aria-label → Zweck bleibt unklar
  • Inhalte sind visuell in der richtigen Reihenfolge, aber nicht im DOM (wirkt sich auch auf Formfelder aus)