role="status" 是 ARIA 中用于标记非中断性实时状态更新的语义角色，需配合 aria-live="polite" 使用，适用于成功提示等低优先级更新，不可用于错误提示。
role="status" 是什么，什么时候该用
role="status" 是 ARIA 规范中定义的一个语义角色，专用于标记**非中断性、低优先级的实时状态更新区域**。它不是用来展示普通文本或错误提示的，而是告诉屏幕阅读器：“这里的内容变了，但不用立刻打断用户当前操作”。比如表单提交成功后的绿色提示“保存成功”，或者搜索框下方动态显示“找到 12 个结果”。
常见误用是把它套在所有提示框上——比如把登录失败的红字错误也塞进 role="status"。这反而会让屏幕阅读器忽略或延迟播报，用户根本听不到。
怎么写才让屏幕阅读器真正读出来
光加 role="status" 不够，必须配合 aria-live="polite"，且不能有 aria-live="off" 或 aria-hidden="true" 干扰。浏览器和辅助技术依赖这个组合来触发播报。
- ✅ 正确写法：
<div role="status" aria-live="polite" aria-atomic="true">上传完成</div>
- ❌ 错误写法：
<div role="status">上传完成</div>
（缺aria-live，多数屏幕阅读器直接静音） - ⚠️ 注意：
aria-atomic="true"推荐加上，否则只读变化部分（比如从“上传中…”变成“…完成”时可能只读“完成”）
为什么有时候写了也不读？排查这几点
实际开发中常遇到“写了 role="status" 却没声音”，问题往往不在角色本身，而在 DOM 更新方式或上下文干扰。
立即学习“前端免费学习笔记（深入）”；
- 内容必须是**动态插入或修改的**：静态 HTML 里的
role="status"不会触发播报；得用 JS 改textContent或innerHTML - 避免父容器有
aria-hidden="true"或display: none—— 即使子元素设了role="status"，也会被整体屏蔽 - 不要复用同一个 DOM 节点反复
textContent = ""再赋新值：部分旧版 NVDA 对空值过渡不敏感，建议先设一个占位符（如空格），再更新 - React/Vue 等框架里，确保节点没被销毁重挂——
key变动或条件渲染导致节点重建，会重置 aria-live 的监听状态
替代方案：error / alert / log 怎么选
不是所有提示都该用 role="status"。ARIA 提供了更精准的语义：
- 表单验证失败？用
role="alert"+aria-live="assertive"：强制中断、立即播报 - 后台日志或调试信息？用
role="log"：适合追加式内容（如 WebSocket 消息流） - 需要用户主动查看的提示？别用任何
role，靠视觉样式 +aria-describedby关联即可 - 真要兼容老系统？
role="status"在 IE11 + JAWS 组合下表现不稳定，可降级为role="region"+aria-label手动控制
最常被跳过的细节是：状态提示区域必须始终存在于 DOM 中，不能靠 show/hide 切换 display —— 隐藏时它就不再被 aria-live 监听了。
