role="status"适用于非中断性、低优先级的实时状态更新，如“已保存”“加载中…”，需配合DOM动态更新textContent且容器不可隐藏，隐含aria-live="polite"，禁用assertive，须真机测试验证。
role="status" 的适用场景是什么
role="status 是 ARIA 规范中专为「非中断性、低优先级的实时状态更新」设计的语义标记，比如表单提交成功提示、保存进度、搜索结果计数变化。它会被屏幕阅读器以静音、延迟、合并的方式播报，不会打断用户当前操作。
- 仅适用于用户不需立即响应的状态信息（如“已保存”“加载中…”），不是错误或警告
- 不要用于弹窗、模态框、导航变更等需要用户介入的内容
- 浏览器默认对
role="status"容器做aria-live="polite"处理，无需手动加
怎么写才真正被屏幕阅读器识别
光写 role="status" 不够，必须满足 DOM 更新 + 可访问性可读性两个条件：
- 容器需是实时可变的：不能是初始渲染后就固定不变的静态文本
- 内容需有实际文本更新：用 JS 修改 innerText 或 textContent，而不是仅切换 class
- 推荐用
div或span作为容器，避免语义冲突（比如别套在button里） - 不要隐藏内容（
display: none或visibility: hidden），否则屏幕阅读器跳过 - 示例正确写法：
<div role="status" aria-live="polite">正在保存…</div>
- 后续用 JS 更新：
statusEl.textContent = "已保存"
常见失效原因和避坑点
很多页面加了 role="status" 却没播报，问题通常出在这些地方：
- 容器在 JS 执行前为空，或首次渲染时没有文本（屏幕阅读器可能忽略空节点的后续变化）
- 用了
innerHTML插入带 HTML 标签的内容，但部分读屏工具对富文本支持不稳定，优先用textContent - 状态区域被 CSS 的
opacity: 0或position: absolute; left: -9999px遮盖 —— 这些不影响可访问性，但若同时加了aria-hidden="true"就彻底屏蔽了 - 在 Vue/React 中直接绑定响应式变量却不触发 DOM 文本节点更新（例如用
v-show切换整个容器显隐，而非更新内部文本） - 同一页面多个
role="status"元素，某些读屏工具只监听第一个
要不要手动加 aria-live
role="status" 已隐含 aria-live="polite"，不需要也不应该重复声明。显式加上 aria-live="assertive" 会破坏它的设计意图——变成强制打断播报，违背“status”的语义初衷。
立即学习“前端免费学习笔记（深入）”；
- 如果你需要强提醒（如表单校验失败），该用
role="alert"，不是role="status" - 如果想控制播报时机，可动态切换
aria-live值，但前提是移除role="status"，否则行为不可预测 - Safari + VoiceOver 对
role="status"支持较弱，建议搭配简短、明确的文案（不超过 12 字）提升兼容性
复杂的地方在于：它不靠视觉可见性起作用，而依赖 DOM 变更节奏、读屏工具策略、甚至系统语音引擎缓存机制。最稳妥的做法是——写完后，真机+VoiceOver/NVDA 实测一次，看是否在操作后 0.5 秒内自然播报。
