Password reveal toggle

Masking a password protects it from the room, not from the machine, and the room is usually empty. The reveal toggle gives that judgement back to the person typing: they can see what they typed, catch the caps lock, and stop retyping a long passphrase three times. Every measured version of this makes sign-in faster and cuts failed attempts, which is why it has moved from a nicety to a default.

It is a toggle button, not a checkbox and not a link. aria-pressed carries the state, the accessible name stays stable (“Show password”) while pressed state changes, or the name changes (“Show password” and “Hide password”) while pressed state is dropped: pick one convention, never both, or a screen reader announces the contradiction. The field itself switches between type="password" and type="text", and the caret position should survive the switch.

Two details separate the careful implementations. The control sits inside the field’s box, so it belongs to that field and not to the form, and it must not cover the text at the exact moment someone is reading it. And revealing is not sticky: the field goes back to masked when the page reloads, when the form is submitted, and often after a timeout, because a revealed password left on screen is the failure mode the mask existed for.

An eye glyph alone is ambiguous (does the open eye mean “it is visible” or “make it visible”?), which is why GOV.UK ships the words Show and Hide instead. If the icon stays, give it a real label, and make sure the crossed-out eye and the plain eye are distinguishable at the size they actually ship at.