aria-relevant="text" 仅在live region直接子节点的textcontent或innertext变化时稳定触发，不响应子元素增删、innerhtml重写或嵌套控件内的文本更新。
aria-relevant="text" 什么时候能稳定触发
只要子节点的 textContent 或 innerText 发生变化，aria-relevant="text" 就大概率触发播报——哪怕只是把“加载中”改成“加载中 37%”。它不关心 DOM 结构是否重建，只盯文本内容本身。
但注意：这个值对子元素增删完全无效。比如你往一个 div 里 appendChild() 一个新 span，即使里面写了文字，也不会触发；它只响应直接挂载在 live region 节点上的文本变更。
- ✅ 推荐用于状态栏、计数器、进度文案等纯文本更新场景
- ❌ 别指望它响应
innerHTML = "..."—— 这会销毁旧节点再建新节点，屏幕阅读器常判定为“轻量变更”，直接跳过 - ⚠️ 如果 live region 内嵌了
button或input，textContent更新可能被忽略（部分读屏会优先聚焦控件而非文本）
aria-relevant="additions" 只认“真新增”，不是所有插入都算
aria-relevant="additions" 的触发条件非常具体：必须是通过 appendChild()、insertAdjacentElement() 或 insertAdjacentHTML("beforeend", ...) 这类 DOM 插入操作，且新增的是**独立节点**（比如 div、p），才会被识别为“addition”。
innerHTML +=、insertAdjacentHTML("beforebegin", ...)、甚至 replaceChildren() 都不算——前者是字符串拼接后整段重写，后者是替换全部子节点，都不满足“追加新节点”的语义。
- ✅ 适合聊天消息流、日志列表这类明确“末尾追加”的场景
- ❌
innerHTML = oldHTML + newHTML不会触发，写了等于白写 - ⚠️ 新增节点如果没设
role或可访问性属性（比如aria-label），部分读屏可能只读出空内容或跳过
别写 aria-relevant="removals"，它基本不工作
aria-relevant="removals" 在 NVDA、VoiceOver 和 JAWS 中支持极弱。即便你调用 removeChild() 或 el.remove()，屏幕阅读器最多提示一句“已删除”，不会读出具体内容，也无法控制播报时机和语气。
真实业务中需要传达“删除结果”，正确做法是绕过 removals，改用 additions 主动注入语义化提示：
- ✅ 用户点击删除后，向独立的 live region 插入一句：
liveRegion.textContent = "订单 #123 已删除" - ❌ 不要把 live region 嵌套在被删的列表里——否则 DOM 移动可能让变更失效或引发误播报
- ⚠️ 别在 live region 内放按钮或链接，焦点可能意外跳转，打断阅读流
aria-relevant="all" 是个陷阱，精简才是关键
aria-relevant="all" 等价于 "additions removals text"，但 removals 几乎无效，additions 和 text 又常冲突（比如用 textContent 更新时，既算 text 变更，又可能被误判为节点替换）。结果往往是冗余判断、播报延迟，甚至某些读屏直接静音。
真正影响播报效果的，从来不是“开得多”，而是“开得准”：
- ✅ 大多数场景只需
aria-relevant="text"或aria-relevant="additions"二选一 - ❌
aria-relevant="all"容易掩盖问题，比如 innerHTML 替换后没反应，你会误以为是值不够全，其实根本原因是操作方式错了 - ⚠️ 如果 live region 同时要响应文本更新和节点追加（比如带图标的状态栏），拆成两个独立区域更可靠
最常被忽略的一点：aria-relevant 从不单独生效，它必须和 aria-live 配合使用，且只对 DOM 变更方式敏感——不是你写了什么，而是你用了什么 API 去改内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
