aria-atomic="true"在实时区域整体替换内容且需完整播报时必须添加，否则屏幕阅读器可能静音或仅读碎片文本；它须与aria-live共用才生效，单独设置无效。
aria-atomic="true" 什么时候必须加
当实时区域内容被整体替换（比如用 textContent 覆盖、或用 innerHTML 重写整个子树），且你希望屏幕阅读器播报完整新内容而非只读变化部分时，aria-atomic="true" 就不是可选，而是必要。
默认 aria-atomic="false"，屏幕阅读器会尝试“差分播报”——只读新增/修改的节点。但实际中，尤其在 NVDA 或旧版 VoiceOver 下，差分逻辑常失效，导致静音或只读碎片文本。
- 聊天消息列表用
innerHTML = newHTMLString替换全部？必须设aria-atomic="true"，否则可能完全不读 - 表单校验提示每次更新都清空再写入？加
aria-atomic="true"能确保“密码长度不足”这类关键信息被完整播报 - 设了
aria-atomic="true"后仍不播报？先排查是否区域初始不可见、或父级有aria-hidden="true"
aria-relevant 哪些值真有用
aria-relevant 不是“开了就灵”，它只在配合 aria-live 且 DOM 变更符合其语义时才触发。现实中，additions 和 text 是唯二靠谱选项，removals 基本无效。
-
aria-relevant="text"：只要子节点的textContent改了（哪怕只是数字加1），99% 场景下都能稳定触发播报 -
aria-relevant="additions"：仅对appendChild()、insertAdjacentHTML("beforeend", ...)这类追加操作有效；innerHTML +=不算“新增”，不会触发 -
aria-relevant="all"：等于"additions removals text"，但removals几乎无支持，反而增加冗余判断开销 - 别写
aria-relevant="removals"—— NVDA 和 VoiceOver 都忽略它，写了等于白写
为什么 innerHTML 更新后 aria-relevant 没反应
根本原因：屏幕阅读器监听的是 DOM 树结构变化，不是字符串内容变化。innerHTML = "新文本" 实际是销毁旧节点 + 创建新文本节点，若新内容不含新元素（比如纯文本），DOM 树变化太“轻”，很多读屏引擎直接跳过。
立即学习“前端免费学习笔记（深入）”；
- 纯文本更新？优先用
el.textContent = "新内容"，它能稳定触发aria-relevant="text" - 要插入 HTML 片段？用
el.insertAdjacentHTML("beforeend", htmlStr)，比innerHTML更可靠，且天然匹配aria-relevant="additions" - 必须替换整个内容？先设
aria-atomic="true"，再用textContent或replaceChildren()，避免innerHTML导致事件丢失和焦点跳转
aria-atomic 和 aria-relevant 组合怎么选
没有万能组合，得看更新方式和内容类型。多数真实场景只需两组配置：
- 状态提示（如“已保存”“加载中…”）：
aria-live="polite" aria-relevant="text" aria-atomic="true"—— 稳定、兼容、不打断 - 消息流（如聊天、日志）：
aria-live="polite" aria-relevant="additions" aria-atomic="false"—— 追加新<p>或<div>时只读新增条目 - 绝对别混搭：
aria-relevant="additions" + aria-atomic="true"是矛盾组合——前者要求只追加，后者要求全量播报，结果往往两边都不讨好
最易被忽略的一点：这些属性一旦设上，就不能靠 JS 动态改值来切换行为。想换策略？得重新插入元素或用 replaceChildren() 触发重载。
