Password input

How to test a password input

Gherkin Condensed WCAG

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 feature 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 Hints or errors are read after the label (Ex: Password formatting)
- I HEAR If applicable, it expresses its state (required, disabled / dimmed / unavailable) and it is indicated if the password is being shown
Then when I use the tab key to move focus to the show/hide password feature 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 Hints or errors are read after the label (Ex: Password formatting)
- I HEAR If applicable, it expresses its state (required, disabled / dimmed / unavailable) and it is indicated if the password is being shown

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	Hints or errors are read after the label (Ex: Password formatting)
State	If applicable, it expresses its state (required, disabled / dimmed / unavailable) and it is indicated if the password is being shown

A password input must meet these WCAG principles.

1Perceivable

Is easy to identify as interactive
Color is not used as the only means of conveying information

2Operable

Is keyboard operable
The click/tap target area is no smaller than 44x44px
The disabled and focus states have a 3:1 minimum contrast ratio against default
The focus indication has a 3:1 minimum contrast ratio against adjacent elements
The focus indication has a minimum area equal to the width of the element and 2px in height

3Understandable

Its purpose is clear in the context of the whole page

4Robust

Conveys the correct semantic role
Expresses its state
Meets criteria across platforms, devices and viewports

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-toggle" class="password-toggle">
    <input type="checkbox" id="show-password">
    <label for="show-password">
      Show Password
    </label>
  </div>
  <input type="password"
         id="password"
         aria-describedby="password-toggle password-hint"
         aria-required="true"
         required>
  <div id="password-hint" class="hint">
    Use any length of characters including emojis.
  </div>
</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