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

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 开发工具的截屏视频。请注意我们如何在“辅助功能”面板中引用密码控件。