role="status"用于礼貌型状态提示，空闲时播报；role="alert"用于紧急型警告，立即中断播报。前者适用“已保存”等非中断反馈，后者适用“邮箱格式错误”等需即时响应的错误。
role="status" 和 role="alert" 都是为屏幕阅读器提供动态消息播报的语义化方式，但它们的播报时机、干扰程度和适用场景完全不同——选错一个，用户可能完全听不到提示，或被反复打断操作。
核心区别：播报是否打断当前操作
role="status" 是“礼貌型”提示，隐式启用 aria-live="polite"。它不会中断屏幕阅读器正在朗读的内容，而是在空闲时（比如读完当前段落、菜单项后）才播报。适合用户“知道就好，不必立刻响应”的状态。
role="alert" 是“紧急型”提示，隐式启用 aria-live="assertive" 和 aria-atomic="true"。它会强制中断当前语音，立即播报整条消息，适合必须马上引起注意的情况。
什么时候该用 role="status"
- 表单保存成功：“已保存”、“更改已生效”
- 异步操作完成：“上传完成”、“同步已完成”
- 轻量状态反馈：“正在处理…”、“加载中”（需配合视觉动效）
- 不建议用于错误类信息；若用户未主动触发，也不需要立即干预，就优先 status
什么时候该用 role="alert"
- 表单校验失败：“邮箱格式不正确”、“密码不能为空”
- 系统级异常：“网络连接失败”、“会话已过期，请重新登录”
- 关键操作阻断：“支付失败，请检查银行卡余额”
- 不能静态写死在 HTML 里——必须由 JS 动态插入或更新内容才能触发播报
DOM 位置与实现细节很关键
两者都要求容器在 DOM 中“可访问”：不能被 display: none、visibility: hidden 或 aria-hidden="true" 隔离；最好放在 顶层或紧邻主内容区。
role="status" 允许初始存在，内容后续更新即可生效；role="alert" 在部分读屏（如 VoiceOver）中更依赖元素“初始就在 DOM 中”，所以推荐预先挂载空容器，再用 JS 填充文本，而不是每次新建插入。
别手动加 aria-live="polite" 或 aria-live="assertive"——这两个 role 已隐式声明对应行为，重复设置反而可能引发旧版读屏兼容问题。
视觉与语音要一致
无论用哪个 role，都要配清晰的视觉反馈：比如带图标的横幅、短暂出现的 toast、或焦点返回到出错字段旁。仅靠语音提示， sighted 键盘用户或低视力用户可能错过上下文。
避免用 alert() 替代——它会劫持焦点、阻塞脚本、无法暂停重读，且完全脱离页面语义结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
