屏幕阅读器必须读取动态文本

Question

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

$('#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>

Answer 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"。