ARIA：对话框角色

对话框是 Web 应用程序主窗口的子窗口。对于 HTML 页面，主应用程序窗口是整个 Web 文档，即 body 元素。

使用 dialog 角色标记对话框元素有助于辅助技术将对话框的内容识别为已分组并与页面其余内容隔离开来。但是，仅添加 role="dialog" 并不足以使对话框可访问。此外，还需要执行以下操作

• 对话框必须正确标记
• 键盘焦点必须正确管理

以下部分介绍了如何满足这两个要求。

即使对话框本身不需要能够接收焦点，它仍然需要被标记。赋予对话框的标签将为对话框内的交互式控件提供上下文信息。换句话说，对话框的标签充当其内部控件的分组标签（类似于 <legend> 元素如何为 <fieldset> 元素内部的控件提供分组标签）。

如果对话框已经有一个可见的标题栏，则该栏内的文本可用于标记对话框本身。实现此目的的最佳方法是使用 aria-labelledby 属性到 role="dialog" 元素。此外，如果对话框除了对话框标题之外还包含其他描述性文本，则可以使用 aria-describedby 属性将此文本与对话框关联。以下代码片段显示了此方法

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">
    You can change your details at any time in the user account section.
  </p>
  <button>Close</button>
</div>

焦点管理

对话框对如何管理键盘焦点有特殊要求

• 对话框应始终至少有一个可聚焦的控件。对于许多对话框，将有一个按钮，如“关闭”、“确定”或“取消”。除了所需的控件外，对话框还可以包含任意数量的可聚焦元素，甚至包含完整的表单或其他容器小部件（如选项卡）。
• 当对话框出现在屏幕上时，键盘焦点（其控制取决于对话框的目的）应移动到对话框内的默认可聚焦控件。对于仅提供基本消息的对话框，它可能是“确定”按钮。对于包含表单的对话框，它可能是表单中的第一个字段。
• 对话框关闭后，键盘焦点应移回它在移动到对话框之前所在的位置。否则，焦点可能会被丢弃到页面的开头。
• 对于大多数对话框，预期行为是对话框的 Tab 顺序循环，这意味着当用户在对话框中的可聚焦元素之间切换 Tab 时，在最后一个元素到达后，将聚焦第一个可聚焦元素。换句话说，Tab 顺序应包含在对话框内并由对话框控制。
• 如果对话框可以移动或调整大小，请确保键盘用户和鼠标用户都可以执行这些操作。类似地，如果对话框提供特殊功能（如工具栏或上下文菜单），则键盘用户也必须能够访问和操作这些功能。

• 对话框可以是模态的或非模态的。当一个模态对话框出现在屏幕上时，无法与对话框外部的任何页面内容进行交互。换句话说，只要模态对话框显示，主应用程序 UI 或页面内容就会被视为暂时禁用。对于非模态对话框，在对话框显示时仍然可以与对话框外部的内容进行交互。请注意，对于非模态对话框，需要有一个全局键盘快捷键，允许焦点在打开的对话框和主页面之间移动。

aria-labelledby

使用此属性为对话框添加标签。通常，aria-labelledby 属性的值将是用于为对话框设置标题的元素的 id。

aria-describedby

使用此属性描述对话框的内容。

当使用dialog角色时，用户代理应执行以下操作

• 在操作系统可访问性 API 中将元素公开为对话框。

当对话框正确标记且焦点移动到对话框内的某个元素（通常是交互式元素，例如按钮）时，屏幕阅读器应宣布对话框的可访问角色、名称和可选描述，以及宣布获得焦点的元素。

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Subscription Form</h2>
  <p id="dialog1Desc">We will not share this information with third parties.</p>
  <form>
    <p>
      <label for="firstName">First Name</label>
      <input id="firstName" type="text" />
    </p>
    <p>
      <label for="lastName">Last Name</label>
      <input id="lastName" type="text" />
    </p>
    <p>
      <label for="interests">Interests</label>
      <textarea id="interests"></textarea>
    </p>
    <p>
      <input type="checkbox" id="autoLogin" name="autoLogin" />
      <label for="autoLogin">Auto-login?</label>
    </p>
    <p>
      <input type="submit" value="Save Information" />
    </p>
  </form>
</div>

工作示例

• jQuery-UI 对话框

• ARIA：警报对话框角色
• HTML <dialog> 元素