role="alert"仅在元素动态插入dom或内容更新时触发朗读，静态存在或仅css显隐切换无效；必须满足动态插入、无焦点移动、不打断操作三条件，且依赖aria-live="assertive"行为。
role=alert 什么时候才真正触发屏幕阅读器朗读
只有当元素被动态插入 DOM 或其内容发生改变（且满足 aria-live="assertive"）时，role=alert 才会触发屏幕阅读器中断当前朗读并立即播报。静态写在 HTML 里、未改动的 role=alert 元素，绝大多数屏幕阅读器（如 NVDA、VoiceOver）会直接忽略。
实操建议：
- 必须配合
aria-live="assertive"（role=alert本身隐式声明了该属性，但显式写出更稳妥，尤其在旧版 JAWS 中） - 元素初始应为空或
display: none，通过 JS 动态填充内容并设为display: block或移除隐藏类 - 避免用
visibility: hidden或opacity: 0隐藏——这些仍会被读取，但用户看不见，造成困惑 - 不要嵌套在
role=alert内部再用role=alert或其他 live region
为什么用 div[role=alert] 而不是原生 alert() 或 aria-label
alert() 是浏览器模态对话框，会强制聚焦、阻塞脚本、破坏页面上下文，完全不适用于无障碍通知；aria-label 只是给元素“起个名字”，不触发实时播报，也无法表达紧急语义。
正确做法是用语义化容器承载动态消息：
<div role="alert" aria-live="assertive" aria-atomic="true"> <p>密码长度不足 8 位</p> </div>
关键点：
-
aria-atomic="true"确保整个区域内容被当作一个整体播报（避免只读新增文字片段） - 推荐用
<p></p>或<span></span>包裹文本，避免空标签或纯文本直子节点（某些组合下 VoiceOver 可能跳过） - 不要给该元素设
tabindex或尝试让它可聚焦——它不是交互控件
常见失效场景和修复方式
典型错误现象：JS 改了 innerText，但屏幕阅读器没反应；或者反复触发、播报截断、读出无关 DOM 结构。
排查与修复：
- 检查是否在 Vue/React 等框架中「复用」了同一个 alert 元素（比如 v-if 切换），导致 DOM 未真正新增——应确保每次提示都创建新节点或清空后重置
- 避免在
role=alert内使用v-html或 innerHTML 插入含<script></script>、<iframe></iframe>的内容，可能破坏 aria-atomic 行为 - 若内容含链接或按钮，必须移除
role=alert（live region 不应含交互元素），改用role=status+aria-live="polite"并手动 focus 控件 - Chrome + NVDA 组合下，若父容器有
overflow: hidden且 alert 溢出可视区，部分版本 NVDA 可能静默——确保元素在视口内或至少position: absolute定位到可见区域
替代方案：什么情况下不该用 role=alert
表单校验错误、操作成功提示、加载状态更新等非中断性反馈，用 role=status 或 role=log 更合适。它们对应 aria-live="polite"，不会打断用户当前操作。
例如：
<div role="status" aria-live="polite"> 已保存草稿 </div>
要点：
-
role=alert仅用于需要**立即引起注意**的异常情况（如“网络断开”“支付失败”） - 频繁触发
role=alert（如每秒轮询一次）会导致屏幕阅读器堆叠播报或拒绝响应——这是反模式 - 移动端 Safari + VoiceOver 对
role=alert支持不稳定，建议 fallback 到aria-live="assertive"+role="region"并加aria-label明确用途
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
