aria-live="assertive"需同时满足三条件才生效：区域已挂载且可见、每次更新前清空内容、新内容写入后至少间隔100ms；否则屏幕阅读器不播报。
aria-live="assertive" 不是写了就抢话，得满足三个硬条件
很多开发者以为只要写上 aria-live="assertive"，错误一出现就会立刻打断屏幕阅读器——实际几乎从不这样工作。它有内置防抖，且依赖 DOM 状态和更新节奏。必须同时满足：
• 区域已挂载到 DOM 且初始可见（不能 display: none、visibility: hidden 或父级带 aria-hidden="true"）
• 每次更新前先清空内容（el.textContent = "" 或 el.innerHTML = ""）
• 新内容写入后，至少间隔 100ms 再触发下一次（否则 NVDA/JAWS 很可能跳过）
为什么“密码错误”弹出来却没读？先查 AX Tree 是否包含该元素
最常被忽略的是可访问性树（AX Tree）缺失。即使 HTML 里写了 aria-live="assertive"，如果该元素被包在 aria-hidden="true" 的模态框壳里、或父容器设置了 display: none、或 JS 动态插入但未正确挂载，它根本不会进入 AX Tree，也就完全不会被读屏软件感知。
• 打开浏览器开发者工具 → 切换到 Accessibility 面板 → 检查目标元素是否出现在树中
• 确认 aria-live 值被解析为字符串 "assertive"（不是拼错成 "assertive " 或 "Assertive"）
• 别同时设 role="alert" 和 aria-live="assertive"：前者已隐含后者，重复设置反而干扰
DOM 更新方式错了，assertive 就等于没写
aria-live="assertive" 只响应“整体替换”，不响应“追加”或“局部更新”。用 insertAdjacentHTML("beforeend", ...) 或 appendChild() 往里面加节点，它基本不触发；直接改 textContent 或 innerHTML 才有效，但必须严格遵循“清空 → 等待 → 写入”三步：
• ✅ 正确：errorEl.textContent = ""; → setTimeout(() => errorEl.textContent = "用户名不能为空", 50);
• ❌ 错误：errorEl.innerHTML += "<p>用户名不能为空</p>";
• ❌ 错误：连续两次快速赋值：errorEl.textContent = "密码错误"; errorEl.textContent = "请重试";（第二次大概率丢）
• ⚠️ 注意：若容器正在运行 CSS 动画（比如 fade-in），某些旧版读屏器会因渲染帧干扰而漏掉变更感知
assertive 不是越频繁越好，大错只该报一次且语义完整
真正需要 aria-live="assertive" 的场景极少：登录失败、关键权限拒绝、表单必填项全空提交、支付卡校验失败等——这些不被立刻听到，用户大概率会继续错操作。但它不是“高音喇叭”，而是“紧急警报按钮”。
• 必须配合 aria-atomic="true"，否则可能只读出“错误”两个字，漏掉上下文
• 别在轮询、倒计时、加载中状态里滥用：iOS VoiceOver 某些版本对连续 assertive 直接静音
• 错误文案本身要自解释：“验证码错误，请重新输入”比“验证失败”更可靠
• 如果同一区域要报多个错误（如用户名+密码都错），别反复触发 assertive，应合并为一句完整提示再写入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
