动态内容更新必须在页面首次加载时声明 aria-live 容器，写死在初始 html 中；仅用 textcontent 更新，避免高频或含 html 内容；polite 用于常规状态，assertive 仅限紧急中断类提示。
动态内容更新必须在页面首次加载时就声明 aria-live 容器，否则屏幕阅读器（NVDA、JAWS、VoiceOver）根本不会监听它——JS 后期添加属性或插入元素一律无效。
aria-live 元素必须写死在初始 HTML 里
绝大多数屏幕阅读器只在元素挂载进 DOM 的瞬间解析 aria-live 属性。动态创建再设置属性，等于对空气喊话。
- ✅ 正确：服务端模板或前端静态 HTML 中直接写出容器，例如：
<div id="live-region" aria-live="polite" aria-atomic="true" class="sr-only"></div>
- ❌ 错误：
document.createElement('div')+el.setAttribute('aria-live', 'polite')+document.body.appendChild(el) - ⚠️ 注意：
class="sr-only"必须用 clip + absolute 隐藏，不能是display: none或visibility: hidden，否则可访问性树中直接剔除 - 父级若带
aria-hidden="true"，整个子树的aria-live区域静音，连带aria-atomic失效
textContent 是唯一安全的更新方式
往 aria-live 区域写入含 HTML 标签的内容，会导致 NVDA 跳读、VoiceOver 朗读断裂，甚至整条消息被跳过。
- ✅ 推荐：
document.getElementById('live-region').textContent = '密码已重置成功' - ❌ 危险：
el.innerHTML = '<strong>失败</strong>'—— 强调语义应由 CSS 视觉实现，而非结构嵌套 - ⚠️ 避免高频赋值：
textContent每秒改多次，ChromeVox 可能逐条播报，VoiceOver 则合并为最后一次；需按语义节奏控制更新频次 - 若需换行，可用
\n+white-space: pre-line，但必须实测 NVDA/JAWS 是否正确朗读
polite 和 assertive 不是语气强弱，而是播报时机逻辑
aria-live="assertive" 会强行中断当前朗读，不是“更强调”，而是“必须立刻听”。滥用会导致用户关闭语音反馈。
- ✅
aria-live="polite"：适合“已保存”“搜索完成（共12条）”“上传中 65%”，等用户自然停顿后播报 - ✅
aria-live="assertive"：仅用于“验证码错误”“网络断开”“账号已被锁定”，且一次只触发一条完整语义 - ⚠️ 连续两次
assertive更新，NVDA 可能卡住、跳过第二条；不要用它做倒计时或输入校验提示 -
role="status"应与aria-live="polite"配合；role="alert"是assertive的语义等价写法，非替代
aria-atomic 和 aria-relevant 决定读什么、怎么读
不设 aria-atomic="true"，屏幕阅读器可能只读出“72%”，而漏掉前面的“上传中”——这不是 bug，是默认行为。
- ✅ 状态类文案（如“处理失败”“正在生成…”）：必须加
aria-atomic="true"，确保整块文本作为单一语义单元播报 - ✅ 日志流/聊天记录：用
aria-live="polite" aria-atomic="false" aria-relevant="additions"，配合appendChild()追加新项，只读新增 - ❌ 避免
aria-relevant="all"或removals：删除操作触发“某某已移除”，对用户无意义，还刷屏 - ⚠️
aria-atomic="true"对含按钮/链接的区域风险高，易引发聚焦混乱；复杂 UI 应拆分为多个专用 live 区域
最常被忽略的不是属性写错，而是容器没进可访问性树——它得在 HTML 字符串里、得可见、得没被 aria-hidden 隔离、得没被框架条件渲染干掉。一旦漏掉其中一环，所有后续 JS 操作都是徒劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
