Question

HTML标题标签应以维护语义结构（用于SEO和可访问性）的方式使用。通常，这表示当前页面标题为单个<h1>，而从此处嵌套的标题较少。

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

举一个实际的例子：

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

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

Answer 1

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

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

希望这三点让您明白，将对话标题放在H1中，您赢了一切，也没有损失。

Answer 2

是的，最好对两个标签都使用单独的标题标签。但是，您也可以尝试使用HTML的嵌套标头语法。

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

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

2 个答案: