密码输入具有显示/隐藏按钮是很常见的,但我在网上发现很少有关于与其相关的可访问性问题的内容 - 我是否应该将任何类型的 ARIA 属性附加到按钮或密码输入?是一个复选框还是一个触发JS的按钮也能达到很好的效果?
不知道我应该注意什么,作为一个不太熟悉但想要了解可访问性最佳实践的人。
有趣的问题。
这可能是我能找到的关于这个主题的最相关的文献:
披露是一个控制内容部分可见性的按钮。当受控内容被隐藏时,它通常被设计为带有向右箭头或三角形的典型按钮,以暗示激活该按钮将显示其他内容。当内容可见时,箭头或三角形通常指向下方。
(and)
- 显示和隐藏内容的元素具有作用
button
.
- 当内容可见时,具有角色按钮的元素具有
aria-expanded
设置为 true。当内容区域隐藏时,设置为 false。
- (可选)具有角色按钮的元素具有指定的值
aria-controls
指的是包含所有显示或隐藏内容的元素。
See https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure 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 开发工具的截屏视频。请注意我们如何在“辅助功能”面板中引用密码控件。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)