FigmaOpenCode

Input Password

Synonyme: Passwort-Eingabefeld, Passwortfeld, Password input field
Ähnliche Komponenten: Input Date, Input E-Mail, Input Text

Kurzbeschreibung

Input Password ermöglicht die Eingabe oder Erstellung eines Passworts.

Beispiele

Default

Code anzeigen

<div class="kern-form-input">
<label class="kern-label" for="password">Passwort</label>
<input class="kern-form-input__input" id="password" name="password" type="password">
</div>

Optional

Code anzeigen

<div class="kern-form-input">
<label class="kern-label" for="password">Passwort <span class="kern-label__optional">- Optional</span></label>
<input class="kern-form-input__input" id="password" name="password" type="password">
</div>

Hinweistext und Fehlermeldung

Code anzeigen

<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="password6">Passwort</label>
<div class="kern-hint" id="password-hint">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<input class="kern-form-input__input kern-form-input__input--error" id="password6" name="password6" type="password" aria-describedby="password-hint kern-input-error">
<p class="kern-error" id="kern-input-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md"  aria-hidden="true"></span>
  <span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</div>

Beschreibung

infoHinweis

Für Input Password gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.

Input Password stellt die Zeichen bei der Eingabe durch den Nutzenden maskiert dar. Unterhalb des Feldes gibt es einen Link „Passwort vergessen“, der Nutzende zu einem Formular zur Beantragung eines neuen Passwortes führen soll. Im Gegensatz zu regulären Textfeldern werden die eingegebenen Zeichen in einem Passwortfeld durch Punkte ersetzt. Dies schützt die eingegebenen Daten vor neugierigen Blicken und erhöht die Sicherheit. Nutzende können die Sichtbarkeit der Zeichen ein- oder ausblenden, indem sie auf das Ansichtssymbol rechts im Eingabefeld klicken. Das Einblenden hilft Nutzenden, Tippfehler zu vermeiden. Die „autocomplete“-Funktion ist in Passwortfeldern deaktiviert, um den Datenschutz zu gewährleisten. Dies verhindert, dass Passwörter automatisch von Webbrowsern gespeichert und wiederverwendet werden. Input Password kann alle unter Input beschriebenen Zustände annehmen, mit Ausnahme von „disabled" und „readonly".

Verwendungsregeln

Input Password wird im Anmelde- oder Registrierungsprozess eines Dienstes zur Eingabe des Passwortes genutzt. Verwende Input Password nicht für andere Texteingaben.

Dos und Don’ts

• Erläutere in der Hilfe die Regeln und Restriktionen zur Erstellung eines Passwortes im Falle der Registrierung.
• Verwende die Autovervollständigung autocomplete="current-password" oder autocomplete="new-password".
• Verzichte nicht ohne guten Grund auf die Autovervollständigung – sie verbessert die Nutzerfreundlichkeit und wird von modernen Browsern erwartet.
• Gib bei fehlerhaften Logins nicht preis, ob Benutzername oder Passwort falsch war – verwende eine neutrale Fehlermeldung, um Sicherheitsrisiken zu vermeiden.
• Siehe auch allgemeine Dos und Don'ts für Input

Barrierefreiheit

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 1.3.1

Password-Input ist programmatisch mit Label verknüpft

Implementierungsabhängig

WCAG 1.3.5

Password-Input-Zweck ist programmatisch erkennbar

Implementierungsabhängig

WCAG 1.3.5

Password-Input hat ein passendes autocomplete-Attribut

Implementierungsabhängig

WCAG 2.4.13

Password-Input hat sichtbare Fokuszustände

Implementierungsabhängig

WCAG 3.2.5

Password-Anzeige-Toggle ist verfügbar

Implementierungsabhängig

WCAG 3.3.1

Password-Validierungsfehler werden klar identifiziert

Implementierungsabhängig

WCAG 3.3.2

Password-Input hat aussagekräftige Beschriftung

Implementierungsabhängig

WCAG 3.3.5

Password-Anforderungen sind klar beschrieben

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.3.1

Fehlermeldung ist programmatisch mit Password-Input verknüpft

Bestanden

WCAG 1.4.6

Password-Input-Text erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 1.4.11

Password-Input-Rahmen hebt sich mit mindestens 3:1 Kontrast ab

Bestanden

WCAG 2.1.1

Password-Input ist vollständig per Tastatur bedienbar

Bestanden

WCAG 4.1.3

Fehlermeldung wird als Status-Nachricht gekennzeichnet

Siehe auch: BFIT Handreichungen