role="alert" 不触发即时朗读的根本原因是它依赖动态插入和无障碍树更新，静态写在HTML中无效；必须用JavaScript动态创建并插入带role="alert"的元素，或使用aria-live="assertive"替代。
role="alert" 为什么有时不触发即时朗读
根本原因不是 role="alert" 写错了，而是它依赖「动态插入」和「无障碍树更新」机制——静态写在 HTML 里不会生效。屏幕阅读器只对 DOM 变更（如新增、属性变更）产生反应，且要求元素在插入时已带 role="alert"，不能先插入再补加 role。
必须用 JavaScript 动态创建并插入 alert 元素
直接在 HTML 中写 <div role="alert">提交成功</div> 是无效的。正确做法是：在需要提示时，用 JS 创建新元素，设好 role="alert"，再插入到 DOM 中（通常放在 <main> 或 <body> 顶部附近）。
示例：
const alert = document.createElement('div');
alert.role = 'alert';
alert.textContent = '密码修改成功';
document.body.prepend(alert); // 插入到 body 开头，确保被优先读取
// 3 秒后移除，避免重复播报
setTimeout(() => alert.remove(), 3000);
- 必须用
document.createElement或innerHTML动态生成，不能靠初始 HTML 渲染 - 插入位置影响播报顺序：
prepend()比append()更可靠，尤其在单页应用中 - 不要用
display: none或visibility: hidden预留元素——隐藏状态下的role="alert"不会被读取
替代方案：aria-live="assertive" 更灵活
如果不想频繁操作 DOM，可用 aria-live="assertive" 配合一个常驻容器。它对文本内容变化敏感，比 role="alert" 更易维护。
立即学习“前端免费学习笔记（深入）”；
示例：
<div aria-live="assertive" aria-atomic="true" class="sr-only"> <span id="live-msg"></span> </div>
后续只需更新 textContent：
document.getElementById('live-msg').textContent = '网络连接失败';
-
aria-live="assertive"行为等价于role="alert"，但支持复用同一节点 -
aria-atomic="true"确保整段内容被完整读出，避免只读变化部分 - 容器需视觉隐藏但保留可访问性：
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
常见失效场景与绕过技巧
即使代码正确，仍可能不朗读——多数源于浏览器或屏幕阅读器自身的策略限制。
- Chrome + NVDA：若页面刚加载完立刻触发 alert，可能被忽略；加
setTimeout(..., 10)微延迟可缓解 - 移动端 Safari + VoiceOver：
role="alert"在某些 iOS 版本中对非焦点区域响应迟钝；改用aria-live="assertive"更稳 - React/Vue 等框架中，直接操作 DOM 可能被渲染逻辑覆盖；务必在
useEffect或mounted后异步执行插入 - 不要给 alert 元素加
tabindex="-1"或focus()——这会打断朗读，甚至导致跳过内容
