role="alert" 是开箱即用的紧急通知方案，隐式声明 aria-live="assertive" 和 aria-atomic="true"，要求元素初始即存在于DOM；aria-live="assertive" 仅为底层播报开关，需手动配置 aria-atomic="true" 且动态插入兼容性较弱。
role="alert" 和 aria-live="assertive" 都用于向屏幕阅读器传达紧急、需立即注意的动态内容，但它们在语义、行为细节和使用前提上存在关键差异。选错可能造成播报被忽略、重复朗读或兼容性问题。
语义与隐式行为不同
role="alert" 是一个具有明确语义的角色，它不仅表示“这是个警告”，还隐式声明 aria-live="assertive" 和 aria-atomic="true"。也就是说，只要元素存在且内容更新，主流屏幕阅读器（如NVDA、JAWS、VoiceOver）会立即中断当前播报，并完整朗读整个区域内容。
aria-live="assertive" 仅控制播报时机（立即打断），不自带语义或原子性保证——它需要你手动配合 aria-atomic="true" 才能确保整段错误信息不被截断朗读（比如只读到“用户名”就停了，漏掉“不能为空”）。
DOM 存在时机要求严格
role="alert" 要生效，该元素必须在页面初始加载时就存在于 DOM 中，不能是 JS 动态创建后才插入。很多表单错误提示失败，正是因为错误容器是提交后才 append 的，导致 VoiceOver 或 iOS Safari 屏幕阅读器完全不播报。
而 aria-live="assertive" 区域虽也推荐提前渲染，但部分阅读器（如较新版本 NVDA + Firefox）对动态插入的 assertive 区域支持稍好；不过仍不如预置 alert 稳定。
实际使用建议
-
优先用 role="alert"：适用于表单验证错误、系统级警告、登录失败提示等真正需要用户立刻响应的场景。记得提前写好空容器，例如：
- 慎用纯 aria-live="assertive"：仅在无法预置容器、且已明确处理 aria-atomic 和兼容性测试的前提下使用；多数情况下应搭配 role="alert" 更稳妥。
- 避免滥用：连续触发多个 alert 会导致播报堆叠、语音混乱。一次操作只设一个 alert 区域，内容更新时替换 innerHTML，而非反复新增元素。
- 别混搭冗余属性：写了 role="alert" 就无需再写 aria-live="assertive"（虽不报错，但多余）；但 aria-atomic="true" 仍建议显式保留，因部分旧版阅读器对 alert 的 atomic 行为支持不一致。
对比小结
role="alert" 是「开箱即用的紧急通知方案」，强调语义正确与兼容保障；aria-live="assertive" 是「底层播报控制开关」，灵活但需手动补全逻辑。真实项目中，90% 的紧急提示场景，直接用 role="alert" 并确保 DOM 预置，是最简、最可靠的选择。
