alertdialog

适用场景

仅用于中断性场景：阻止用户继续操作的错误、“确定要删除？“类型的确认操作、离开页面时的未保存更改警告。将 alertdialog 用于常规模态框是过度使用——普通模态框应使用 role="dialog"。

与 role="dialog" 的区别在于，alertdialog 出现时会像 role="alert" 一样被播报——强制、即时。这对真正的中断场景是合适的；滥用则会导致屏幕阅读器疲劳。

aria-labelledby（指向标题）和 aria-describedby（指向正文）均为必填属性。alertdialog 内必须至少包含一个可聚焦的按钮，供用户关闭对话框。

键盘与焦点约定

依据 APG alertdialog 模式：

• alertdialog 打开时，焦点移至其内部——通常移至最安全的按钮（取消），避免意外按下 Enter 确认破坏性操作。
• Tab / Shift+Tab 在对话框内循环切换焦点。
• Escape 关闭 alertdialog 并将焦点返回至触发元素。
• alertdialog 打开期间，页面其余部分处于不可交互状态。

初始焦点的选择至关重要：对于”删除？“类提示，默认聚焦取消按钮——绝不聚焦破坏性操作按钮。

常见错误

• 将 role="alertdialog" 用于所有模态框。屏幕阅读器会在每次模态框打开时发出强制播报，持续干扰用户。
• 初始焦点落在破坏性操作按钮（删除、放弃）上——误触 Enter 即可清除用户的工作成果。
• 正文缺少 aria-describedby。用户只能听到标题和按钮，却听不到警告内容。
• alertdialog 内没有按钮——用户无法关闭对话框，而该角色在语义上要求用户必须作出响应。
• alertdialog 在超时后自动关闭。这违背了”需要用户响应”的语义。

示例

<div
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confTitle"
  aria-describedby="confDesc"
>
  <h2 id="confTitle">Delete draft?</h2>
  <p id="confDesc">"Untitled draft (March 12)" will be permanently deleted. This action cannot be undone.</p>
  <button type="button" autofocus>Cancel</button>
  <button type="button">Delete draft</button>
</div>