我应该在对话框中使用 <h1> 吗？
Should I use <h1> in a dialog?
HTML 标题标签的使用方式应保持语义结构（对于 SEO 和可访问性）。通常这意味着当前页面标题只有一个 <h1>，从那里嵌套了较小的标题。
然而，对话框通常是动态创建的，这意味着它们的 html 添加在 <body> 的末尾。在这些情况下，似乎任何对话框标题编号都应以 <h1> 开头，因为它们的 html 位于任何现有标题结构之外。
举个实际例子：
- 我们有一个带有 "My Profile"
<h1> 标题的用户个人资料页面
- 单击用户图标会打开一个对话框
- 这个对话框有一个标题 "Upload a Picture of Yourself"
这个对话框是否应该使用 <h1> 标题，即使它在语义上属于现有的 "My Profile" <h1>？
是的，最好为它们使用单独的标题标签。但您也可以尝试使用 HTML 的嵌套 header 语法。
<h1> My Profile </h1>
......
<h1> Upload a Picture of Yourself </h1>
使用 H1 作为对话框标题绝对是个好主意。
- 你必须在你的标题中包含并尊重标题顺序，即不要直接从 H2 跳到 H4，但在 WCAG 中从来没有说必须只有一个 H1。如果在页面结构中有意义，那么拥有多个 H1 是完全有效的。
专家们并不完全同意 H1 是否应该始终单独存在并且始终作为页面标题；这是 WCAG 解释中的常见分歧。考虑到屏幕 reader 用户经常从一个标题导航到另一个标题，如果一般的标题有策略地放置在内容最重要部分的开头而不是无意义的地方肯定会更好。页面的开头通常本身并不那么重要，因为它不是主菜单的确切位置，也不是 "where you are" 指示，也不是真正的 current/important 内容。
- 当对话框出现时，它的标题和开头肯定是根据上面第1点直接跳转的重要内容，并且在对话框出现的那一刻和它处于活动状态时都是如此。
- 对话框通常是模态的，这意味着您不能在对话框打开时与对话框之外的内容进行交互。在这种情况下，对话框外的内容应该是完全无法访问和不可见的，包括屏幕 reader 用户（这通常通过适当使用 aria-hidden 来完成）。
这意味着，只要对话框处于活动状态，如果它的标题是 H1，则该 H1 是页面中唯一一个单独的 H1（因为其他 H1 在逻辑上是隐藏的）。因此，无论如何，无论您对多个 H1 的存在有何看法，您都在尊重与 WCAG 和您自己的合同。
您只需要注意对话框内容只有在对话框有效打开时才可访问和可见，这是良好可访问性所必需的（我经常看到应用程序，其中当前不活动的对话框的内容仍然可读；这很烦人并且非常混乱）。
希望通过这三点让您相信，将对话标题放入 H1 中，您将获得一切胜利，绝对不会失去任何东西。
虽然使用 h1 作为模式标题是有意义的，因为您在视觉上看起来像是在网页上的新内容中，但您仍然在相同的上下文中游泳 - 所以对于屏幕 reader 用户，h2 是更好的无障碍用户体验。当您在同一上下文中导航时，这将防止屏幕 reader 用户混淆。
作为 no-vision 屏幕 reader 用户查看此用户流程。
- 用户打开一个新网页，页面标题为
Contact Us。联系我们是 h1。 SR 将显示为“1 级标题，联系我们。您当前位于 1 级标题”。
- 用户通过 Tab 键或使用键盘箭头键在表单中优雅地键入信息。
- 用户最终选择或导航“提交”按钮并单击输入。
- 打开一个对话框或模式，标题为“确认”，内容为“您确定要提交吗？”。
- 如果您使用
h1，您将向 SR 用户发出信号，表明您在新页面、新内容、新上下文中。
- 虽然如果您使用
h2，您将向 SR 用户发出信号，表明您在同一页面上，提交表单时的上下文相同，但内容不同 - 您处于模态- 正如 header 所表达的那样。
另请注意，如果您使用语义 html，在您的标记中使用适当的角色和状态，您的屏幕 Reader 将正确地告诉您的用户他们正处于模态对话框中。
QuentinC 是正确的，“在 WCAG 中从来没有说必须只有一个 H1`。但这就是 WCAG 的美妙之处——它永远不会告诉你该做什么，但它会指导你，什么不做。
下面是 w3.org 网站中的对话框小部件模式示例：https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
这里有更多关于使用语义标记传达信息的上下文：https://www.w3.org/WAI/WCAG21/Techniques/failures/F2.html
HTML 标题标签的使用方式应保持语义结构（对于 SEO 和可访问性）。通常这意味着当前页面标题只有一个 <h1>，从那里嵌套了较小的标题。
然而，对话框通常是动态创建的，这意味着它们的 html 添加在 <body> 的末尾。在这些情况下，似乎任何对话框标题编号都应以 <h1> 开头，因为它们的 html 位于任何现有标题结构之外。
举个实际例子：
- 我们有一个带有 "My Profile"
<h1>标题的用户个人资料页面 - 单击用户图标会打开一个对话框
- 这个对话框有一个标题 "Upload a Picture of Yourself"
这个对话框是否应该使用 <h1> 标题，即使它在语义上属于现有的 "My Profile" <h1>？
是的，最好为它们使用单独的标题标签。但您也可以尝试使用 HTML 的嵌套 header 语法。
<h1> My Profile </h1>
......
<h1> Upload a Picture of Yourself </h1>
使用 H1 作为对话框标题绝对是个好主意。
- 你必须在你的标题中包含并尊重标题顺序，即不要直接从 H2 跳到 H4，但在 WCAG 中从来没有说必须只有一个 H1。如果在页面结构中有意义，那么拥有多个 H1 是完全有效的。 专家们并不完全同意 H1 是否应该始终单独存在并且始终作为页面标题；这是 WCAG 解释中的常见分歧。考虑到屏幕 reader 用户经常从一个标题导航到另一个标题，如果一般的标题有策略地放置在内容最重要部分的开头而不是无意义的地方肯定会更好。页面的开头通常本身并不那么重要，因为它不是主菜单的确切位置，也不是 "where you are" 指示，也不是真正的 current/important 内容。
- 当对话框出现时，它的标题和开头肯定是根据上面第1点直接跳转的重要内容，并且在对话框出现的那一刻和它处于活动状态时都是如此。
- 对话框通常是模态的，这意味着您不能在对话框打开时与对话框之外的内容进行交互。在这种情况下，对话框外的内容应该是完全无法访问和不可见的，包括屏幕 reader 用户（这通常通过适当使用 aria-hidden 来完成）。 这意味着，只要对话框处于活动状态，如果它的标题是 H1，则该 H1 是页面中唯一一个单独的 H1（因为其他 H1 在逻辑上是隐藏的）。因此，无论如何，无论您对多个 H1 的存在有何看法，您都在尊重与 WCAG 和您自己的合同。 您只需要注意对话框内容只有在对话框有效打开时才可访问和可见，这是良好可访问性所必需的（我经常看到应用程序，其中当前不活动的对话框的内容仍然可读；这很烦人并且非常混乱）。
希望通过这三点让您相信，将对话标题放入 H1 中，您将获得一切胜利，绝对不会失去任何东西。
虽然使用 h1 作为模式标题是有意义的，因为您在视觉上看起来像是在网页上的新内容中，但您仍然在相同的上下文中游泳 - 所以对于屏幕 reader 用户，h2 是更好的无障碍用户体验。当您在同一上下文中导航时，这将防止屏幕 reader 用户混淆。
作为 no-vision 屏幕 reader 用户查看此用户流程。
- 用户打开一个新网页，页面标题为
Contact Us。联系我们是h1。 SR 将显示为“1 级标题，联系我们。您当前位于 1 级标题”。 - 用户通过 Tab 键或使用键盘箭头键在表单中优雅地键入信息。
- 用户最终选择或导航“提交”按钮并单击输入。
- 打开一个对话框或模式，标题为“确认”，内容为“您确定要提交吗？”。
- 如果您使用
h1，您将向 SR 用户发出信号，表明您在新页面、新内容、新上下文中。 - 虽然如果您使用
h2，您将向 SR 用户发出信号，表明您在同一页面上，提交表单时的上下文相同，但内容不同 - 您处于模态- 正如 header 所表达的那样。
另请注意，如果您使用语义 html，在您的标记中使用适当的角色和状态，您的屏幕 Reader 将正确地告诉您的用户他们正处于模态对话框中。
QuentinC 是正确的，“在 WCAG 中从来没有说必须只有一个 H1`。但这就是 WCAG 的美妙之处——它永远不会告诉你该做什么，但它会指导你，什么不做。
下面是 w3.org 网站中的对话框小部件模式示例：https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
这里有更多关于使用语义标记传达信息的上下文：https://www.w3.org/WAI/WCAG21/Techniques/failures/F2.html