描述
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 |