Password input

How to test a password input

Gherkin Condensed

Given that I am on a page with a password input

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to the password input I SEE focus is strongly visually indicated
Then when I use the tab key to move focus to the show/hide password I SEE its name, role and state
Then when I use the show/hide password feature I SEE the state of the password visibility (with or without characters entered)

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to the password input
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a text input
- I HEAR It is indicated if the password is being shown
- I HEAR If applicable, it expresses its state (required, disabled / dimmed / unavailable)
Then when I use the tab key to move focus to the show/hide password I HEAR its name, role and state
Then when I use the show/hide password feature I HEAR the state of the password visibility (with or without characters entered)

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a password input
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a text input
- I HEAR It is indicated if the password is being shown
- I HEAR If applicable, it expresses its state (required, disabled / dimmed / unavailable)

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves visibly to the input or show password checkbox
Spacebar	Toggles the show password checkbox

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the input
Keyboard	Keyboard appears

3 Screenreader output for all devices

Reads	I hear
Name	Its purpose is clear
Role	It identifies itself as a text input
Group	It is indicated if the password is being shown
State	If applicable, it expresses its state (required, disabled / dimmed / unavailable)

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.
Placing the show password checkbox ahead of the password input increases discoverability for screen reader users.
- CSS pseudo elements are used in the checkbox label to express its state on focus of the password input.

<form class="password-container">
  <label for="password">
    Password
    <span class="helper" aria-hidden="true">
      Required
    </span>
  </label>
  <div id="password-hint">
    <input type="checkbox" id="show-password">
    <label for="show-password">
      Show Password
    </label>
  </div>
  <input type="password"
         id="password"
         aria-describedby="password-hint"
         aria-required="true"
         required>
</form>

Developer notes

Name

Include for="input-id in each <label> label to associate it with the input
Use aria-label="Input name" as a last resort if a <label> can’t be used

Role

Identifies as some kind of secure input

State

The show password checkbox must indicate its state on focus

Group

Include for="input-id in each <label> label to associate it with the input
Use <fieldset> and <legend> to name a group of inputs.

Focus

Focus must be visible