Ratgeber Automatische Vervollständigung fehlt in Formularen

Dieser Fehler weist darauf hin, dass einigen deiner Formularfelder das autocomplete-Attribut fehlt. Dieses Attribut erlaubt es Browsern, Eingabefelder automatisch mit zuvor gespeicherten Informationen auszufüllen, wie Namen, Adressen oder E-Mail-Adressen. Ohne diese Funktion müssen Nutzer ihre Daten immer wieder manuell eingeben, was die Benutzererfahrung beeinträchtigen kann.

• Schlechtere Benutzererfahrung: Nutzer müssen ihre Daten bei jeder Eingabe erneut manuell eingeben.
• Niedrigere Conversion-Rate: Nutzer könnten das Formular abbrechen, wenn die Eingabe zu aufwendig ist.
• Barrierefreiheitsprobleme: Menschen mit motorischen Einschränkungen profitieren besonders von der automatischen Vervollständigung.
• Zeitaufwand: Automatische Vervollständigung spart Zeit und erhöht die Zufriedenheit der Nutzer.

1. Identifiziere Felder ohne autocomplete:
   • Überprüfe den HTML-Code deiner Website und suche nach Formularfeldern, die kein autocomplete-Attribut besitzen.
   • Beispiel für ein fehlerhaftes Feld:

     <input type="text" id="name">

2. Füge das autocomplete-Attribut hinzu:
   • Ergänze das autocomplete-Attribut mit einem passenden Wert, der den Zweck des Feldes beschreibt. Beispiel:

     <input type="text" id="name" autocomplete="given-name">

3. Verwende standardisierte Werte:
   • Nutze die von HTML definierten Werte für das autocomplete-Attribut, um sicherzustellen, dass alle Browser die Funktion korrekt unterstützen.
   • Beispiele für häufig verwendete Werte:
     • name: Vollständiger Name.
     • given-name: Vorname.
     • family-name: Nachname.
     • email: E-Mail-Adresse.
     • tel: Telefonnummer.
     • address-line1: Straße und Hausnummer.
     • postal-code: Postleitzahl.
4. Teste die Funktionalität:
   • Lade deine Website und überprüfe, ob die Felder jetzt automatisch ausgefüllt werden können.
   • Nutze unterschiedliche Browser und Endgeräte, um sicherzustellen, dass die Funktion überall funktioniert.
5. Berücksichtige Datenschutz und Sicherheit:
   • Vermeide automatische Vervollständigung bei sensiblen Daten wie Passwörtern oder Zahlungsinformationen, wenn es nicht ausdrücklich erforderlich ist.
   • Beispiel für deaktivierte automatische Vervollständigung:

     <input type="password" autocomplete="off">

6. Kombiniere mit Labels und Platzhaltern:
   • Ergänze Labels und Platzhalter, um eine klare und benutzerfreundliche Struktur zu gewährleisten.

Beispiele & Best Practices

• Falsche Werte: Nutze die richtigen Werte für das autocomplete-Attribut, um sicherzustellen, dass Browser die Daten korrekt vervollständigen.
• Nicht unterstützte Felder: Achte darauf, dass nur relevante Felder mit autocomplete versehen werden.
• Deaktivierte Funktion: Vermeide unnötiges Deaktivieren der automatischen Vervollständigung.

• Das autocomplete-Attribut ermöglicht Browsern, Eingabefelder mit gespeicherten Daten automatisch auszufüllen.
• Nutze standardisierte Werte, die in der HTML-Spezifikation definiert sind, um maximale Kompatibilität zu gewährleisten.
• Verwende für sensible Daten wie Passwörter das Attribut nur, wenn es sicher und erforderlich ist.

• MDN Web Docs: autocomplete
• WCAG Richtlinien für Formulare
• Google Lighthouse für Barrierefreiheit