Password input field

Synonyms: Password field

See also: Input field (one-line) , authentication

Password input fields allow for the entry of a password.

A password input field is usually a rectangular area of the page that contrasts with its surroundings due to a border, a line or a different background color, for example. The entered value is only displayed in a masked format. A password input field can contain a button to unmask the value.

The requirements concerning the input field are described in the “input field” section. Here, only the additional requirements are described which result from the fact that it is an input field for entering a password.

The requirements concerning the input field are described in the “input field” section. Here, only the additional requirements are described which result from the fact that it is an input field for entering a password.

Tastaturkürzel has been implemented, insofar as this keyboard shortcut is visually perceptible at the password input field and with assistive technology.

The requirements concerning the input field are described in the “input field” section. Here, only the additional requirements are described which result from the fact that it is an input field for entering a password.

Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!615 | Value | The value of the password input field may not be communicated to the Accessibility API unless the masking of the entry was removed. Instead of this, a masked character string must be communicated as a value to the Accessibility API (see Accessibility API).

Note: The masked character string to be used for the Accessibility API is a character string consisting of an amount of “black dot” (•) points corresponding to the length of the input.

Element status).

Note: This also applies to the “masked” or “unmasked” status. Accordingly, the password input field can be communicated without masking to the Accessibility API with the input field role.

• JAWS: [label] input field for passwords [masked value] [instruction on text input]
• NVDA: [label] protected input field [masked value]
• Windows Narrator: [label] edit [value]

Please note:

• With Windows Narrator, the difference between an input field and a password input field is not perceptible.
• When entered, the masked value, the “black dot” (•) is output as “asterisk” (JAWS, NVDA) and/or “hidden” (Windows Narrator). A value that has already been entered is output as a sequence of “bullet points”, whereby JAWS shortens the amount of characters to three by default.

To prevent the entered password from being output by the assistive technology, the password input field must be implemented with the HTML element <input type=password>.
The label of the password input field should be linked to the password input field with the <label for=ID> element.
A password input field can be marked as disabled (disabled) and read-only (readonly). A password input field can be marked as a required field with required.
If specific rules apply when assigning the password, the following should be observed:

• The rules should be explained at the password input field.
• If the rules are short and unstructured, the password input field should be programmatically linked with the rules (with aria-describedby, for example).
• If the rules are long or structured, they should be placed in the source code before the password input field, to ensure that the reading sequence is correct. The rules can be given a heading (e.g. “Instructions on password entry”). At the input field, the Accessible Description should make reference to the fact that rules are available (e.g. “Note the input instructions for passwords before this field”).
• If the rules are validated automatically upon input, this should also be perceptible when using assistive technology, e.g. by marking the result of the validation as a live region.

Further information: 4.10.5.1.6 Password state (type=password) - HTML Standard (whatwg.org)

There is no role for password input fields in ARIA. Instead, the appropriate HTML element must be used for password input fields so that the password to be entered is not output by the assistive technology.

Information about this article

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!