HTML表格内容动态变更时如何让屏幕阅读器播报指定通知

步骤1：创建标准屏幕阅读器专属的aria-live容器 #

首先编写通用的屏幕阅读器仅可见样式，不要使用负left定位，避免部分阅读器忽略视窗外元素：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

在页面中插入播报容器，配置aria-live="polite"和aria-atomic="true"，后者会让阅读器每次播报完整的容器内容，不会仅识别变化片段：

<div id="table-update-notice" class="sr-only" aria-live="polite" aria-atomic="true"></div>

步骤2：编写触发播报的逻辑 #

解决相同文本无法触发更新的问题，每次表格更新时先清空容器内容，再写入目标通知文本，内容从空到有就算文本和上一次完全一致也会触发阅读器识别：

// 原生JS写法
const noticeEl = document.getElementById('table-update-notice')
noticeEl.textContent = ''
noticeEl.textContent = '报表已更新'

// d3写法适配你之前的代码习惯
d3.select('#table-update-notice').text('')
d3.select('#table-update-notice').text('Report table updated')

如果部分特殊阅读器还是无法触发相同文本的播报，可以在文本末尾追加动态的零宽空格后缀，零宽空格不会被朗读出来，又能让内容每次都存在差异：

const notice = '报表已更新' + '\u200B'.repeat(Date.now() % 10)
noticeEl.textContent = ''
noticeEl.textContent = notice

方案说明 #

• 未使用role="alert"，不会额外播报"Alert"前缀
• 不需要播报全表内容，仅朗读自定义的简短通知
• 规避了相同文本无法触发aria-live更新的问题，兼容主流的NVDA、VoiceOver、JAWS等屏幕阅读器

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