应使用 role="status" 于非中断性状态提示（如“已保存”），而非错误警告；它隐式含 aria-live="polite"，需置于全局可达位置并配合视觉反馈。
role="status" 是 ARIA 中用于标记“礼貌级别”（polite）状态更新区域的语义方式，浏览器和屏幕阅读器会将其内容以非中断方式播报——即不打断用户当前操作，仅在空闲时读出。它适合表单提交成功提示、保存状态、异步加载完成等弱干扰场景。
什么时候该用 role="status" 而不是 role="alert"
role="alert" 是“紧急级别”（assertive），会立即中断屏幕阅读器当前语音并强制播报，适用于错误、警告等需即时关注的情况；而 role="status" 默认就是 polite，适合那些“你可能想知道，但不必立刻停下一切来听”的信息。
- ✅ 适合：
role="status"—— “已保存”、“上传完成”、“正在同步…” - ❌ 不适合：
role="status"—— “密码太短！”、“网络连接失败”（这类应改用role="alert"） - ⚠️ 注意：不要手动加
aria-live="polite"——role="status"已隐式声明了aria-live="polite"和aria-atomic="true"，重复设置可能引发兼容性问题（尤其旧版 NVDA）
DOM 插入位置与可访问性有效性
屏幕阅读器只监听其 DOM 子树内的动态变化，因此 role="status" 区域必须在触发更新的交互元素“逻辑上可达”——通常放在 顶层或紧邻主内容区，避免被 display: none、visibility: hidden 或 aria-hidden="true" 隔离。
- ✅ 推荐位置：
<div role="status" aria-live="polite" class="sr-only"></div>放在开头或结尾（确保全局可触达） - ❌ 常见失效点：把它塞进某个折叠面板内部、模态框中未打开时的 DOM、或父级有
aria-hidden="true" - ? 小技巧：用
class="sr-only"隐藏视觉样式（如position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;），但绝不能用display: none或visibility: hidden
如何安全地更新内容（避免重复/遗漏播报）
直接 innerHTML 赋值或 textContent 替换即可触发播报，但要注意节奏和内容稳定性：
- ✅ 正确做法：每次只更新一次内容，更新后等待自然播报完成；若需连续提示（如“保存中…” → “已保存”），建议清空中间态或加延时，避免屏幕阅读器吞掉后一条
- ❌ 错误模式：高频轮询修改内容（如每 200ms 更新一次“加载中…”的省略号数量），会导致播报卡顿或跳过
- ? 兼容性提示：Safari + VoiceOver 对快速连续更新支持较弱，推荐用
setTimeout控制最小间隔 ≥ 500ms；Chrome + NVDA 则相对宽容 - ? 示例（简洁安全）：
const statusEl = document.querySelector('[role="status"]');<br>statusEl.textContent = '已保存'; // 自动触发 polite 播报
真正容易被忽略的是：即使用了 role="status"，如果更新发生在用户尚未聚焦页面、或屏幕阅读器处于暂停状态（比如用户正手动拖拽虚拟光标），提示也可能被跳过。所以关键状态仍需提供视觉反馈，并把 role="status" 当作辅助通道，而非唯一通知手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
