ARIA：alertdialog 角色
alertdialog 角色用於模態警報對話方塊，該對話方塊會中斷使用者的工作流程以傳達重要訊息並需要響應。
描述
alertdialog 角色用於通知使用者有關需要使用者立即注意的緊急資訊。在包含對話方塊的元素中包含 role="alertdialog" 有助於輔助技術將內容識別為分組且與頁面其餘內容分隔開。示例包括需要確認的錯誤訊息和其他操作確認提示。
顧名思義，alertdialog 是 dialog 和 alert 角色的組合。alertdialog 是一種 dialog，其用例與 alert 類似，但需要使用者響應。
注意：alertdialog 角色僅應用於具有關聯互動式控制元件的警報訊息。如果警報對話方塊僅包含靜態內容，完全沒有互動式控制元件，則應使用 alert。
作為一種對話方塊，dialog 角色的狀態、屬性和鍵盤焦點要求也適用於 alertdialog 角色。
由於其緊急性質會中斷使用者的工作流程，因此警報對話方塊必須始終 模態。
警報對話方塊必須至少有一個可聚焦控制元件（例如“確認”、“關閉”和“取消”），並且當警報對話框出現時，焦點必須移動到該控制元件。Alertdialogs 可以有其他互動式控制元件，例如文字欄位和複選框。
alertdialog 角色不能用作其他對話方塊的替代，包括不需要確認的 alert 對話方塊 (Window.alert()) 和提示 (Window.prompt()).
僅新增 role="alertdialog" 並不足以使警報對話方塊無障礙。還需要執行以下操作：
- 警報對話方塊必須正確標記
- 鍵盤焦點必須正確管理
alertdialog 必須有一個無障礙名稱，使用 aria-labelledby 或 aria-label 定義。警報對話方塊文字必須有一個 無障礙描述，使用 aria-describedby。
示例
示例 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 type="button" onclick="closeThis()">No</button>
</li>
<li>
<button
type="button"
aria-controls="form"
id="delete_file_confirm"
onclick="deleteFile()">
Yes
</button>
</li>
</ul>
</div>
關聯的 WAI-ARIA 角色、狀態和屬性
aria-labelledby-
使用此屬性為 alertdialog 新增標籤。
aria-labelledby屬性通常是用於為 alertdialog 設定標題的元素的 ID。 aria-describedby-
使用此屬性來包含 alertdialog 內容的描述。
aria-describedby屬性的值通常是包含 alertdialog 訊息的元素的 ID，通常位於標題之後。
規範
| 規範 |
|---|
| 可訪問的富網際網路應用程式 (WAI-ARIA) # alertdialog |
| 可訪問的富網際網路應用程式 (WAI-ARIA) # alertdialog |