aria-live 必须在初始html中声明，不能js动态添加；需配合aria-atomic="true"确保整句播报，且避免嵌套、全量替换dom或放入交互元素。
aria-live 必须写死在初始 HTML 里，不能 JS 动态插入
屏幕阅读器（NVDA、JAWS、VoiceOver）只监听已挂载、可见、且在页面首次加载时就存在的节点。用 document.createElement 创建带 aria-live 的元素，或后期用 el.setAttribute('aria-live', 'polite') 补上，基本等于没写——所有主流读屏都会静音。
必须确保该容器在 HTML 源码中直接存在，哪怕内容为空：
<div aria-live="polite" aria-atomic="true" aria-relevant="text"></div>
- 不能被
display: none或visibility: hidden隐藏；可用.sr-only类（position: absolute; clip: rect(0 0 0 0);）替代 - 父级不能有
aria-hidden="true"，否则子级整个 live 区域失效 - React/Vue 中禁用
v-if、{show && <...>}</...>或key控制显隐——首次渲染即销毁重挂，播报逻辑断层
aria-live="polite" 和 aria-live="assertive" 怎么选
核心判断标准是：用户是否需要立刻中断当前操作来接收这条信息。
-
aria-live="polite"：等当前朗读自然结束再播，适合“已保存”“搜索结果共 12 条”“上传中 45%” -
aria-live="assertive"：强制打断，仅用于“验证码错误”“账号已被锁定”这类必须抢话的紧急提示 - 滥用
assertive会导致语音轰炸，用户可能直接关闭语音反馈 - 别写
aria-live="off"——删掉属性更干净；反复切换值行为不可预测
为什么只加 aria-live 还不够，必须配 aria-atomic="true"
默认 aria-atomic="false"（即不显式声明时），屏幕阅读器只读变化的最小节点。比如你把 <span>上传中</span> 改成 <span>上传中 72%</span>，它可能只报出“72%”，上下文全丢。
- 状态类文案（如“已提交”“处理失败”“上传中 X%”）必须设
aria-atomic="true"，确保整句语义完整播报 - 聊天消息流等追加场景可设
aria-atomic="false"，配合appendChild()或insertAdjacentHTML("beforeend", ...) - 别在
aria-live容器里再嵌套另一个aria-live区域，原子性会失效，读起来像卡顿录音
DOM 更新方式直接影响播报效果
aria-live 不监听 JS 变量或框架响应式数据，只响应真实 DOM 变更。写法不对，照样静音或重复播报。
- ✅ 推荐：用
textContent更新纯文本；用appendChild()或insertAdjacentHTML("beforeend", ...)追加新节点 - ❌ 避免：
innerHTML = newText全量替换，等于先删后建，触发两次变更（删除 + 新增），易重读或漏播 - ⚠️ 折中方案：必须替换时，加
setTimeout(() => { el.textContent = newText; }, 10)，给读屏留出缓冲 - 别把按钮、链接等交互元素塞进
aria-live区域，焦点行为不可预测
aria-atomic="true"），又要支持消息追加（需 aria-atomic="false"），这时候得拆成两个独立区域，而不是硬凑一个配置打天下。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
