我们应该为模式对话框选择哪个标题？

Question

标题应代表页面的结构，并进行相应的嵌套。 w3.org声明以下内容：

固定页面部分的例外

在页面的固定部分中，例如在侧边栏中，标题等级不应随内容区域中的等级而变化。在这种情况下，跨页面的一致性更为重要。

对于模式对话框也是如此吗？毕竟，它们通常通常都不是实际页面结构的一部分。我们应该为模式对话框使用哪个标题？

Bootstrap似乎是always use h5s。

作为示例，我们在页脚中使用引导程序模式，该模式显示有关应用程序版本的其他信息：

<div id="v-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Version</h5>
    </div>
    <div class="modal-body">
      <p>Copyright © 2020 Foobar</p>
      <p>Version 1.3.7124.19131</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>
    </div>
  </div>
</div>

我们最近在a11y测试中将其标记为潜在问题。

Answer 1

由于即将在HTML 5.1中进行更改（我们不知道多个H1是否仍然有效，并且在HTML中的位置），我总是始终建议每页始终一个<h1>，以实现可访问性（和SEO）因为这是长期以来公认的做法。

这将根据您的情况使用<h2>。

我建议您这样做，因为您的模式位于文档其余部分的流程之外，因此从逻辑上讲应该是“顶级”标题级别。

唯一的例外是，如果您的模态在文档流中，那么此时最好使用适合其在文档流中位置的<h>级别。

尽管我不确定为什么有人会希望在文档流中使用模式，因为这首先不是一个好习惯。