aria-live必须在初始HTML中声明，不能JS动态添加；需预置容器并用textContent更新纯文本，搭配aria-atomic="true"和aria-relevant="text"确保完整播报。
aria-live 必须写死在初始 HTML 里，不能 JS 动态加
屏幕阅读器（NVDA、JAWS、VoiceOver）只在页面加载时扫描已存在的 DOM 节点并解析 aria-live 属性。用 document.createElement 创建带 aria-live 的元素，或后期调用 el.setAttribute('aria-live', 'polite')，基本无效——读屏器根本不会监听它。
正确做法是把空容器直接写进服务端 HTML 或前端模板顶部：
<div id="live-region" aria-live="polite" aria-atomic="true" class="sr-only"></div>
-
.sr-only类必须用position: absolute; clip: rect(0 0 0 0);这类视觉隐藏方式，不能用display: none或visibility: hidden - 父级不能有
aria-hidden="true"，否则整个区域被忽略 - React/Vue 中禁用
v-if、{show && }或靠key控制显隐——首次渲染即销毁重挂，播报逻辑断层
textContent 更新纯文本，别用 innerHTML 替换整个容器
aria-live 监听的是真实 DOM 变更，不是 JS 数据变化。全量替换会触发“删除 + 新增”两次变更，导致重复播报或静音。
错误示例：el.innerHTML = '<div>已提交成功</div>' —— 容器被清空重建，监听状态重置
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 用
el.textContent = '已提交成功'更新纯文本 - 追加新消息时用
el.appendChild(newMsgEl)或el.insertAdjacentElement('beforeend', newMsgEl) - 避免往
aria-live区域里塞 HTML 标签（如<strong>），部分读屏器会跳过或朗读混乱
polite 和 assertive 怎么选？关键看是否需要打断用户
aria-live="polite" 等当前语音自然结束再播，适合“已保存”“搜索结果共 12 条”“上传中 72%”；aria-live="assertive" 强制打断，仅用于“验证码错误”“余额不足”这类必须抢话的紧急提示。
滥用 assertive 会导致语音轰炸，尤其在 NVDA + Firefox 下可能被跳过或重复播报；而所有提示都设成 polite，又可能让关键错误被延迟甚至忽略。
- 表单校验、状态提示、加载进度 →
polite - 弹窗级错误、账户锁定、支付失败 →
assertive，且必须配aria-atomic="true" - 别写
aria-live="off"——删掉属性更干净，反复切换值行为不可预测
为什么加了 aria-live 还是没读出来？检查这三件事
最常被忽略的三个硬性条件：容器是否持续存在、是否更新了文本节点、是否配了 aria-atomic="true"。
- 容器被 JS 删除再重建（包括 React key 变更）、或用
innerHTML = ''清空 → 监听中断 - 只改 JS 变量或框架响应式数据，没触发真实 DOM 文本变更 → 读屏器完全无感
- 没设
aria-atomic="true"→ 默认只读最小变化节点，比如“上传中 72%”变成“上传中 73%”，可能只报出“73%”，上下文全丢
真正难的不是加属性，而是判断哪些变化值得播报、何时播报、读多长——这得结合用户当前任务流来设计，而不是堆砌 ARIA 属性。
