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

Question

标题应该代表页面的结构并相应地嵌套。 w3.org声明如下:

Exception for fixed page sections

In fixed sections of the page, for example in sidebars, the heading ranks should not change depending on the ranks in the content area. In those cases, consistency across pages is more important.

模态对话框也是如此吗？毕竟，它们通常不是实际页面结构的一部分。我们应该为模式对话框使用哪个标题？
Bootstrap 似乎 always use h5s .
作为示例，我们在页脚中使用 Bootstrap 模式，它显示有关我们应用程序版本的附加信息:

<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> .

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

唯一的异常(exception)是，如果您的模态在您的文档流中，那么最好使用适当的 <h>。与其在文档流中的位置相匹配的级别。

虽然我不确定为什么有人会想要在文档流中使用模式，因为这首先不是一个好习惯。