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 |