← Hub · Open the note

Password fields (show/hide + requirements) — BEFORE/AFTER demo

Common failure: “Show password” is an unlabeled icon, and requirements feedback spams screen readers on every keypress.

BEFOREHard to use with keyboard / screen readers

Problems: unlabeled eye icon, requirements announced constantly, and no caps-lock warning.

👁

Must be 12+ chars with a number and a symbol.

Start typing…

  • 12+ characters
  • Includes a number
  • Includes a symbol

Try: type, then press Tab — the eye icon is not reachable.

AFTERAccessible show/hide + non-spammy feedback

Improvements: real button toggle (aria-pressed), caps-lock warning, and requirements are shown visually but only announced at sensible times.

Use 12+ characters. Include at least one number and one symbol. (Password managers work best when requirements are simple.)

  • 12+ characters
  • Includes a number
  • Includes a symbol

Try: toggle Show/Hide while typing — focus stays stable.

Why this matters

Practical checklist: Password fields note.