role="alert"不能实时播报，因其仅声明语义而非自动触发朗读，需满足元素动态插入dom且内容变更被感知才触发播报；推荐改用aria-live="assertive"配合aria-atomic="true"实现可靠播报。
role="alert" 为什么不能实时播报？
浏览器不会自动把 role="alert" 元素的内容“读出来”，它只是告诉辅助技术：“这是一条紧急提示”，是否播报、何时播报，取决于辅助技术（如 NVDA、VoiceOver）的当前模式和焦点状态。常见误解是加了 role="alert" 就立刻朗读——实际中，多数情况下它只在元素**被动态插入 DOM 且处于可视区域时**才触发播报，且仅一次。
怎样让 role="alert" 真正触发播报？
关键不是加属性，而是“让它被辅助技术感知到变化”。必须满足两个条件：元素存在 + 内容变更（或首次插入）被明确通告。推荐做法：
- 用 JavaScript 动态创建并插入
<div role="alert"></div>，不要预先写死在 HTML 中 - 插入后立即设置内容（避免先空再赋值，部分读屏器会忽略空→非空的变更）
- 确保该元素不在
display: none或visibility: hidden容器内，也不被aria-hidden="true"阻断 - 不依赖
focus()——role="alert"本就不该获取焦点，强行 focus 可能打断用户操作
比 role="alert" 更可靠的选择：aria-live="assertive"
当需要更强控制力（比如重复播报、跨组件复用），直接用 aria-live="assertive" 更稳妥。它和 role="alert" 在语义上等价，但更灵活：
-
aria-live="assertive"必须配合aria-atomic="true"（否则只读变化部分，易漏字） - 可复用同一个容器，只需更新 innerText：
el.textContent = "网络已恢复" - 兼容性更好：ChromeVox、JAWS、NVDA、VoiceOver 均支持，且对 React/Vue 的重渲染更友好
- 示例容器：
<div aria-live="assertive" aria-atomic="true" class="sr-only"></div>（sr-only是仅屏幕阅读器可见的 CSS 类）
容易被忽略的细节和坑
很多“不播报”问题其实出在看不见的地方：
- 父级有
aria-hidden="true"，整个子树都会被读屏器忽略，role="alert"无效 - CSS 中用了
position: absolute; left: -9999px;但没加width: 1px; height: 1px;，某些读屏器（如旧版 JAWS）可能跳过渲染极小区域的元素 - Vue/React 中用
v-if或show切换，导致 DOM 被销毁重建——没问题；但若用v-show或display: none切换，则元素始终在 DOM 中，无“新增”事件，不触发播报 - 同一时刻多个
role="alert"元素同时出现，只有第一个会被播报，其余被静音（这是规范行为，不是 bug）
真正难的不是加属性，是让变化“被看见”——而这个“看见”，由 DOM 生命周期、CSS 渲染、辅助技术策略三方共同决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
