role="status"是ARIA中用于标记礼貌级别状态更新的语义角色，隐式启用aria-live="polite"，适合“已保存”等非中断性提示；必须动态更新内容且置于无障碍树中，静态存在无效。
role="status" 是什么，什么时候该用
它不是视觉组件，而是给屏幕阅读器用的语义标记，告诉辅助技术“这里有个次要状态更新，别打断用户当前操作”。常见于表单提交成功提示、保存状态、异步加载完成等非中断性反馈。
别把它当 alert 用——role="alert" 会强制中断、立即朗读；role="status" 默认延迟、低优先级，适合不打断用户流程的轻量提示。
- 必须是实时动态内容：静态文字加
role="status"没意义，屏幕阅读器不会主动读 - 内容要简短明确，比如 “已保存” 而不是 “您的更改已于 2024-06-12 14:22:35 成功写入数据库”
- 不能放在
aria-hidden="true"容器里，否则会被忽略
怎么让屏幕阅读器真正读出来
光写 role="status" 不够。浏览器和辅助技术依赖 DOM 变化触发朗读，所以必须通过 JavaScript 动态插入或更新内容，且推荐用 textContent 或 innerText（避免 HTML 注入风险）。
常见失效原因：直接 innerHTML 赋值空字符串再赋新值、用 CSS display: none 切换可见性、或把更新逻辑放在 setTimeout 中但延迟过长（部分 NVDA 会跳过超过 500ms 的变化）。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：先清空节点
el.textContent = ""，再设新值el.textContent = "上传完成" - 避免用
innerHTML插入带标签的内容，除非你严格过滤并确保无障碍语义不被破坏 - 不要用
aria-live="polite"手动覆盖——role="status"已隐含aria-live="polite"和aria-relevant="additions text"
DOM 更新时机与可访问性 API 的关系
某些框架（如 React）的批量更新或虚拟 DOM diff 可能导致状态节点没被真实插入/变更，从而跳过可访问性通知。关键不是“有没有渲染”，而是“是否触发了可访问性树的增量更新”。
实测发现：在 Vue 中用 v-show 切换 role="status" 元素常失效；React 中若状态更新未引起组件重渲染（比如只改 ref），也不会触发朗读。
- 最稳妥方式：确保目标元素始终在 DOM 中（不销毁），仅更新其文本内容
- 如果必须显隐，用
visibility: hidden或opacity: 0+aria-hidden="true"配合，但更新时务必先移除aria-hidden再设文本 - 调试技巧：Chrome 开发者工具 → “Accessibility” 面板 → 勾选 “Highlight updates”，观察 status 区域是否被标记为 live region 变更
兼容性陷阱：哪些组合根本读不出来
不是所有 role="status" 都能被正确处理。JAWS 2022+、NVDA 2023.1+、VoiceOver macOS 13+ 支持较好；但旧版 JAWS（尤其配合 IE）或某些国产读屏软件可能完全忽略它。
更麻烦的是，如果父容器有 aria-live="off" 或 role="application"，会屏蔽子级所有 live region 行为，包括 role="status"。
- 检查父级是否有冲突的
aria-live值，尤其注意模态框、编辑器等复杂组件的根节点 - 避免嵌套多个
role="status"，部分读屏会只响应第一个 - 移动端 VoiceOver 对
role="status"敏感度较低，建议搭配aria-atomic="true"强制整块朗读（但别滥用，会影响其他上下文）
真正的难点不在写法，而在验证——得真用 NVDA/JAWS/VoiceOver 实机测试，而不是只看 DOM 结构或 console.log。
