如果 aria-label 的内容发生变化,是否可以让屏幕阅读器重新读取选择的元素?
我做了一个简单的片段,我知道我没有遵循大多数 aria 惯例,以表明我的意思。
如果您打开屏幕阅读器并单击 div,它将读取标签“未选中”,如果您随后按空格键,标签将更新,但屏幕阅读器将保持静音。如果您点击关闭并再次打开,它会读取新标签。
这是让屏幕阅读器读取更新的正确方法还是有其他我不知道的方法?
let toggleSwitch = document.querySelector('.toggle-switch');
toggleSwitch.addEventListener("keyup", function(e) {
let code = (e.keyCode ? e.keyCode : e.which);
if (code == 32) {
let nextState = toggleSwitch.getAttribute('aria-label') == 'unchecked' ? 'checked' : 'unchecked';
toggleSwitch.setAttribute('aria-label', nextState);
}
})
.toggle-switch {
width: 50px;
height: 50px;
}
.toggle-switch[aria-label="unchecked"] {
background: red;
}
.toggle-switch[aria-label="checked"] {
background: green;
}
Press space to change state
<div class="toggle-switch" tabindex="0" aria-label="unchecked"></div>
感谢您的帮助。
最佳答案
我目前从事网络无障碍方面的工作。您的元素不需要动态读取更新以符合 WCAG2.0 (AA),只要在用户导航回元素时向用户读取正确的状态就可以了!
但是,如果您确实希望它在用户使用空格或输入激活它后读出 div 的状态,我可能建议创建一个仅屏幕阅读器的 div 并包含 aria-live="polite "
,然后将更改后的状态注入(inject)其中。
通常,您会创建一个屏幕阅读器类,其中包含以下内容:
.sr-only {
position: absolute;
left:-99999px;
height: 1px;
width: 1px;
overflow: hidden;
}
Aria-live 会提醒用户注意此“实时”区域中发生的任何文本更新,因此当用户激活您的 div 时,使用您的新状态更新 sr-only(我会继续更新您的aria-label,因此如果用户离开该元素并稍后返回,它会被正确读出。
注意:这不适用于您的标签,标签通常仅在用户导航到某个元素时才会被读取,因此即使您只是将 aria-live 添加到现有的 div 上,它也不会重新读取标签以更新时的用户:)
编辑: 请参阅下面的 fiddle 以获取工作示例。我在这台机器上只有画外音,但它非常简单,我很确定它也适用于 JAWS 和 NVDA。
https://jsfiddle.net/jafarian/8hck0o3m/
更多信息
关于javascript - 如果 aria-label 发生变化,让屏幕阅读器重读,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48586961/