Forms
Accessible password fields: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
Password inputs need clear labels, appropriate autocomplete and support for password managers and paste. A reveal control can help users check their entry, but it must accurately describe its action and preserve the field value.
A practical example
A login form lets the password manager fill the password and includes Show password. Activating it changes the presentation while keeping the user's entry and keyboard position stable.
Try the example
Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.
Use a fictional password here. Pasting is allowed. Nothing is submitted.
How to check it
- Use a password manager and paste a password into the field.
- Operate the reveal/hide control by keyboard and inspect its name and state.
- Test errors and recovery without clearing valid unrelated fields or requiring unnecessary cognitive tasks.
What can be missed
Blocking paste does not provide a reliable security benefit and creates an authentication barrier. Review the whole sign-in and recovery process, not just the password input.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<label for="account-password">Password</label>
<input id="account-password" name="password" type="password" autocomplete="current-password">
<button type="button" aria-controls="account-password">Show password</button>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.