aria-relevant="additions"仅监听子节点插入操作（如appendchild），不响应textcontent修改或innerhtml替换；需配合动态添加节点而非文本赋值，否则无法触发播报。
aria-relevant="additions" 本身不会让屏幕阅读器“只播新增”，它只是告诉读屏软件：**只监听子节点插入类操作（如 appendChild、insertBefore），其他变更（如文本改、元素删）默认不触发播报**。但实际能否播出来，取决于你如何更新 DOM —— 很多人设了却没反应，问题不在属性本身，而在更新方式。
为什么设了 additions 却没播报？
常见错误是用 innerHTML 或直接赋值 textContent 更新内容：innerHTML 替换整个结构会被识别为“删除旧节点 + 插入新节点”，可能触发两次播报或被忽略；textContent = 'xxx' 属于文本变更，不属于 additions 范畴，根本不会触发。
- ✅ 正确做法：用
appendChild()、insertAdjacentElement()或append()动态添加新节点 - ❌ 错误做法：
element.innerHTML = newHTML、element.textContent = 'msg'、element.replaceChild() - ⚠️ 注意：
aria-live容器必须在页面初始 HTML 中存在，JS 后期添加该属性无效
additions 配合什么 DOM 操作才真正生效？
aria-relevant="additions" 只响应“节点级追加”，不是“内容级更新”。它对聊天消息流、通知列表这类场景最自然，但要求你严格按节点增删逻辑操作。
- 新增一条消息：创建
li元素，再messagesList.appendChild(newLi) - 避免清空重写：
messagesList.innerHTML = ''再重填 → 这会触发 removals + additions，且多数读屏不识别 removals，导致静默或重复播报 - 如果必须批量更新，先缓存旧节点，用
documentFragment批量插入，再一次性append()，比逐个appendChild更高效也更稳定
为什么不能依赖 removals 实现“已删除”播报？
几乎所有主流读屏（NVDA、VoiceOver、JAWS）对 aria-relevant="removals" 支持极弱——它们可能只在元素从 DOM 移除瞬间提示“已删除”，但**不读具体内容**，用户根本不知道删的是什么。
- 可靠替代方案：把“删除结果”转成一次
additions操作，例如向独立的 live 区域插入一句document.getElementById('live-region').appendChild(infoEl) - 关键点：这个 live 区域不能嵌套在被删/增的列表内部，否则变更可能被过滤或忽略
- 别在 live 区域里放按钮或链接，部分读屏会跳过或错误聚焦，干扰播报
真正决定是否播报的，从来不是 aria-relevant 的取值本身，而是你更新 DOM 的方式是否匹配它的语义边界。设 additions 后还静音，大概率是用了 innerHTML 或漏掉了 aria-live 声明 —— 这两个坑比参数选错更常发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
