aria-live="assertive"写了也不打断朗读，因其需同时满足三条件：区域已挂载且初始可见、每次更新前清空内容、新内容写入后间隔≥100ms；父级aria-hidden、未清空或ax tree不可见均导致失效。
aria-live="assertive" 为什么写了也不打断朗读
它不是“设了就抢话”，屏幕阅读器（如 NVDA、JAWS）对 aria-live="assertive" 有内置防抖：连续两次更新，第二次大概率被丢弃；只有当前播报已开始、且新内容写入时旧文本已被清空，才会触发强制中断。常见误判是看到 DOM 更新了就以为用户听到了，实际可能因更新太快或未清空而静默。
必须同时满足三个硬性条件：
- 区域已挂载到 DOM，且初始可见（不能是
display: none、visibility: hidden或父级有aria-hidden="true"） - 每次更新前先清空内容：
el.textContent = ""或el.innerHTML = "" - 新内容写入后，至少间隔
100ms再触发下一次（否则 NVDA/JAWS 可能跳过）
父级 aria-hidden 是最常漏掉的失效原因
如果错误容器被包在 aria-hidden="true" 的弹窗壳里，或者整个表单加了 aria-hidden，那子级的 aria-live="assertive" 就完全失效——AX Tree 根本不包含它，屏幕阅读器连看都看不到。
检查方法很简单：打开浏览器开发者工具 → 切换到“Accessibility”面板 → 确认该元素是否出现在 AX Tree 中，且没有被父节点屏蔽。
修复方式只有两个：
- 移除父级的
aria-hidden="true"（推荐，尤其对模态框里的错误提示） - 把
aria-live区域提级到父级aria-hidden="false"或无aria-hidden的容器中
动态更新时怎么避免只读出数字或碎片内容
默认情况下，aria-live 区域只播报变化的节点，比如你把 "上传中 42%" 改成 "上传中 78%"，读屏器可能只报 "78%"，用户根本不知道上下文。
必须显式加 aria-atomic="true"，强制整块区域内容被当作一个语义单元重读：
<div aria-live="assertive" aria-atomic="true" role="alert">验证码错误，请重试</div>
注意：role="alert" 已隐式启用 aria-live="assertive" 和 aria-atomic="true"，所以如果你用 role="alert"，就不必再重复写这两个属性（冗余但不报错）。
iOS VoiceOver 对 assertive 的支持不稳定
某些 iOS 版本（尤其是 17.x 后期及 18.x 早期）中，aria-live="assertive" 可能直接静音，或延迟数秒才播报。这不是你代码写错了，而是平台限制。
应对策略：
- 紧急错误仍用
role="alert"（比单独aria-live="assertive"兼容性略好） - 避免高频触发：两次以上
assertive更新容易让 VoiceOver 卡住或跳过后续播报 - 倒计时、进度类动态内容，一律改用
aria-live="polite"+aria-atomic="true"，别为了“实时感”强行上 assertive
真正难的不是写对属性，而是判断哪条消息真的值得打断用户——多数表单校验、状态提示，polite 才是默认安全选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
