aria-live="assertive" 并非写入即打断，需同时满足区域可见、内容整体替换、更新间隔≥100ms三条件；父级aria-hidden、初始不可见、innerHTML+=追加、连续快速更新均导致失效；role="alert"已隐含assertive，勿重复声明。
aria-live="assertive" 为什么真会打断当前播报
它不是写了就打断——屏幕阅读器对 aria-live="assertive" 有内置防抖和中断判定逻辑。只有同时满足三个条件时，才会真正抢话：
• 区域已挂载到 DOM 且初始可见（不能是 display: none、visibility: hidden 或 aria-hidden="true" 的父容器里）
• 每次更新前清空内容（el.textContent = "" 或 el.innerHTML = ""）
• 新内容写入后，至少间隔 100ms 才触发下一次更新（否则 NVDA/JAWS 很可能丢弃第二次）
打断失败的常见原因
多数“写了 assertive 却没读出来”的情况，根本不是属性没生效，而是 DOM 状态或更新方式不满足中断前提：
• 父级元素设了 aria-hidden="true"（比如整个弹窗壳、表单容器），子级 aria-live 直接失效
• 区域初始不可见：用 JS 动态创建后才加 aria-live，或一开始 display: none，屏幕阅读器压根没监听它
• 更新时用 innerHTML += 追加内容，而非整体替换——assertive 只响应“内容整体变更”，不认增量追加
• 连续快速写入两次（如校验多个字段立刻塞错提示），第二次大概率被防抖机制丢弃
assertive 和 role="alert" 别混用
role="alert" 已隐含 aria-live="assertive" 行为，再显式加 aria-live="assertive" 不但冗余，还可能干扰部分旧版 NVDA 的解析逻辑：
• ✅ 正确：<div role="alert">密码错误</div>
• ❌ 错误：<div role="alert" aria-live="assertive">密码错误</div>
• ⚠️ 注意：role="status" 默认是 aria-live="polite"，不能靠它实现打断
真正需要 assertive 的场景极少
绝大多数动态提示（“已保存”“加载中”“搜索结果共 12 条”）用 aria-live="polite" 更合理。只有当用户不立刻获知就会继续错操作时，才值得打断：
• 登录失败，用户可能反复提交
• 必填字段为空且已点击提交
• 权限拒绝导致关键按钮禁用
• 支付失败且页面未跳转
滥用 assertive 不仅干扰体验，还会在低端设备上拖慢屏幕阅读器响应——它要强制中断、重排语音队列、重新聚焦上下文，成本远高于 polite
立即学习“前端免费学习笔记（深入）”；
