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.
Presentation
Permalink "Presentation"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.
| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 611 | Contrast | The masked and unmasked text in the password input field must have a contrast of at least 4.5:1. | Must | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 612 | Value | If the password input field may only contain certain characters or a particular input format is required, it is necessary for this to be explained in the input instruction. Note: This only applies when a new password is given, and not when the password is entered for authentication purposes or if the password is entered repeatedly. | Must | EN 301 549: 9.3.3.2, 11.3.3.2 |
Operation
Permalink "Operation"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.
| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 613 | Use of the keyboard | If the password input field contains other interactive elements such as a button for unmasking the input, these must receive the focus with the tab key after the input field. Note: This does not apply to elements for which a Tastaturkürzel has been implemented, insofar as this keyboard shortcut is visually perceptible at the password input field and with assistive technology. | Must | EN 301 549: 9.2.1.1, 11.2.1.1 |
Programming/interfaces
Permalink "Programming/interfaces"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.
| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 614 | Role | The password input field role must be communicated to the Accessibility API (see 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. | Must | EN 301 549: 4.2.11, 9.4.1.2, 11.4.1.2, 11.5.2.7 |
| 616 | Status | The status of the password input field must be communicated to the Accessibility API (see 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. | Must | EN 301 549: 9.4.2.1, 11.4.2.1 |
Practical tip: password input field in Web applications
Permalink "Practical tip: password input field in Web applications"Screenreader output
Permalink "Screenreader output"- 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.
HTML
Permalink "HTML"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)
ARIA
Permalink "ARIA"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
You are welcome to send feedback by email about our handout!