iOS VoiceOver与Android屏幕阅读器无法播报span标签文本问题排查

问题根因排查 #

• 1. 隐藏属性使用错误导致移动端屏幕阅读器忽略aria-live区域
     代码中的$message.setAttribute('display', 'none')属于无效写法：display是CSS属性，不能直接通过setAttribute给DOM节点添加自定义属性生效。即使正确设置了style.display = 'none'，所有设置了display:none的元素都会被移动端屏幕阅读器（iOS VoiceOver、Android TalkBack）直接忽略，不会监听其内容变更，仅桌面端NVDA对隐藏的aria-live区域做了特殊兼容，这是不同端表现不一致的核心原因。
• 2. 动态创建aria-live区域的时机不符合移动端适配要求
     移动端屏幕阅读器需要先识别到DOM中存在aria-live区域，才会监听其后续的内容变更。现有逻辑是先创建aria-live节点、紧接着修改内容并插入DOM，部分移动端阅读器还没完成对该live区域的注册，自然不会触发播报。
• 3. 缺少aria-atomic属性导致播报逻辑不稳定
     aria-live区域默认仅播报变更的内容片段，加上aria-atomic="true"属性才能保证每次内容变更时，阅读器会完整播报整个区域的全部内容，避免部分场景下漏读。

修复方案 #

第一步：页面全局提前预置aria-live区域（禁止动态创建） #

页面DOM加载完成后就插入全局的屏读播报区域，使用视觉隐藏但屏读可见的样式，不要使用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;
}

在body中提前插入live区域：

<div id="live-region" class="sr-only" aria-live="assertive" aria-atomic="true"></div>

第二步：修改TS逻辑，直接更新预置区域的内容 #

不需要每次动态创建节点，直接给预置的live区域赋值即可：

@HostListener('keydown.tab', ['$event'])
removeFilterMsg() {
  const liveRegion = document.getElementById('live-region');
  // 先清空再赋值，确保触发内容变更检测
  liveRegion.innerText = '';
  liveRegion.innerText = 'Filter item is removed';
  // 播报完成后清空，避免下次重复播报
  setTimeout(() => liveRegion.innerText = '', 1000);
}

额外优化点 #

当前删除按钮逻辑存在键盘无障碍问题：点击事件绑定在设置了aria-hidden="true"的span上，键盘用户无法通过tab聚焦到这个删除操作节点，建议把删除功能单独做成一个button，设置对应的aria-label，避免键盘用户无法操作。

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