Formulare gehören zu den Standardbausteinen des Webs. Registrierung, Checkout, Kontaktformular – überall werden ähnliche Informationen abgefragt. Name, Adresse, E-Mail oder Telefonnummer immer und immer wieder. Damit das Ausfüllen nicht jedes Mal von vorne beginnt, helfen Browser inzwischen kräftig mit. Sie merken sich frühere Eingaben, schlagen Werte vor oder füllen Felder gleich komplett aus..
Ein Teil dieses Verhaltens passiert automatisch. Aber wir können es auch gezielt steuern – mit dem HTML-Attribut autocomplete. Doch welche Möglichkeiten haben wir eigentlich um hier mitzuhelfen und birgt der Einsatz auch Risiken? Welchen Einfluss hat die automatische Vervollständigung von Formularen auf die Barrierefreiheit einer Website? Los geht’s.
Was macht das HTML-Attribut autocomplete?
Das autocomplete-Attribut beschreibt den Zweck eines Eingabefelds. Der Browser bekommt damit einen Hinweis darauf, welche Art von Information erwartet wird – zum Beispiel eine E-Mail-Adresse, eine Telefonnummer oder eine Postleitzahl. Dabei hat man viel mehr Möglichkeiten als mit dem type allein, der mehr das Format der Eingabe, weniger den Inhalt beschreibt.
Ein einfaches Beispiel:
<label for="lastName">Nachname:</label>
<input type="text" id="lastName" name="lastName" autocomplete="family-name">
Hier signalisiert autocomplete="family-name", dass in diesem Feld der Nachname eingegeben werden soll. Browser können darauf reagieren, indem sie passende Vorschläge aus vergangenen Eingaben anzeigen oder gespeicherte Daten automatisch einsetzen.
Wichtig ist: Das Attribut füllt ein Feld nicht selbst aus. Es beschreibt lediglich den Zweck des Felds. Ob und welche Daten tatsächlich vorgeschlagen oder eingefügt werden, entscheidet der Browser.
Woher kennt der Browser die Daten?
Wenn ein Browser ein Formular automatisch ausfüllt, wirkt das manchmal fast ein wenig unheimlich. Schließlich wurden die Daten auf der aktuellen Seite noch gar nicht eingegeben. Die Erklärung ist meist recht simpel: Browser speichern bestimmte Informationen und können sie später wiederverwenden.
Typische Quellen für Autofill-Daten sind zum Beispiel:
- Browser-Profile
Viele Browser erlauben es, persönliche Daten zu speichern – etwa Name, Adresse, Telefonnummer oder E-Mail. - Frühere Formulareingaben
Werte, die in der Vergangenheit in ähnliche Felder eingegeben wurden, können später wieder vorgeschlagen werden. - Passwortmanager
Login-Daten oder Kreditkarteninformationen werden oft von integrierten oder externen Passwortmanagern bereitgestellt. - Betriebssystem-Daten
Manche Browser greifen zusätzlich auf gespeicherte Kontaktinformationen des Betriebssystems zu.
Welche Daten tatsächlich verfügbar sind, hängt also stark davon ab, was Nutzer im Browser gespeichert haben.
Das erklärt auch, warum Autofill auf verschiedenen Geräten oder in verschiedenen Browsern unterschiedlich funktioniert. Ein Formular kann technisch identisch sein – die Vorschläge des Browsers können trotzdem ganz anders aussehen.
Können Browser Formularfelder auch ohne autocomplete erkennen?
Die kurze Antwort: ja – zumindest manchmal. Browser versuchen schon seit vielen Jahren, Formularfelder automatisch zu erkennen. Dazu nutzen sie verschiedene Hinweise im HTML, zum Beispiel:
- den
typeeines Eingabefelds - das
name-Attribut - die
id - den Text eines zugehörigen
<label>-Elements - Platzhaltertexte
Ein Feld wie dieses ist für Browser meist leicht zu erkennen:
<label for="email">E-Mail</label>
<input id="email" name="email" type="email">
Selbst ohne autocomplete kann hier ohnehin nur eine E-Mail-Adresse eingegeben werden von denen die meisten Menschen vielleicht 1 oder 2 haben (privat und geschäftlich).
Schwieriger wird es bei weniger eindeutigen Feldnamen:
<label for="user">Kontakt</label>
<input id="user" name="user" type="text">
Was genau hier eingegeben werden soll, ist nicht klar. Handelt es sich um einen Namen? Eine E-Mail-Adresse? Eine Telefonnummer? In solchen Fällen müssen Browser raten. Und dieses Raten funktioniert nicht immer zuverlässig. Und genau hier kommt autocomplete ins Spiel. Wir beschreiben damit den Zweck eines Feldes eindeutig. Statt zu spekulieren, weiß der Browser dann genau, welche Information erwartet wird.
Welche Werte gibt es für autocomplete?
Das autocomplete-Attribut kennt eine ganze Reihe möglicher Werte. Jeder Wert beschreibt eine bestimmte Art von Information, die in einem Formularfeld erwartet wird.
Ein paar typische Beispiele:
name– vollständiger Namegiven-name– Vornamefamily-name– Nachnameemail– E-Mail-Adressetel– Telefonnummerstreet-address– Straße und Hausnummerpostal-code– Postleitzahlcountry– Land
So könnte ein einfaches Formular dann aussehen:
<label for="given-name">Vorname</label>
<input id="given-name" name="given-name" autocomplete="given-name">
<label for="family-name">Nachname</label>
<input id="family-name" name="family-name" autocomplete="family-name">
<label for="email">E-Mail</label>
<input id="email" name="email" type="email" autocomplete="email">
Der Browser weiß dadurch sehr genau, welche Information in welchem Feld erwartet wird.
Neben persönlichen Daten gibt es auch Werte für andere Informationen, zum Beispiel:
usernamenew-passwordcurrent-passwordcc-number(Kreditkartennummer)cc-exp(Ablaufdatum)
Die vollständige Liste ist deutlich länger. Sie umfasst unter anderem auch Felder für Adressen, Zahlungsdaten und verschiedene Arten von Telefonnummern.
Eine komplette Übersicht findet sich in der HTML-Spezifikation:
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
Welche Rolle spielt autocomplete für die Barrierefreiheit?
Das autocomplete-Attribut ist nicht nur eine Komfortfunktion für Autofill. Es spielt auch eine Rolle in den Web Content Accessibility Guidelines (WCAG). Relevant ist hier das Erfolgskriterium 1.3.5: Identify Input Purpose. Dieses Kriterium fordert, dass der Zweck bestimmter Eingabefelder programmatisch bestimmt werden kann. Gemeint sind vor allem Felder, in denen persönliche Daten abgefragt werden.
Das autocomplete-Attribut hilft damit unter anderem:
- Screenreadern, die zusätzliche Kontextinformationen bereitstellen können
- Autofill-Funktionen, die passende Daten schneller anbieten
- Nutzern mit kognitiven Einschränkungen, die weniger Eingaben selbst tippen müssen
Wichtig ist dabei: Das WCAG-Kriterium gilt nicht für alle Formularfelder. Felder mit einmaligen Eingaben wie eine Kundennummer oder Suchen benötigen natürlich keine automatische Vervollständigung.
Wann sollte man autocomplete deaktivieren?
Nicht in jedem Formular ist automatische Vervollständigung erwünscht. In manchen Fällen kann es sinnvoll sein, dem Browser ausdrücklich mitzuteilen, dass keine Vorschläge oder gespeicherten Daten verwendet werden sollen.
Dafür kann autocomplete deaktiviert werden:
<input type="text" autocomplete="off">
Auch ganze Formulare lassen sich so kennzeichnen:
<form autocomplete="off">
Typische Situationen, in denen das sinnvoll sein kann:
- Einmalcodes (z. B. Zwei-Faktor-Authentifizierung)
- Sicherheitscodes von Kreditkarten (CVC / CVV)
- temporäre Zugangsdaten
- besonders sensible Eingaben
- Registrierung als neuer Nutzer
Der Gedanke dahinter: Auf gemeinsam genutzten Geräten oder in öffentlichen Umgebungen sollen keine gespeicherten Daten automatisch vorgeschlagen werden.
Allerdings gibt es eine Einschränkung: Moderne Browser halten sich nicht immer strikt an autocomplete="off". Besonders bei Loginformularen kann es passieren, dass Passwortmanager oder Browser trotzdem Vorschläge anzeigen. Viele Browser tun das bewusst, um die Nutzung von Passwortmanagern zu unterstützen.
autocomplete="off" sollte deshalb nicht als Sicherheitsmaßnahme verstanden werden. Es ist lediglich ein Hinweis an den Browser – keine Garantie.
Fazit
autocomplete gehört zu den eher unscheinbaren HTML-Attributen. Erst wenn die Browser mal falsch raten merkt man, dass eine gute Definition fehlt. Richtig eingesetzt hilft es Browsern, den Zweck eines Eingabefelds eindeutig zu erkennen. Autofill funktioniert zuverlässiger, Formulare lassen sich schneller ausfüllen und Assistive Technologies bekommen zusätzliche Informationen über die erwarteten Eingaben.
Gleichzeitig lohnt sich ein bewusster Einsatz. Nicht jedes Feld profitiert von automatischer Vervollständigung. Bei Einmalcodes oder sicherheitsrelevanten Eingaben kann es sinnvoll sein, die automatische Vervollständigung zu deaktivieren.
Mehr über die Barrierefreiheit von Formularen gibt es übrigens hier: