NVDA阅读器下点击按钮朗读动态文本的ARIA配置咨询

要让NVDA在点击按钮后自动朗读#text里的新内容，核心是利用ARIA实时区域（ARIA Live Regions）——普通静态元素的内容变化不会被屏幕阅读器自动检测到，而实时区域专门用来通知阅读器动态内容的更新。下面是具体的实现方案：

关键ARIA属性说明 #

• aria-live="polite"：告诉屏幕阅读器，等用户当前操作（比如点击按钮）完成后，再朗读这个区域的更新内容，这是最常用的选项，不会打断用户当前的操作流程。
• aria-atomic="true"：确保屏幕阅读器朗读整个区域的完整内容，而不是只朗读变化的片段（比如避免只读新增的单词却丢失上下文）。

修改后的代码示例 #

HTML部分（给#text添加ARIA属性） #

<div id="text" aria-live="polite" aria-atomic="true"></div>
<button id="btn">Read out text</button>
<button id="btn2">Read out text two</button>

jQuery部分（无需大幅修改，保持原逻辑即可） #

$('#btn').click(function(){ 
  $('#text').text('This is message one'); 
}); 
$('#btn2').click(function(){ 
  $('#text').text('This is message two'); 
});

额外注意事项 #

• 如果是紧急通知（比如错误提示），可以把aria-live的值改成assertive，它会立即打断屏幕阅读器当前的朗读内容，优先播报更新信息，但不要滥用，避免过度打扰用户。
• 实时区域不能设置display: none或者aria-hidden="true"，否则屏幕阅读器会忽略它的更新。

这样设置后，点击按钮1或按钮2时，NVDA就会自动朗读#text里的新内容啦！

内容的提问来源于stack exchange，提问作者Newcoma