Verwendung
Felder vom Typ input type="password" dienen der Eingabe von Passwörtern. Die Komponente besteht aus dem eigentlich input-Feld und einem zugeordneten Button, der das Ein- und Ausblenden des eingegebenen Passworts ermöglicht.
Aufbau
Als Komfortmerkmal enthalten Passwort-Felder einen zusätzlichen Button, mit dem das initial per ••• maskierte Passwort im Klartext angezeigt werden kann; dies erleichtert die Überprüfung der Einhaltung von Passwortregeln. Obwohl es sich technisch um ein seperates Element handelt wird dieser Button optisch als integraler Bestandteil des Passwort-Felds dargestellt. Die Vorgaben zur Einbindung dieses Buttons finden sie als allgemeiner gehaltenes Muster bei input type="text".
Beschriftung
Felder vom Typ input type="password" benötigen zwingend eine visuell sichtbare Beschriftung, in welcher der Zweck beschrieben wird. Dies wird grundsätzlich über ein implizit oder explizit verknüpftes <label> erreicht. aria-label als Label-Ersatz sind nicht zulässig, auch Platzhalter-Texte mit dem HTML-Attribut placeholder als alleinige Beschriftung erfüllen die Anforderungen an die Barrierefreiheit nicht.
Tooltips
Passwort-Felder enthalten grundsätzlich keine Tooltips. Bei der erstmaligen Vergabe eines Passworts zum Beispiel im Verlauf eines Registrierungsprozesses ist die bevorzugte Variante die dauerhaft sichtbare Darstellung der Passwort-Regeln unmittelbar am Passwort-Feld.
Inaktive Elemente
Inaktive Elemente mit disabled-Attribut sind visuell deutlich als solche gekennzeichnet, z. B. wenn sie in der Applikationslogik aufgrund fehlender vorhergehender Auswahlen noch nicht aktiv sein können. Sie beinhalten keine Daten.
Rein darstellende Elemente mit readonly-Attribut sind bereits serverseitig mit Daten befüllt, die nicht mehr editierbar sind, und erhalten eine eigenständige Gestaltung, die ihren Zweck visualisiert. Optional können readonly-Felder zugeordnete weitere Inhalte haben, mit denen die Herkunft der vorbefüllten Daten vermittelt wird, z. B. durch ein ELSTER-Logo.
Do’s and Dont’s
So:
- Ausreichende Breite, um auch lange Passwörter zuzulassen
So nicht:
- Die Verwendung von Passwort-Managern durch Scripting unterbinden