Synonyme: Passwort-Eingabefeld, Passwortfeld, Password input field
Siehe auch: Eingabefeld (einzeilig), Authentifizierung
Kennwort-Eingabefelder ermöglichen die Eingabe eines Passworts.
Ein Kennwort-Eingabefeld ist ein meist rechteckiger Bereich der Seite, der sich z. B. durch einen Rahmen, eine Linie oder eine abweichende Hintergrundfarbe von der Umgebung abhebt. Der eingegebene Wert wird nur maskiert angezeigt. Ein Kennwort-Eingabefeld kann einen Schalter enthalten, um die Maskierung des Werts aufzuheben.
Darstellung
Permalink zu "Darstellung"Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld zur Kennwort-Eingabe handelt.
| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 611 | Kontrast | Der maskierte und unmaskierte Text im Kennwort-Eingabefeld muss einen Kontrast von mindestens 4,5:1 aufweisen. | Muss | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 612 | Wert | Wenn in das Kennwort-Eingabefeld nur bestimmte Zeichen eingegeben werden dürfen oder ein besonderes Eingabeformat erforderlich ist, so muss dies im Eingabehinweis erläutert werden. Hinweis: Dies gilt nur bei der Vergabe eines neuen Kennworts, nicht bei der Eingabe des Kennworts zur Authentifizierung oder bei der wiederholten Kennworteingabe. | Muss | EN 301 549: 9.3.3.2, 11.3.3.2 |
Bedienung
Permalink zu "Bedienung"Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld zur Kennwort-Eingabe handelt.
| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 613 | Tastaturbedienung | Enthält das Kennwort-Eingabefeld weitere interaktive Elemente, wie z. B. einen Schalter zum Entmaskieren der Eingabe, so müssen diese mit der Tabulatortaste nach dem Eingabefeld den Fokus erhalten. Hinweis: Davon ausgenommen sind Elemente, für die ein Tastaturkürzel implementiert wurde, sofern dieses Tastaturkürzel beim Kennwort-Eingabefeld visuell und mit Assistenztechnologie wahrnehmbar ist. | Muss | EN 301 549: 9.2.1.1, 11.2.1.1 |
Programmierung/Schnittstellen
Permalink zu "Programmierung/Schnittstellen"Die Anforderungen an das Eingabefeld werden im Abschitt „Eingabefeld“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um ein Eingabefeld zur Kennwort-Eingabe handelt.
| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 614 | Rolle | Die Rolle Kennwort-Eingabefeld muss an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 615 | Wert | Der Wert des Kennwort-Eingabefeldes darf nicht an die Accessibility API übermittelt werden, es sei denn die Maskierung der Eingabe wurde aufgehoben. Stattdessen muss eine maskierte Zeichenkette als Wert an die Accessibility API übermittelt werden (siehe Accessibility API). Hinweis: Als maskierte Zeichenkette für die Accessibility API wird eine Zeichenkette verwendet, die aus einer der Länge der Eingabe entsprechenden Anzahl von Aufzählungszeichen „schwarzer Kreis“ (•) besteht. | Muss | EN 301 549: 4.2.11, 9.4.1.2, 11.4.1.2, 11.5.2.7 |
| 616 | Status | Der Status des Kennwort-Eingabefeldes muss an die Accessibility API übermittelt werden (siehe Elementstatus). Hinweis: Dies bezieht sich auch auf den Status „maskiert“ oder „entmaskiert“. So kann das Kennwort-Eingabefeld ohne Maskierung mit der Rolle Eingabefeld an die Accessibility API übermittelt werden. | Muss | EN 301 549: 9.4.2.1, 11.4.2.1 |
Praxistipp Kennwort-Eingabefeld in Web-Anwendungen
Permalink zu "Praxistipp Kennwort-Eingabefeld in Web-Anwendungen"Screenreader-Ausgabe
Permalink zu "Screenreader-Ausgabe"- JAWS: [Beschriftung] Eingabefeld für Passwörter [maskierter Wert] [Hinweis zur Texteingabe]
- NVDA: [Beschriftung] Eingabefeld geschützt [maskierter Wert]
- Windows Sprachausgabe: [Beschriftung] Bearbeiten [Wert]
Hinweise:
- Mit der Windows Sprachausgabe ist der Unterschied zwischen einem Eingabefeld und einem Kennwort-Eingabefeld nicht wahrnehmbar.
- Der maskierte Wert, der „schwarzer Kreis“ (•), wird bei der Eingabe als „Stern“ (JAWS, NVDA) bzw. „versteckt“ (Windows Sprachausgabe), ausgegeben. Ein bereits eingegebener Wert wird als eine Folge von „Aufzählungszeichen“ ausgegeben, wobei JAWS die Anzahl der Zeichen standardmäßig auf drei verkürzt.
Das Kennwort-Eingabefeld muss mit dem HTML-Element <input type=password> umgesetzt werden, damit das eingegebene Passwort von der Assistenztechnologie nicht ausgegeben wird.
Die Beschriftung des Kennwort-Eingabefeldes sollte mit dem Element <label for=ID> mit dem Kennwort-Eingabefeld verknüpft werden.
Ein Kennwort-Eingabefeld kann als deaktiviert (disabled) und als schreibgeschützt (readonly) ausgezeichnet werden. Ein Kennwort-Eingabefeld kann mit required als Pflichtfeld ausgezeichnet werden.
Wenn bei der Vergabe des Kennworts bestimmte Regeln gelten, sollte Folgendes beachtet werden:
- Die Regeln sollten beim Kennwort-Eingabefeld erläutert werden.
- Wenn die Regeln kurz und nicht strukturiert sind, sollte das Kennwort-Eingabefeld programmatisch mit den Regeln verknüpft werden (z. B. per
aria-describedby). - Wenn die Regeln lang oder strukturiert sind, sollten sich diese im Quellcode vor dem Kennwort-Eingabefeld befinden, damit die Lesereihenfolge korrekt ist. Die Regeln können mit einer Überschrift versehen werden (z. B. „Hinweise zur Kennwort-Eingabe“). Beim Eingabefeld sollte die Accessible Description darauf hinweisen, dass Regeln vorhanden sind (z. B. „Beachten Sie die Eingabehinweise für Kennwörter vor diesem Feld“).
- Wenn die Regeln bei der Eingabe automatisch validiert werden, sollte dies auch mit Assistenztechnologie wahrnehmbar sein, z. B. indem das Ergebnis der Validierung als Live-Region ausgezeichnet wird.
Weitere Informationen: 4.10.5.1.6 Password state (type=password) - HTML Standard (whatwg.org)
In ARIA existiert keine Rolle für Kennwort-Eingabefelder. Stattdessen muss das entsprechende HTML-Element für Kennwort-Eingabefelder verwendet werden, damit das eingegebene Passwort von der Assistenztechnologie nicht ausgegeben wird.