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)
# 警報

另請參閱