如果 aria-label 更改,则重新读取屏幕 reader

Making a screen reader reread if the aria-label changes

如果 aria-label 的内容发生变化,是否可以制作一个屏幕 reader 重新读取 select 元素?

我做了一个简单的片段,我知道我没有遵循大多数咏叹调惯例,以表明我的意思。

如果您打开屏幕 reader 并单击 div 它将读取标签 "unchecked" 如果您随后按 space 标签将更新但是screen reader 将保持沉默。如果您点击关闭并再次打开,它会读取新标签。

这是让屏幕 reader 读取更新的正确方法吗?还是有其他我不知道的方法?

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),只要在用户导航回元素时向用户读取正确的状态就可以了!

但是,如果您确实希望它在用户使用 space 激活它或输入后读出 div 的状态,我可能建议创建一个屏幕 reader 仅 div 并包含 aria-live="polite",然后将更改后的状态注入其中。

通常你会创建一个屏幕 reader 只有 class 与以下内容类似:

.sr-only {
  position: absolute;
  left:-99999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

Aria-live 会提醒用户注意此 "live" 区域中发生的任何文本更新,因此当用户激活您的 div 时,仅使用您的新状态更新 sr-only (我也会继续更新您的 aria-label,因此如果用户导航离开该元素并且 returns 之后它会被正确读出)。

注意:这不适用于您的标签,通常只有当用户导航到某个元素时才会读取标签,因此即使您只是将 aria-live 添加到现有的 div 它也不会更新后向用户重新阅读标签:)

编辑: 请参阅下面的 fiddle 以获取工作示例。我在这台机器上只有画外音,但它非常简单,我很确定它也适用于 JAWS 和 NVDA。

https://jsfiddle.net/jafarian/8hck0o3m/

更多信息

https://www.w3.org/TR/wai-aria-1.1/#aria-live