我应该在对话框中使用 <h1> 吗？答案

【问题标题】：Should I use <h1> in a dialog?我应该在对话框中使用 <h1> 吗？
【发布时间】：2018-12-28 06:02:21
【问题描述】：

HTML 标题标签的使用方式应保持语义结构（对于 SEO 和可访问性）。通常，这意味着当前页面标题只有一个 <h1>，从那里嵌套了较小的标题。

但是，对话框通常是动态创建的，这意味着它们的 html 被添加到 <body> 的末尾。在这些情况下，似乎任何对话框标题编号都应以 <h1> 开头，因为它们的 html 位于任何现有标题结构之外。

举个实际例子：

我们有一个用户个人资料页面，其标题为“我的个人资料”<h1>
单击用户图标会打开一个对话框
此对话框的标题为“上传您自己的照片”

这个对话框是否应该使用<h1> 标题，即使它在语义上属于现有的“我的个人资料”<h1>？

【问题讨论】：

标签： html dialog accessibility semantic-markup html-heading

【解决方案1】：

为对话框标题使用 H1 绝对是个好主意。

你必须坚持你的标题并尊重标题顺序，即不要直接从 H2 跳转到 H4，但在 WCAG 中从来没有说必须只有一个 H1。如果在页面结构中有意义，那么拥有多个 H1 是完全有效的。专家们并不完全同意 H1 是否应该始终单独并且始终是页面标题；这是 WCAG 解释中常见的不一致。鉴于屏幕阅读器用户经常从一个标题导航到另一个标题，如果将标题总体上战略性地放置在内容最重要部分的开头而不是无意义的位置，那肯定会更好。页面的开头本身通常并不那么重要，因为它不完全是主菜单的位置，也不是“你在哪里”指示，也不是真正的当前/重要内容。
当一个对话框出现时，它的标题和开头绝对是根据上面第1点直接跳转的重要内容，并且在对话框出现的那一刻，只要它处于活动状态，就是这种情况。
对话框通常是模态的，这意味着您不能在对话框打开时与对话框之外的内容进行交互。在这种情况下，对话框之外的内容应该是完全无法访问和不可见的，包括屏幕阅读器用户（这通常通过适当使用 aria-hidden 来完成）。这意味着，只要对话框处于活动状态，如果其标题为 H1，则该 H1 是页面中唯一的一个（因为其他的在逻辑上是隐藏的）。因此，无论如何，无论您对多个 H1 的存在有何看法，您都在尊重您与 WCAG 和您自己的合同。您只需要注意对话框内容只有在对话框有效打开时才可访问和可见，无论如何都需要良好的可访问性（我经常看到当前非活动对话框的内容仍然可读的应用程序；这很烦人非常混乱）。

希望这三点让您相信，将对话标题放在 H1 中，您可以赢得一切，绝对不会失去任何东西。

【讨论】：

好建议。对话框肯定需要一个标题。是否是 h1、h2、h3 等取决于您，只要它有标题即可。一些 a11y 专家更喜欢它始终是 h1，因为它有点像一个新页面，而其他人更喜欢使用与当前页面一致的标题级别。两种意见都不比另一种更正确。
感谢您提供如此深思熟虑和实用的答案。

【解决方案2】：

是的，最好为它们使用单独的标题标签。但您也可以尝试使用 HTML 的嵌套标题语法。

<h1> My Profile </h1>
......
<h1> Upload a Picture of Yourself </h1>

【讨论】：