Identität

Nutzer bei der Registrierung unterstützen

Das Anmeldeformular ist oft die erste Interaktion mit einem Formular auf Ihrer Website. Das Erstellen eines Anmeldeformulars ist entscheidend und ein sicheres Formular ist entscheidend.

Sehen wir uns ein Anmeldeformular an und erfahren Sie, wie Sie Nutzern bei der Anmeldung auf Ihrer Website helfen können.

Verwenden Sie möglichst wenige Angaben im Anmeldeformular und verwenden Sie nur die Steuerelemente, die zum Erstellen eines Kontos erforderlich sind. Sie sollten die Steuerelemente für Formulare nicht verdoppeln, damit Nutzer ihre Kontodetails korrekt angeben können. Senden Sie stattdessen eine Bestätigungs-E-Mail.

Nutzern beim Ausfüllen ihrer Kontodetails helfen

Sie können Nutzern dabei helfen, ihre Kontodetails anzugeben, indem Sie das entsprechende autocomplete-Attribut verwenden. Verwenden Sie autocomplete="email" für das E-Mail-Feld und autocomplete="new-password" für ein neues Passwortfeld.

Weitere Informationen zu Eingabesteuerelementen für das automatische Ausfüllen

Du kannst Nutzern auch dabei helfen, ein sicheres Passwort einzugeben, indem du ein Passwort <button> für die Identifizierung anbietest.
Weitere Informationen zum Muster „Passwort-Erkennung“

Achten Sie darauf, dass das Anmeldeformular sicher ist.

Speichern oder übertragen Sie Passwörter niemals als unformatierten Text. Achten Sie darauf, Passwörter zu salten und zu hashen, und versuchen Sie nicht, einen eigenen Hash-Algorithmus zu erfinden.

Bieten Sie eine Multi-Faktor-Authentifizierung an, insbesondere wenn Sie personenbezogene oder sensible Daten speichern. In den Best Practices für SMS-OTP und unter Starke Authentifizierung mit WebAuthn aktivieren wird erläutert, wie die Multi-Faktor-Authentifizierung implementiert wird.

Achten Sie darauf, dass Nutzer keine gehackten Passwörter verwenden. Sie können beispielsweise die API von Have I Been Pwned verwenden, um gehackte Passwörter zu ermitteln und Ihren Nutzern vorzuschlagen, ein anderes neues Passwort einzugeben, oder sie warnen, wenn ihr Passwort gehackt wird.

Nutzer bei der Anmeldung unterstützen

Sehen wir uns an, wie Sie ein Anmeldeformular erstellen, damit sich Nutzer einfach auf Ihrer Website anmelden können.

Die Schaltflächen zum Anmelden und Anmelden sollten gut zu erkennen sein. Das Formular muss auf Geräten mit Touchscreen verwendet werden können:

Die Größe des Tippziels für Schaltflächen beträgt mindestens 48 Pixel.
Die font-size deiner Formularelemente sind groß genug (20px entspricht in etwa auf Mobilgeräten).
Zwischen den Formularsteuerelementen ist genügend Platz (margin) und die Eingaben sind groß genug. Verwenden Sie auf Mobilgeräten mindestens padding: 15px.

Nutzern beim Eingeben ihrer E-Mail-Adresse und ihres Passworts helfen

Mit dieser Richtlinie können Browser und Passwortmanager Kontodetails automatisch ausfüllen lassen. Verwenden Sie autocomplete="email" für das E-Mail-Feld und autocomplete="current-password" für das aktuelle Passwortfeld.

Damit Nutzer ihre Kontodetails manuell eingeben können, verwenden Sie type="email" für das E-Mail-Feld, damit auf Mobilgeräten die entsprechende Bildschirmtastatur angezeigt wird.

Verwenden Sie das Attribut required für das Feld für die E-Mail-Adresse und das Passwort, damit Sie eine Warnung vor ungültigen Werten erhalten können, wenn der Nutzer das Formular sendet. Verwenden Sie die Echtzeitvalidierung, damit Nutzer ungültige Daten direkt nach der Eingabe korrigieren können, anstatt auf das Senden des Formulars warten zu müssen.

Sicherstellen, dass Nutzer das eingegebene Passwort sehen können

Der für <input type="password"> eingegebene Text wird aus Datenschutzgründen standardmäßig ausgeblendet. Erleichtern Sie Nutzern die Eingabe ihres Passworts, indem Sie ein <button> einblenden, um die Sichtbarkeit des eingegebenen Texts zu ändern.

Hier finden Sie weitere Informationen zum Implementieren einer Passwort-Offenlegung <button>.

Achten Sie darauf, dass Ihre Anmelde- und Anmeldeformulare verwendbar sind

Testen Sie Ihre Anmelde- und Anmeldeformulare regelmäßig mit echten Personen, um sicherzustellen, dass die Authentifizierung wie erwartet funktioniert. Verwenden Sie Analysen und die Messung realer Nutzer (Real User Measurement, RUM), um Felddaten zu erfassen, und Tools wie Lighthouse und PageSpeed Insights, um selbst Tests durchzuführen. Weitere Informationen zu Tests der Nutzerfreundlichkeit und zum Erheben von Analysedaten

Sorgen Sie dafür, dass Ihre Formulare in verschiedenen Browsern und auf verschiedenen Plattformen funktionieren. Testen Sie das Formular auf verschiedenen Bildschirmgrößen. Verwenden Sie dazu entweder Ihre Tastatur oder einen Screenreader wie VoiceOver auf dem Mac oder NVDA auf Windows.

Nutzern beim Ändern ihrer Kontoeinstellungen helfen

Sorgen Sie dafür, dass Nutzer jede Kontoeinstellung, einschließlich E-Mail-Adressen, Passwörter und Nutzernamen, ändern können.

Es muss transparent sein, welche Daten gespeichert werden, und den Nutzern dabei helfen, ihre personenbezogenen Daten jederzeit herunterzuladen. Sorgen Sie dafür, dass Nutzer ihr Konto löschen können, wenn sie das möchten. Funktionen zur Kontoverwaltung wie diese sind in einigen Regionen möglicherweise gesetzlich vorgeschrieben.

Dafür sorgen, dass Nutzer ihre Passwörter aktualisieren können

Machen Sie es Nutzern leicht, ihr Passwort zu aktualisieren.

Fragen Sie die Nutzer nach dem aktuellen Passwort, bevor Sie es ändern, und senden Sie bei einer Passwortänderung eine E-Mail mit der Option, das Konto rückgängig zu machen und zu sperren.

Fügen Sie die Option zum Anfordern eines neuen Passworts hinzu und geben Sie ggf. eine .well-known-URL an, um ein neues Passwort anzufordern.