辅助功能：在密码输入中显示/隐藏密码按钮

Question

密码输入通常带有显示/隐藏按钮，但是我在网络上发现很少有关其可访问性的内容。我应该在按钮或密码输入上附加任何ARIA属性吗？将其用作复选框是否有意义，还是触发JS达到效果的按钮？

不知道我是不是不是一个非常热衷但想了解可访问性最佳实践的人应该寻找的东西。

Answer 1

有趣的问题。

也许这是我可以在这个主题上找到的最相关的文学作品：

公开是一种控制内容的一部分的可见性的按钮。隐藏受控内容时，通常将其样式设置为带有向右箭头或三角形的典型按钮，以提示激活该按钮将显示其他内容。当内容可见时，箭头或三角形通常指向下方。

（和）

• 显示和隐藏内容的元素具有角色button。
• 当内容可见时，带有角色按钮的元素的aria-expanded设置为true。隐藏内容区域时，将其设置为false。
• 可选，具有角色按钮的元素具有为aria-controls指定的值，该值引用包含所有显示或隐藏的内容的元素。

请参见https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure

我根本不是可用性专家，但是看到与您的用例之间的联系似乎并不疯狂。因此，在这里回答您的问题是我将应用的ARIA属性以及一些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>

这是Chrome开发工具的截屏视频。请注意，在“辅助功能”面板中我们如何能够引用密码控件。

Answer 2

由于到目前为止给出的答案都没有完全涵盖该主题，因此我将在这里尝试进行。您至少有三种可能性：

1. 一个复选框；
2. 一个切换按钮；
3. 带有更改文本的按钮。

复选框

这是最简单的解决方案。

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

然后，您添加了一些JavaScript以在将复选框清除为password时将密码输入类型从text更改。

切换按钮

不过，这涉及一些ARIA，但是不多。

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

这样，您将需要同时更改按钮CSS样式和JavaScript中aria-pressed属性的值（当然，还要相应地更改密码输入的类型。）>

带有更改文本的按钮

很简单，但是有点古老的解决方案。您基本上有一个<button>，显示“显示密码”，显示密码后，该按钮将显示“隐藏密码”。

Answer 3

usability expert Jacob Nielsen said:

Answer 4

因为我不确定您是否希望看到像Fareed给您的答案，或者您是否想看到这种实现背后的代码，所以我还是回答了。该实现相当容易，请看以下内容：