Question

我的 HTML 中有一个表格，它的内容会动态变化。

我想让屏幕阅读器在每次表格内容更改时阅读通知，谁能告诉我该怎么做？

我尝试了 3 种方法，但没有一种是理想的：

将 aria-live="polite" 添加到整个表格中。然后会读取WHOLE表的内容，太多了。我只想发布一个简短的通知，比如一句话。
创建一个不可见的div，将其放置在left = -1000px左右的位置，添加aria-live="polite"，在JS中，我更改了它的文本，即要阅读的通知，每次表格内容发生变化时，例如 d3.select('#report-table-updated-aria-notification').text("Report table updated");。但是这样通知只会被读取一次，因为JS使用相同的字符串来替换前一个，意思是文本没有改变，所以aria-live="polite"不会被触发。
将 role="alert" 添加到上面提到的不可见的 div。这次每次表格内容改变时都会读取通知，但是句子以“Alert”为前缀，例如“Alert: this is a notification”。但我不想看到“警报”这个词，因为这不是警报。

提前致谢！

Answer 1

刚刚有了一个想法。你提到你做了一个隐藏的 div，但它只读取一次。如果在读取 JS .remove() 函数后使用它，然后在需要时重新添加它会发生什么。例如：

<div id="test" aria-live="polite" style="display:none;">Some Important Text</div>

function someFunction(text){
     //remove the element
     document.getElementById('test').remove();

     //re-add the element to the DOM
     document.body.innerHTML += `<div id="test" aria-live="polite" 
     style="display:none;">`+text+`</div>`;
}
//you can call someFunction(New Text) to change the content

如何在表格内容更改时让屏幕阅读器阅读通知？

1 个答案: