skip to content W3C SVG

Show password

Priority: 3

Introduction

The option to “show password” when one is writing it is a sound inclusive design feature, helping users to compose or check their writing of passwords. However, a “show password” button that is not technically accessible fails some of the users who may want to take advantage of it.

Show password designed as a link, above the password input

The pictured show password control ahs a number of problems that need addressing:

  • It functions as a button, but is marked up as a link
  • It is not focusable by keyboard (because, as a link, it is missing an href)
  • Were it focusable, upon clicking it, focus would be lost — because it is actually two controls, with one always hidden
  • It appears before the field to which it relates, which is somewhat confusing visually and represents a backwards reading order non-visually.

WCAG criteria

Scope of the issue

Fixing the issue

Fundamentally, a toggle control should not use link semantics, or be styled as a link. Links are expected to perform linking/navigation behavior. Instead, supply the control as a checkbox, which communicates state (checked/on and unchecked/off) implicitly. This removes the necessity of managing two controls, and solves the dropped focus problem.

In the demo provided below, the checkbox is above the form field and a persistently visible label is provided above the input — see Missing and placeholder labels.