描述
alert 角色用于向用户传达一个重要且通常是时效性的消息。当此角色被添加到元素时，浏览器会向辅助技术产品发送一个可访问的警报事件，以便它们可以通知用户。
alert 角色仅应用于需要用户立即关注的信息，例如
- 在表单字段中输入了无效值
- 用户的登录会话即将过期
- 与服务器的连接丢失，本地更改将不会保存
alert 角色仅应用于文本内容，而不是交互式元素，如链接或按钮。带有 alert 角色的元素不必能够接收焦点，因为屏幕阅读器（语音或盲文）无论键盘焦点在哪里，都会自动播报更新的内容，只要该角色被添加到元素上。
alert 角色被添加到包含警报消息的节点上，而不是触发警报的元素上。警报是 强制性实时区域。设置 role="alert" 等同于设置 aria-live="assertive" 和 aria-atomic="true"。由于它们不接收焦点，因此不需要管理焦点，也不需要用户交互。
警告：由于其侵扰性，alert 角色必须谨慎使用，并且仅在需要用户立即关注的情况下使用。
alert 角色是五种 实时区域 角色之一。动态变化不那么紧急的应该使用不那么激进的方法，例如包含 aria-live="polite" 或使用其他实时区域角色，如 status。如果用户需要关闭警报，则应使用 alertdialog 角色。
关于 alert 角色最重要的信息是，它用于动态显示的内容，而不是页面加载时显示的内容。它非常适用于用户填写表单，然后使用 JavaScript 添加错误消息的情况——警报会立即读出消息。它不应用于用户尚未与之交互的 HTML。例如，如果一个页面加载时有多个可见的警报散布在各处，则不应使用 alert 角色，因为这些消息不是动态触发的。
与所有其他 实时区域 一样，警报仅在 role="alert" 的元素内容被更新时才会播报。请确保带有该角色的元素首先存在于页面的标记中——这将“预热”浏览器和屏幕阅读器，使其能够监视元素的变化。在此之后，内容的任何更改都将被播报。请勿尝试动态添加/生成一个已经填充了您想要播报的警报消息的 role="alert" 元素——这通常不会导致播报，因为它不是内容更改。
由于 alert 角色会读出任何已更改的内容，因此应谨慎使用。警报，顾名思义，具有干扰性。一次出现多个警报，以及不必要的警报，都会造成糟糕的用户体验。
示例
以下是警报的常见示例及其实现方式
示例 1：使带有 alert 角色的元素内的现成内容可见
如果带有 role="alert" 的元素内部的内容最初使用 CSS 隐藏，使其可见将触发警报。这意味着现有的警报容器元素可以被“重复”使用多次。
.hidden {
display: none;
}
<div id="expirationWarning" role="alert">
<span class="hidden">Your log in session will expire in 2 minutes</span>
</div>
// removing the 'hidden' class makes the content inside the element visible, which will make the screen reader announce the alert:
document
.getElementById("expirationWarning")
.firstChild.classList.remove("hidden");
示例 2：动态更改带有 alert 角色的元素内的内容
使用 JavaScript，您可以动态更改带有 role="alert" 的元素内部的内容。请注意，如果您需要多次触发相同的警报（即，您动态插入的内容与之前的内容相同），这通常不会被视为更改，并且不会导致播报。因此，最好先短暂地“清除”警报容器的内容，然后再注入警报消息。
<div id="alertContainer" role="alert"></div>
// clear the contents of the container
document.getElementById("alertContainer").textContent = "";
// inject the new alert message
document.getElementById("alertContainer").textContent =
`Your session will expire in ${expiration} minutes`;
示例 3：视觉隐藏的警报容器用于屏幕阅读器通知
可以视觉隐藏警报容器本身，并将其用于提供屏幕阅读器的更新/通知。当页面上的重要内容已更新，但屏幕阅读器用户无法立即注意到这些更改时，这可能很有用。
但是，请确保容器没有使用 display:none 隐藏，因为这会将其隐藏，即使是辅助技术也无法感知，这意味着它们不会被通知任何更改。相反，可以使用类似 .visually-hidden 样式的方法。
<div id="hiddenAlertContainer" role="alert" class="visually-hidden"></div>
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
// clear the contents of the container
document.getElementById("hiddenAlertContainer").textContent = "";
// inject the new alert message
document.getElementById("hiddenAlertContainer").textContent =
"All items were removed from your inventory.";
规范
| 规范 |
|---|
| 无障碍富互联网应用程序 (WAI-ARIA) # alert |