Angular SPA项目中如何告知JAWS、VoiceOver等辅助技术DOM已变更？

1. 接入ARIA实时区域（ARIA Live Region） #

这是WAI-ARIA标准中专门用于通知辅助技术动态内容变更的原生方案，纯前端即可实现，无后端依赖。

• 首先在组件模板中提前埋入视觉隐藏、仅对辅助技术可见的实时区域节点，aria-live设置为polite即可，不会打断用户当前的朗读流程：

<!-- 放置在组件模板任意固定位置，不要用*ngIf控制显隐，否则可能被辅助技术忽略 -->
<div aria-live="polite" class="sr-only" #liveRegion></div>

配套的视觉隐藏样式如下，不要用display: none，否则辅助技术会直接跳过该节点：

.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;
}

• 数据加载完成后，直接往该实时区域插入通知文本即可，屏幕阅读器会自动捕获内容变更并朗读，示例：

@ViewChild('liveRegion') liveRegion: ElementRef;

// 数据完全加载后执行
onDataLoaded(dataCount: number) {
  this.liveRegion.nativeElement.textContent = `数据加载完成，共${dataCount}条记录`;
}

2. 主动触发内容区域可访问性通知 #

如果是复杂列表、表格等大段DOM更新，除了实时区域通知外，可以针对内容容器主动触发聚焦通知：

• 给数据展示的根容器添加明确的无障碍属性，示例：

<div role="region" aria-label="业务数据列表" #dataContainer></div>

• DOM完全渲染完成后，给容器设置tabindex="-1"后主动触发聚焦，屏幕阅读器会自动朗读区域的标识和内容，Angular示例代码：

@ViewChild('dataContainer') dataContainer: ElementRef;

afterDataRendered() {
  const containerEl = this.dataContainer.nativeElement;
  containerEl.setAttribute('tabindex', '-1');
  containerEl.focus();
}

tabindex="-1"不会影响正常的键盘Tab导航逻辑，仅允许通过JS主动触发聚焦。

3. 匹配Angular生命周期保证通知时机准确 #

要避免DOM还未渲染完成就提前发通知的问题，需匹配Angular的变更检测机制：

• 数据请求返回后不要立刻触发通知，需等待AfterViewChecked生命周期确认视图更新完成，或者用setTimeout包裹通知逻辑（延迟设为0即可，利用事件循环机制确保DOM渲染完成后再执行）
• 如果是用*ngFor渲染列表，可以结合last模板变量，在最后一条列表项渲染完成后再触发全局的加载完成通知。

4. 覆盖全加载流程的状态通知 #

除了加载完成的通知外，需要把加载全流程的状态同步给辅助技术：

• 加载开始时，往实时区域写入「正在加载数据，请稍候」的提示
• 加载时长超过10秒的场景，可以追加进度提示，比如「数据仍在加载中，已完成70%」
• 加载失败时同步提示「数据加载失败，请刷新页面重试」

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