ARIA：警报角色

alert 角色用于重要信息，通常是时间敏感信息。alert 是一种 status，被处理为原子实时区域。

描述

alert 角色用于向用户传达重要信息，通常是时间敏感信息。当此角色添加到元素中时，浏览器会向辅助技术产品发出可访问的警报事件，辅助技术产品可以通知用户。

alert 角色应仅用于需要用户立即关注的信息，例如

  • 表单字段中输入了无效值
  • 用户的登录会话即将过期
  • 与服务器的连接已断开，因此本地更改将不会保存

alert 角色应仅用于文本内容，而不是交互式元素（如链接或按钮）。具有 alert 角色的元素不需要能够接收焦点，因为屏幕阅读器（语音或盲文）会自动宣布更新的内容，而不管键盘焦点在何处，只要添加了角色即可。

alert 角色添加到包含警报消息的节点，而不是触发警报的元素。警报是 断言实时区域。设置 role="alert" 等同于设置 aria-live="assertive" 和 aria-atomic="true"。由于它们不会接收焦点，因此不需要管理焦点，也不需要用户交互。

警告：由于其侵入性，alert 角色必须谨慎使用，并且仅在用户需要立即关注的情况下使用。

alert 角色是五个 实时区域 角色之一。不太紧急的动态更改应使用不太强烈的 aria-live="polite"，或者使用其他实时区域角色，如 status。如果用户预计会关闭警报，则应使用 alertdialog 角色。

关于 alert 角色最重要的一个方面是，它是针对动态显示的内容，而不是针对页面加载时显示的内容。它非常适合用户填写表单并使用 JavaScript 添加错误消息时的情况 - 警报会立即读出消息。它不应用于用户尚未与之交互的 HTML。例如，如果一个页面加载时在整个页面中散布着多个可见警报，则不应使用警报角色，因为这些消息不是动态触发的。

与所有其他 实时区域 一样，警报只有在具有 role="alert" 的元素的内容更新时才会宣布。请确保具有该角色的元素首先出现在页面的标记中 - 这将“启动”浏览器和屏幕阅读器，让它们持续监视元素的更改。在此之后，对内容的任何更改都将宣布。不要尝试动态添加/生成具有 role="alert" 的元素，该元素已经填充了要宣布的警报消息 - 这通常不会导致宣布，因为它不是内容更改。

由于 alert 角色会读出任何已更改的内容，因此应谨慎使用。根据定义，警报会造成干扰。一次出现多个警报以及不必要的警报会导致糟糕的用户体验。

示例

以下是警报的常见示例以及如何实现它们

示例 1：使具有警报角色的元素内部的现成内容可见

如果具有 role="alert" 的元素内部的内容最初使用 CSS 隐藏，则将其设为可见将导致警报触发。这意味着现有的警报容器元素可以“重复使用”多次。

css
.hidden {
  display: none;
}
html
<div id="expirationWarning" role="alert">
  <span class="hidden">Your log in session will expire in 2 minutes</span>
</div>
js
// 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：动态更改具有警报角色的元素内部的内容

使用 JavaScript，您可以动态更改具有 role="alert" 属性的元素内部的内容。请注意，如果您需要多次触发相同的警报（例如，您动态插入的内容与之前相同），这通常不会被视为更改，并且不会导致公告。因此，通常最好在注入警报消息之前，先短暂“清除”警报容器的内容。

html
<div id="alertContainer" role="alert"></div>
js
// 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 样式 的东西。

html
<div id="hiddenAlertContainer" role="alert" class="visually-hidden"></div>
css
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
js
// 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)
# 警报
可访问的富互联网应用 (WAI-ARIA)
# 警报

另请参阅