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 |