如果 aria-label 更改，则重新阅读屏幕阅读器答案

【问题标题】：Making a screen reader reread if the aria-label changes如果 aria-label 更改，则重新阅读屏幕阅读器
【发布时间】：2018-07-13 04:58:29
【问题描述】：

如果 aria-label 的内容发生变化，是否可以让屏幕阅读器重新读取 select 元素？

我做了一个简单的 sn-p，我知道我没有遵循大多数 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>

感谢您的帮助。

【问题讨论】：

标签： javascript html wai-aria screen-readers

【解决方案1】：

我目前从事网络无障碍工作。您的元素不需要动态读取更新以符合 WCAG2.0 (AA)，只要在用户导航回元素时向用户读取正确的状态，就可以了！

但是，如果您确实希望它在用户使用空格激活它或输入后读出 div 的状态，我可能会建议创建一个仅屏幕阅读器的 div 并包含aria-live="polite"，然后注入您更改的状态进入那个。

通常，您会创建一个仅限屏幕阅读器的类，其中包含以下内容：

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

Aria-live 会在此“实时”区域中发生任何文本更新时提醒用户，因此当用户激活您的 div 时，请使用您的新状态更新 sr-only（我会继续更新您的aria-label 也是如此，因此如果用户离开元素并稍后返回，它会被正确读出）。

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

编辑：请参阅下面的小提琴以获取工作示例。我在这台机器上只有画外音，但它非常简单，而且我相当肯定它也适用于 JAWS 和 NVDA。

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

更多信息