在对话中使用 <h1> 在语义上是否正确?

Is it semantically correct to use <h1> in a dialog?

我查看了 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

从语义上讲,您可以使用 h1.

开始文档的任何新部分(部分、文章、导航、旁白、页眉、页脚)

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

Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

blockquote body details dialog fieldset figure td

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

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

我知道你已经接受了一个答案,但不太正确。

当然,您可以在对话框中放置一个 <h1>,这样就不会着火了。然而,它在技术上是不正确的。

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

该对话框很可能不适合其余内容的流程,因此它应该是页面 <h1> 的子部分(因为它是关于页面的对话框),使得对话框取 <h2>.

如果您使用的是选项卡式界面,并且您已将每个选项卡构建为 <h2>,并且您的对话框适用于特定选项卡,那么您的对话框将采用 <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. The W3C HTML validator 现在会对其进行标记。

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

所以,要回答你最初的问题,不,在对话中使用 <h1> 在语义上是不正确的。