标记

这是基本标记，可以根据需要进行增强。请特别注意下一个代码片段后面的注释。

html

<!-- 1. The dialog container -->
<div
  id="your-dialog-id"
  aria-labelledby="your-dialog-title-id"
  aria-hidden="true"
>
  <!-- 2. The dialog overlay -->
  <div data-a11y-dialog-hide></div>
  <!-- 3. The actual dialog -->
  <div role="document">
    <!-- 4. The close button -->
    <button type="button" data-a11y-dialog-hide aria-label="Close dialog">
      &times;
    </button>
    <!-- 5. The dialog title -->
    <h1 id="your-dialog-title-id">Your dialog title</h1>
    <!-- 6. Dialog content -->
  </div>
</div>

<!-- 1. The dialog container -->
<div
  id="your-dialog-id"
  aria-labelledby="your-dialog-title-id"
  aria-hidden="true"
>
  <!-- 2. The dialog overlay -->
  <div data-a11y-dialog-hide></div>
  <!-- 3. The actual dialog -->
  <div role="document">
    <!-- 4. The close button -->
    <button type="button" data-a11y-dialog-hide aria-label="Close dialog">
      &times;
    </button>
    <!-- 5. The dialog title -->
    <h1 id="your-dialog-title-id">Your dialog title</h1>
    <!-- 6. Dialog content -->
  </div>
</div>

对话框容器。
- 它不是实际的对话框窗口，只是脚本交互的容器。
- 它必须有一个唯一的名称，如 data-a11y-dialog 用于通过 HTML 自动实例化，或作为 id 用于 JavaScript 实例化。
- 它可能需要一个类才能让您能够设计它的样式。
- 它应该有一个初始的 aria-hidden="true" 属性，以避免页面加载时出现“闪烁的未隐藏对话框”。
- 它可能具有alertdialog 角色，使其表现得像警报对话框。
- 它不必具有 aria-labelledby 属性，但建议这样做。它应该与对话框标题的 id 匹配（如果需要的话仍然可以隐藏）。
对话框覆盖。
- 它不必具有 data-a11y-dialog-hide 属性，但建议这样做。单击对话框外部时，它会隐藏对话框。
- 如果对话框是警报对话框，则它不应具有 data-a11y-dialog-hide 属性。
实际的对话框。
- 它应该被设计为一个对话框（固定在页面顶部）。
- 它应该具有 role="document" 属性以改善 NVDA 中的支持。
- 该脚本不与其进行任何交互。
对话框关闭按钮。
- 它必须具有 type="button" 属性。
- 它确实必须具有 data-a11y-dialog-hide 属性。
- 如果您使用图标作为内容，它必须具有 aria-label 属性（或其他可访问的名称）。
对话框标题。
- 它应该具有与“对话框标题”不同的内容。
- 它可以具有与 your-dialog-title-id 不同的 id。
对话框内容。
- 这是您的对话内容所在的位置。

标记 ​

标记