aria-relevant="additions"仅对appendChild()等真正新增节点的操作生效，不响应innerHTML+=或textContent覆盖；需确保DOM干净插入、live区域独立且aria-live已正确启用。
aria-relevant="additions" 为什么有时不播报新增内容
设了 aria-relevant="additions" 却没听到屏幕阅读器读新内容，大概率不是属性写错了，而是 DOM 操作方式不匹配。这个值只对「真正新增节点」有效 —— 比如 appendChild()、insertAdjacentHTML("beforeend", ...)、append() 这类操作；它**不响应** innerHTML +=、textContent = 覆盖、或先 innerHTML = "" 再重写整段 HTML。
-
innerHTML += "新消息"：浏览器内部可能解析为“替换整个子树”，不被识别为 additions -
ul.innerHTML = oldHTML + newHTML：旧节点被销毁再重建，触发 removals + additions，但 removals 基本不播报，additions 又因结构重绘而失效 - 用
textContent更新文本：属于 text 变更，跟additions无关，必须显式加aria-relevant="additions text"
怎么确保 additions 真正触发播报
核心是让新增节点“干净地插入”，不扰动已有 DOM 结构。适用于聊天列表、日志流、通知堆叠等场景。
- 目标容器必须是独立的
aria-live区域，且不要嵌套在会被清空的父级里（比如别把role="log"的 div 放在每次重刷的canvas里） - 新增内容用
appendChild()或insertAdjacentElement("beforeend", el)，避免任何中间清空步骤 - 如果用字符串拼接，必须走
insertAdjacentHTML("beforeend", htmlString)，而不是innerHTML += - 确保新增节点有语义化文本（比如带完整句子的
<div>用户A发来新消息</div>），纯空标签或仅图标不会被读
additions 和 text 混用时要注意什么
很多场景其实需要两者共存：既追加消息，又更新状态文案（比如“共12条未读”）。这时写 aria-relevant="additions text" 是合理选择，但得清楚它们互不干扰：
-
additions只管新节点插入，不管里面文本变没变 -
text只管已有节点的textContent或innerText变化，不管节点是否新增 - 如果往一个已存在的
<span id="counter"></span>里写counter.textContent = "13"，只有text生效；additions完全不参与 - 别指望
aria-relevant="additions"能捕获innerHTML = newHTML后的“差异部分”——它根本不做 diff，只认 DOM 插入动作
removals 基本不能用，别白费力气
文档里写着支持 removals，但现实是 NVDA、VoiceOver、JAWS 都几乎不处理它。用户删了一条记录，你设了 aria-relevant="removals"，结果什么都没读出来 —— 这不是配置错，是当前无障碍生态的事实。
立即学习“前端免费学习笔记（深入）”；
- 想传达删除结果？别删 DOM 后等 removals，而是向 live 区域
appendChild()一条新提示：<div>订单 #456 已删除</div> - live 区域和业务 DOM 必须分离：删除操作发生在列表里，播报逻辑走独立的
aria-live容器，二者不要混在同一个元素上 - 如果非要用 removals 做调试验证，得用最新版 NVDA + Firefox + Windows，其他组合大概率静音
最易被忽略的一点：aria-relevant 的效果完全依赖于 aria-live 是否生效。没写 aria-live="polite"，或者写了但容器初始不可见（display: none 或 aria-hidden="true" 父级），那无论你怎么调 aria-relevant，都不会有任何播报。
