如果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的狀態，則我建議您僅創建一個屏幕閱讀器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/

更多信息

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