Your daily frequent11y newsletter, brought to you by @ChrisBAshton:
Show/hide password accessibility and password hints tutorial
- Nicolas Steenhout describes how he implemented a standard show/hide feature for password inputs, with accessibility in mind. Show/hide is useful for those with memory issues, or essential tremors, or anybody who wants to double-check what they typed in. Nicolas’ tutorial is for a registration form rather than a sign in form, but much of the advice applies to both.
- Password constraints (e.g. “Minimum 8 characters”) should be visible up front, not only shown after a failed form submission. These constraints should be in a list that is
aria-hidden
, alongside the same information in a paragraph that is visible to screen readers only (class="sr-only"
), as the paragraph is less verbose than the list. - The input should go after the hint, and should have an
aria-describedby
associated with the hint. It should havearia-required="true"
, rather than HTML’s nativerequired
, as the latter announces the input is “invalid” the first time it receives focus (and thus still empty). Finally, it needs anautocomplete
with a value ofnew-password
, in this example, orcurrent-password
for a sign-in form. (This attribute is used by password managers). - Now for the show/hide functionality: this should be a
<button role="switch" aria-pressed="false">
. When it is pressed, you should change the value of the input frompassword
totext
, and update thearia-pressed
value on the button.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.