html - 在对话框中使用 <h1> 在语义上是否正确？

Question

我已经浏览了 The Incredible Accesible Dialog v3 的代码我注意到他们正在使用 <h1>标签

<div id="modal" aria-hidden="false" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog">
    <div id="modalDescription" class="screen-reader-offscreen">...</div>
    <h1 id="modalTitle">...</h1>
    <p>...</p>
    <form name="form1" onsubmit="return false;">...</form>
</div>

所以这让我开始思考，这实际上在语义上是正确的吗？我的意思是每个人都一直说应该只有 1 <h1>在一份文件中。

请注意，在先前版本的对话框中，他们为对话框提供了 role="document"这使得使用 <h1>好吧恕我直言

Answer 1

我知道你已经接受了一个答案，但这并不完全正确。

当然，您可以输入 <h1>在对话中，什么都不会着火。然而，这在技术上是不正确的。

标题级别应该代表它在页面结构中的位置。如果您的页面有一个 <h1> ，这是您最好的方法，那么对话框应该获得一个标题级别，该标题级别与其在页面结构(其内容)中的位置相对应。

该对话框很可能不适合其余内容的流程，因此它应该是页面 <h1> 的一个子集。 (因为它是关于页面的对话框)，使对话框带<h2> .

如果您使用选项卡式界面，并且您已将每个选项卡构建为 <h2> s，并且您的对话框适用于特定选项卡，那么您的对话框将采用 <h3> .

等等。

添加 role=document不会改变这一点(和 may be a mis-application of the document ARIA role，除非您明确地使用辅助技术进行测试以确保它按预期工作)。

您可以看到 all- <h1> model is now considered an anti-pattern in HTML 5.1 . W3C HTML validator现在将标记它。

您可以在 HTML5 规范的一位编辑撰写的文章中阅读有关结构标题方法的更多信息:Computer says NO to HTML5 document outline

因此，要回答您的原始问题，使用 <h1> 在语义上是不正确的。在一个对话框中。