屏幕阅读器必须阅读动态文本答案

【问题标题】：Screen reader must read dynamic text屏幕阅读器必须阅读动态文本
【发布时间】：2018-03-17 10:30:11
【问题描述】：

您好，我有以下 html 和 jquery 替换文本段落中的文本。我正在使用 nvda 屏幕阅读器进行测试，并且我希望在我按下一两个按钮时能够大声朗读 #text 中的文本。我需要在元素上添加什么样的 aria 角色/标签才能实现这一点？

$('#btn').click(function(){
 $('#text').text('This is message one');
});
$('#btn2').click(function(){
 $('#text').text('This is message two');
});
<button id="btn">Read out text</button>
<button id="btn2">Read out text 2</button>
<p id="text"></p>

【问题讨论】：

I want the text to be read aloud when ever I push button one or two.=>请解释一下。
nvda 屏幕阅读器必须在每次按下 #btn 或 #btn2 时读取动态插入到 #text 中的文本。

标签： jquery accessibility wai-aria screen-readers nvda

【解决方案1】：

在不了解更多细节的情况下，您只需 aria-live="polite" 即可保持简单。

<button id="btn" aria-live="polite">Read out text</button>

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

如果消息很重要，可以使用aria-live="assertive"。您还可以指定要读取的更改类型 (aria-relevant) 以及要读取对象的哪些部分 (aria-atomic)。但是现在，您只需要aria-live="polite"。

【讨论】：