aria-atomic="true" 必须与 aria-live 或隐式启用 live 的 role（如 status、alert）配合使用才生效，单独设置无效；仅当通过 textContent 或 innerHTML 整块替换内容时触发完整播报，追加、局部修改或单节点替换均无法激活 atomic 行为。
aria-atomic="true" 必须和 aria-live 配对才生效
单独写 aria-atomic="true" 没用，屏幕阅读器直接忽略。它只是个“播报粒度开关”，不绑定到 live 区域就等于没装电池。
必须同时存在以下任一组合：
<div aria-live="polite" aria-atomic="true"></div>-
<div role="status" aria-atomic="true"></div>（role="status"隐式启用aria-live="polite"） -
<div role="alert" aria-atomic="true"></div>（role="alert"隐式启用aria-live="assertive"）
漏掉 aria-live 或对应 role，哪怕 DOM 更新了，读屏也一声不吭。
textContent 赋值才能触发整块朗读
aria-atomic="true" 不是监听文字变化，而是响应 DOM 节点内容的**整体替换行为**。只有你用 textContent 覆盖整个区域内容，或用 innerHTML 重写全部子节点时，它才按“整块”播报。
立即学习“前端免费学习笔记（深入）”；
别用这些操作：
-
el.innerHTML += "新消息"—— 追加不是替换，aria-atomic不起作用 -
el.querySelector("span").textContent = "72%"—— 只改子节点，读屏大概率只报“72%”，上下文全丢 -
el.replaceChild(newNode, oldNode)—— 单节点替换，atomic不触发
正确做法：
const liveRegion = document.querySelector('[aria-live="polite"]');
liveRegion.textContent = "上传中 72%"; // ✅ 整块更新，完整播报
为什么 aria-atomic="true" 常被误设为 false
默认就是 aria-atomic="false"，但这个“默认”在多数状态提示场景下反而是错的。
典型失效现象：
- 表单校验提示从“邮箱格式错误”变成“邮箱格式正确”，读屏只报“正确”
- 进度条显示“上传中…” → “上传中 50%” → “上传完成”，用户只听到“50%”“完成”，不知道是谁在上传、进度含义是什么
- NVDA 在某些版本下对
atomic="false"的完全替换甚至不播报
根本原因：atomic="false" 依赖 DOM 节点级差异判断，不是语义比对。它看的是“删了一个 span、加了一个 div”，不是“这句话意思变了”。所以只要结构稍复杂，或浏览器/读屏版本旧一点，就容易静音或碎片化。
隐藏 live 区域但不能用 display: none
想视觉隐藏但让读屏可读，display: none 或 visibility: hidden 会彻底屏蔽该区域——读屏连它存在都不知道。
必须用无障碍安全的隐藏方式，例如：
.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;
}
还要注意：
- 父容器不能有
aria-hidden="true"，否则子级 live 区域失效 - React/Vue 中避免用
v-if或{show && <></>}控制显隐——销毁重建会中断播报队列 - live 区域必须在页面加载时就存在，不能动态插入（首次渲染即挂载）
真正麻烦的不是怎么写属性，而是每次 DOM 更新时你用的是什么 API、改的是哪一层节点、是否清空了旧内容。这些细节决定用户听到的是完整句子，还是几个孤零零的词。
