aria-live容器必须在初始html中声明，后期用javascript添加无效；应预置并用textcontent更新纯文本，搭配aria-atomic="true"和aria-relevant="text"确保完整播报。
aria-live容器必须在初始HTML中声明
后期用 JavaScript 创建或添加 aria-live 属性完全无效——NVDA、JAWS、VoiceOver 都只在元素首次挂载 DOM 时解析该属性。如果你在 DOMContentLoaded 里执行 document.createElement('div').setAttribute('aria-live', 'polite')，屏幕阅读器根本不会监听它。
✅ 正确做法：服务端渲染或前端模板中预置，例如：
<div id="live-region" aria-live="polite" aria-atomic="true" class="sr-only"></div>
❌ 常见错误：
- 初始 HTML 中漏掉该元素，等表单提交后再注入
- 把 aria-live 加在父级容器上，实际更新的是子节点（读屏只监听直接子内容变更）
- 使用 display: none 或 visibility: hidden 隐藏容器（通知彻底失效；应改用 clip + absolute 的 .sr-only 类）
textContent 更新比 innerHTML 更可靠
往 aria-live 区域写入含 HTML 标签的字符串（如 el.innerHTML = "<strong>成功</strong>"），会导致 NVDA 跳过标签、VoiceOver 朗读断裂，甚至整条静音。Live region 的设计目标是“文本变更即通知”，不是渲染富文本。
✅ 推荐方式：只用 textContent 更新纯文本
document.getElementById('live-region').textContent = '密码已重置成功';
⚠️ 如果真需强调关键词（比如“失败”标红），用 CSS 控制颜色/背景，不要插入 <strong></strong> 或 <span></span>；若需换行，可用 white-space: pre-line 配合 \n，但要实测 NVDA/JAWS 是否支持。
❌ 避免：
- 在 aria-live 区域内频繁增删子节点
- 用 innerHTML 替换整个内容（可能触发两次播报：清空 + 新增）
- React/Vue 中误用 dangerouslySetInnerHTML 或 v-html，未做纯文本过滤
polite 和 assertive 不是语气强弱，而是播报时机逻辑
aria-live="polite" 等用户当前朗读自然结束后再播报，适合“已保存”“加载完成”；aria-live="assertive" 会立刻中断当前语音，仅用于“网络断开”“验证码错误”这类必须抢话的紧急信息。
✅ 实操建议：
- 表单校验提示、搜索结果数、进度百分比 → aria-live="polite" + role="status"
- 登录失败、权限拒绝、关键操作阻断 → aria-live="assertive" + role="alert"（后者已隐含前者，无需重复设）
- 别连续触发 assertive：两次以上可能让 VoiceOver 卡住或跳过后续播报
⚠️ 注意：iOS VoiceOver 对 assertive 支持不稳定，某些版本直接静音；倒计时类场景即使动态更新，也应优先用 polite，而非每秒 assertive。
aria-atomic 和 aria-relevant 决定“读什么”和“为什么读”
不加 aria-atomic="true"，屏幕阅读器可能只读出变化片段（如“23”），而忽略上下文（“上传进度 23%”）。默认 aria-atomic="false" 只监听变更节点，风险高。
aria-relevant 必须配合 aria-live 才生效，只接受 additions、removals、text、all 四种值：
✅ 最稳妥组合：aria-live="polite" aria-atomic="true" aria-relevant="text"
- text 确保 textContent 变更必触发播报
- additions 只对 appendChild() 或 insertAdjacentHTML("beforeend", ...) 有效，innerHTML += 不算新增节点
- removals 基本不被主流读屏支持，别依赖它播报删除动作
❌ 避免：
- 在 aria-live 容器里嵌套另一个 aria-live 元素（原子性失效，朗读卡顿）
- 给容器设 aria-hidden="true" 或父级有 aria-hidden="true"（直接屏蔽播报）
- 动态切换 aria-live 值（无效；如需临时禁用，移除属性比设为 off 更干净）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
