ARIA: alertdialog 角色
alertdialog 角色用於模態警報對話方塊，這類對話方塊會中斷使用者的正常工作流程，以傳達重要訊息並需要使用者響應。
描述
alertdialog 角色用於通知使用者緊急資訊，這些資訊需要使用者立即關注。在包含對話方塊的元素上新增 role="alertdialog" 可以幫助輔助技術識別內容是分組的，並且與頁面其他內容分離。例如，需要確認的錯誤訊息以及其他操作確認提示。
顧名思義，alertdialog 是 dialog 和 alert 角色的一種混合體。alertdialog 是一種 dialog，其使用場景與 alert 類似，但適用於需要使用者響應的情況。
注意： alertdialog 角色僅應用於具有相關互動控制元件的警報訊息。如果警報對話方塊僅包含靜態內容，完全沒有互動控制元件，請改用 alert 角色。
作為 dialog 角色的一種，dialog 角色的狀態、屬性和鍵盤焦點要求同樣適用於 alertdialog 角色。
由於其緊急性質，會中斷使用者工作流程，因此警報對話方塊應為 模態 的。
警報對話方塊必須至少包含一個可聚焦的控制元件 — 例如“確認”、“關閉”和“取消” — 並且在警報對話框出現時，焦點必須移到該控制元件上。警報對話方塊還可以包含其他互動控制元件，例如文字欄位和複選框。
alertdialog 角色不應被用作其他對話方塊的替代品，包括不需要確認的 alert 對話方塊（Window.alert()）和提示（Window.prompt()）。
僅新增 role="alertdialog" 並不足以使警報對話方塊可訪問。還需要完成以下操作：
- 必須正確標記警報對話方塊
- 必須正確管理鍵盤焦點
alertdialog 必須有一個可訪問名稱，該名稱使用 aria-labelledby 或 aria-label 定義。警報對話方塊文字必須使用 aria-describedby 具有 可訪問描述。
關聯的 WAI-ARIA 角色、狀態和屬性
aria-labelledby-
使用此屬性為 alertdialog 標示標題。
aria-labelledby屬性通常是用於為 alertdialog 命名的元素的 ID。 aria-describedby-
使用此屬性來包含警報對話方塊內容的描述。
aria-describedby屬性的值通常是包含警報對話方塊訊息的元素的 ID，訊息通常緊跟在標題之後。
示例
示例 1：一個基本的警報對話方塊
<div
role="alertdialog"
aria-labelledby="dialog1Title"
aria-describedby="dialog1Desc">
<div role="document" tabindex="0">
<h2 id="dialog1Title">Your login session is about to expire</h2>
<p id="dialog1Desc">To extend your session, click the OK button</p>
<button>OK</button>
</div>
</div>
上面的程式碼片段展示瞭如何標記一個僅提供訊息和“確定”按鈕的警報對話方塊。
示例 2：帶有兩個選項的確認對話方塊
<div
id="alert_dialog"
role="alertdialog"
aria-modal="true"
aria-labelledby="dialog_label"
aria-describedby="dialog_desc">
<h2 id="dialog_label">Confirmation</h2>
<div id="dialog_desc">
<p>Are you sure you want to delete this image?</p>
<p>This change can't be undone.</p>
</div>
<ul>
<li>
<button id="close-btn" type="button">No</button>
</li>
<li>
<button id="confirm-btn" type="button" aria-controls="form">Yes</button>
</li>
</ul>
</div>
document.getElementById("close-btn").addEventListener("click", () => {
closeDialog();
});
document.getElementById("confirm-btn").addEventListener("click", (event) => {
deleteFile();
});
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # alertdialog |