屏幕 reader 必须读取动态文本

Question

您好，我有以下 html 和 jquery 替换文本段落中的文本。我正在使用 nvda 屏幕 reader 进行测试，我希望在我按下一个或两个按钮时大声朗读#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".