role="status" 是 aria 中用于标记短暂、非交互性状态提示的语义角色，需满足动态更新、不隐藏、带 aria-live="polite" 和 aria-atomic="true" 三条件才被屏幕阅读器正确识别。
role="status" 是什么，什么时候该用
role="status" 是 ARIA（Accessible Rich Internet Applications）定义的一个语义角色，专用于标记那些**短暂出现、无需用户主动交互、仅作信息提示**的区域，比如表单提交成功提示、保存完成反馈、加载状态更新等。它不是视觉装饰，而是告诉屏幕阅读器：“这里有一条状态消息，请以静默方式朗读（不打断当前操作），且旧消息会被新消息自动覆盖。”
常见误用是把它套在所有“提示框”上——比如错误弹窗、确认对话框、带按钮的操作反馈，这些都不该用 role="status"，而应选 role="alert" 或原生 alertdialog。
怎么写才被屏幕阅读器正确识别
必须满足三个条件，缺一不可：
- 元素需有
role="status"属性 - 内容需动态更新（静态 HTML 不触发播报）
- 元素不能隐藏（
display: none或visibility: hidden会彻底屏蔽）
推荐写法：
<div role="status" aria-live="polite" aria-atomic="true"></div>其中：
aria-live="polite" 表示“等用户暂停再读”，比 assertive 更合适状态类消息；aria-atomic="true" 确保整块内容被当做一个单元播报，避免只读新增字符。
JavaScript 更新时容易踩的坑
直接 innerHTML 赋值或 textContent 替换看似简单，但实际容易导致播报失败或重复播报：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要用
element.innerHTML = "保存成功"后立刻element.innerHTML = ""清空——清空会触发一次空字符串播报，干扰体验 - 不要在消息未消失前反复写入相同文本（如连续两次
"正在保存..."），部分屏幕阅读器可能跳过重复内容 - 避免把
role="status"元素放在display: none的父容器里，即使自身可见也不起作用
稳妥做法是：用 textContent 写入新消息，留足至少 1 秒再清空（或用 CSS opacity: 0 + pointer-events: none 视觉隐藏，保持 DOM 可访问）。
和 role="alert" 的关键区别在哪
核心差异在中断性与优先级：role="alert" 强制中断当前语音、立即播报，适合错误、警告、关键操作确认；role="status" 则排队等待、不打断，适合“已保存”“加载完成”这类低干扰反馈。
别因为“都是提示”就混用——把登录失败提示设成 role="status"，屏幕阅读器可能等用户读完段落才告诉你“密码错误”，这等于没提示。
真正难的不是写对属性，而是判断哪条消息值得打断用户、哪条该安静等待。这个决策点，比代码多一行少一行更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
