如果aria标签更改，则使屏幕阅读器重新读取

Question

如果aria标签的内容发生更改，是否可以使屏幕阅读器重新读取select元素？

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

如果打开屏幕阅读器并单击div，它将读取标签“ unchecked”（如果未按下），标签将更新，但屏幕阅读器将保持沉默。尽管单击并再次打开它会读取新标签。

这是使屏幕阅读器读取更新的正确方法，还是我不知道的另一种方法？

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>

谢谢你的帮助。

Answer 1

我目前从事网络辅助功能。您的元素不需要即时读取更新即可与WCAG2.0（AA）兼容，只要在用户导航回该元素时可以向用户读取正确的状态就可以了！

但是，如果您确实希望它在用户用空格激活或输入后读出div的状态，则我建议aria-live="polite"您仅创建一个屏幕阅读器div和include ，然后将更改后的状态注入该状态。

通常，您将创建一个仅屏幕阅读器的类，其内容与此类似：

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

Aria-live会提醒用户该“实时”区域中发生的任何文本更新，因此，当用户激活div时，请以您的新状态更新仅sr（我将继续更新您的aria-label同样，如果用户离开该元素并稍后返回，则可以正确读取。

注意：这不适用于您的标签，通常仅在用户导航到元素时才读取标签，因此即使您将aria-live粘贴到现有div上，也不会在以下情况下向用户重新读取标签更新 ：）

编辑：有关工作示例，请参见下面的小提琴。我在这台机器上只有画外音，但是它非常简单，我可以肯定它也可以与JAWS和NVDA一起使用。

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

更多信息

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