Accessibility: show/hide password button in a password input

Question

It's common for password inputs to have a show/hide button but I'm finding little content on the web about any accessibility concerns relevant to them - should I be attaching any kinds of ARIA attributes to the button or password input? Does it make sense for that to be a checkbox or is a button that triggers JS to achieve the effect fine too?

Not sure what I should be looking out for as someone not very steeped in, but wanting to understand accessibility best practices.

Answer 1

As none of the so-far given answers cover the topic completely, I'll try to do it here.
You have at least three possibilities:

1. A checkbox;
2. A toggle button;
3. A button with changing text.

Checkbox

This is the easiest solution.

<label><input id="showPwd" type="checkbox"> Show Password</label>

And then you add some JavaScript to change your password input type from password when the check box is cleared to text when it is checked.
From the user perspective this solution is also the most obvious: both screen reader users and users of other assistive technologies usually easily perceive the state of the check box. Another benefit of this approach is that the status is seen immediately with no need to re-check it with additional commands.

Toggle Button

This involves some ARIA, not much, though.

<button id="showPwd" aria-pressed="false">Show password</button>

This way you will need to change both the button CSS styling and the value of the aria-pressed attribute in your JavaScript (and, of course, change the type of your password input accordingly).
From the user perspective, this approach has both advantages and drawbacks. the main advantage for screen reader users is that when the button is pressed, the user will hear "Show Password button pressed" vs. "Show password button" which would help to spot the status of the button for users with hearing and/or cognitive issues better and faster.

Button with Changing Text

An easy, but kind of oldish solution. You basically have a <button> that says "Show Password", and when the password is revealed, the button would say "Hide Password".
This is the worst solution from the assistive technology user perspective, since a screen reader would not notify its user automagically when the text on the button changes (unless you add some additional black magic like ARIA alerts, but it's not worth it, I'm sure). Typically when the text changes, the user should re-check the status with a command that announces the current line or object.
There is another drawback that spans both button solutions: screen readers usually have a possibility to navigate by element and to spawn lists of elements of the same type. In this case a confusion may occur as the form contains more buttons (at least the submit one). With check boxes the chance of such confusion is much lower, if the form is not crowded with many check boxes.

Answer 2

Interesting question.

This is perhaps the most relevant bits of litterature I could find on the subject:

A disclosure is a button that controls visibility of a section of content. When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.

(and)

• The element that shows and hides the content has role button.
• When the content is visible, the element with role button has aria-expanded set to true. When the content area is hidden, it is set to false.
• Optionally, the element with role button has a value specified for aria-controls that refers to the element that contains all the content that is shown or hidden.

See https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure

I'm no usability expert at all but it doesn't seem crazy to see a connection with your use case. So to answer your question here are the ARIA attributes I'd apply, along with some JavaScript.

function toggle_visibility(el) {
  const control = el.getAttribute('aria-controls');
  const expanded = el.getAttribute('aria-expanded') === 'false';
  document.querySelector(`#${control}`).type = expanded ? 'text' : 'password';
  el.setAttribute('aria-expanded', String(expanded));
  el.textContent = expanded ? 'hide' : 'show';
}

document.querySelector('button').addEventListener('click', ({
  target
}) => toggle_visibility(target));

<div>
  <label for="password">password</label>
  <input type="password" id="password">
  <button aria-controls="password" aria-expanded="false">show</button>
</div>

And here's a screencast of the Chrome Dev Tools. Note how in the Accessibility panel we're able to refer to the password control.