角色 动态区域
alert
一种实时区域，用于传达紧急、时效性强的消息。屏幕阅读器会立即读出，并打断当前正在播报的内容。应谨慎使用——仅保留给真正的错误和警告；滥用会导致辅助技术疲劳。
适用场景
适用于确实需要打断用户的消息——表单提交失败、会话即将超时、连接断开等情况。role="alert" 等效于 aria-live="assertive" 加 aria-atomic="true"，意味着屏幕阅读器会停止当前正在读出的内容，优先读出该提醒。
应谨慎使用。强制性播报会中断用户当前的操作；若每次字段保存或操作成功都触发一次，会造成严重干扰。对于非紧急状态变化，应改用 role="status"（aria-live="polite"）。
最重要的一条规则：提醒元素必须在消息插入之前已存在于 DOM 中，且内容必须通过添加（而非从隐藏状态切换显示）的方式写入，播报才能触发。直接从零插入 <div role="alert">Error</div> 在各屏幕阅读器中表现不一致。安全做法是：在页面加载时渲染一个空的 <div role="alert"></div>，需要提醒时再更新其文本内容。
与 status 的区别
使用 role="alert" | 使用 role="status" |
|---|---|
| 表单验证错误 | ”已添加至购物车” |
| 会话即将过期 | 搜索结果数量已更新 |
| 连接断开 | ”已保存”提示 |
| 付款失败 | 加载完成 |
常见错误
- 消息写入后才将提醒元素添加到 DOM——许多屏幕阅读器不会播报。
- 对预先填充内容的提醒元素切换
hidden。触发播报的是文本内容的变化；单纯切换可见性可能无效。 - 将
role="alert"用于常规状态提示。会让用户被频繁打断，不堪其扰。 - 快速连续插入多条提醒——后续消息会在前一条之后排队，有时等待时间长达数十秒。
- 提醒消息未指明字段或原因——仅写”错误”毫无意义，“电子邮件地址为必填项”才具有可操作性。
- 将
role="alert"放在表单的外层容器上，并期望内部的变化能被播报。只有提醒元素自身文本内容的变化才会触发播报。
示例
<!-- 在页面加载时渲染为空 -->
<div role="alert" id="formErr"></div>
<script>
// 提交失败时：
document.getElementById('formErr').textContent =
'Email address is required.';
</script>