Password Show/Hide

Overview

A password visibility control helps users verify what they typed. Use one coherent button model: either a changing Show/Hide action label, or a stable toggle label with aria-pressed. Do not combine a stable visible label, pressed state, live message, and forced focus movement; that duplicates state and makes the interaction harder to predict.

This example follows the current GOV.UK action-label model. The button changes between “Show password” and “Hide password,” has no aria-pressed, keeps focus on itself, and references the field with aria-controls. The password value is never copied into a live region.

<div>Password</div>
<input id="password" type="password" />
<button onclick="togglePassword()">👁</button>

<label for="password">Password</label>
<input
  id="password"
  name="password"
  type="password"
  autocomplete="current-password"
  spellcheck="false"
  autocapitalize="none"
/>
<button type="button" aria-controls="password" onclick="togglePassword(this)">
  Show password
</button>
 
<script>
  function togglePassword(button) {
    const input = document.getElementById('password')
    const show = input.type === 'password'
    input.type = show ? 'text' : 'password'
    button.textContent = show ? 'Hide password' : 'Show password'
    // Focus stays on the control the user activated.
  }
</script>

Changing the label and using aria-pressed simultaneously would mix action and toggle models. A separately tested live message can be added for a documented interoperability need, but it is not a universal requirement. Never announce the password value.

Test it

Verify Show and Hide with keyboard, touch, speech input, browser autofill, and at least one password manager. Confirm that selection and value remain intact when the input type changes and that the accessible name always contains the visible label.

Resources

• GOV.UK Password Input 
• APG Button Pattern 
• WCAG 4.1.2 Name, Role, Value 
• Accessible Authentication