在对话框中使用 <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> ok imho

Answer 1

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

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

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

很可能该对话框不适合其余内容的流程，因此它应该是页面<h1> 的子集（因为它是关于页面的对话框），从而使对话框采用@987654334 @。

如果您使用选项卡式界面，并且您已将选项卡构建为每个<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> 在语义上是不正确的。

Answer 2

从语义上讲，您可以使用h1 开始文档的任何新部分（部分、文章、导航、旁边、页眉、页脚）。

它会随着 HTML 5.1 改变，但 h1 可能仍用于 dialog (*) 元素，因为它们被视为“分节根”。见http://w3.org/TR/html51/sections.html#headings-and-sections)。

某些元素被称为分节根，包括 blockquote 和 td 元素。这些元素可以有自己的轮廓，但这些元素中的部分和标题不会为其祖先的轮廓做出贡献。

blockquotebodydetailsdialogfieldsetfiguretd

由于缺乏浏览器和无障碍技术的支持，虽然它“语义上”是正确的，但这并不意味着它是一个好的设计选择。作者应该更喜欢跨部分保留 h1..h6 层次结构，以获得一个连贯的、层次化/嵌套的文档大纲 (h1>h2>h3>...h6) 将提供给辅助技术。

(*) 请注意，正如另一位用户所指出的那样，必须使用dialog 而不是role=dialog 元素才能获得完全支持。