role="alert" 是语义化角色，隐式启用 aria-live="assertive" 和 aria-atomic="true"，适用于需立即打断用户的紧急通知；aria-live="assertive" 仅控制播报行为，需手动设置 aria-atomic 才能确保完整朗读，适合无语义需求的定制告警。
role="alert" 和 aria-live="assertive" 都用于让屏幕阅读器立即播报关键信息，但它们在语义、默认行为和使用逻辑上存在明确分工。
role="alert" 是语义化角色，自带 assertive 行为
它不只是一个提示方式，而是明确告诉辅助技术：“这是一个需要用户立刻注意的紧急通知”。浏览器和屏幕阅读器（如 NVDA、VoiceOver）会将 role="alert" 自动映射为 aria-live="assertive"，并常附加额外提示机制——比如播放提示音、高亮焦点、或强制中断当前朗读。
- 无需手动加
aria-live，加了也不会出错，但属于冗余 - 隐式启用
aria-atomic="true"，确保整条消息被完整播报，避免只读一半造成歧义 - 适合表单验证失败、系统错误、支付失败、权限拒绝等必须打断用户操作的场景
aria-live="assertive" 是底层行为控制，更灵活但需手动补全
它只声明“这个区域的内容更新要立即播报”，不带任何语义含义。也就是说，它不会自动触发提示音，也不保证整段内容被完整朗读——除非你额外设置 aria-atomic="true" 或 aria-relevant="all"。
- 适合需要 assertive 级别播报，但又不想用 alert 语义的定制组件（例如某些内部管理后台的实时告警面板）
- 若仅写
aria-live="assertive"而没设aria-atomic，屏幕阅读器可能只读新增文字，漏掉上下文 - 不能单独用于无语义的空容器；必须配合实际可读内容，且内容应是纯文本或含适当语义的内嵌元素
怎么选？看是否需要“语义+行为”一体化
绝大多数面向用户的紧急通知，直接用 role="alert" 就够了。它简洁、标准、兼容性好，开发者不用操心底层细节。
- ✅ 订单提交失败、密码强度不足、网络断开提示 → 用
role="alert" - ✅ 后台监控系统弹出“CPU 使用率超 95%” → 可用
aria-live="assertive"+aria-atomic="true"，因它不属于用户操作流中的“交互反馈”，而属系统状态通告 - ❌ 不要用
role="alert"显示“加载中…”或“保存成功”，这类非紧急状态应改用role="status"或aria-live="polite"
实际写法对比
下面两个例子在多数屏幕阅读器中效果一致，但第一种更推荐：
- 推荐：
<div role="alert">邮箱格式不正确</div> - 可用但稍重：
<div aria-live="assertive" aria-atomic="true">邮箱格式不正确</div>
不推荐：<div aria-live="assertive">邮箱格式不正确</div>（缺少 atomic，可能只读“不正确”）
