浏览器需要什么来支持HTML5文档大纲？

Question

简而言之，HTML5规范允许我们使用多个h1元素。 然而，关于这一特征存在相当大的争议，有2个主要声明为什么不使用它。

1.搜索引擎优化：主要是可疑的声称，搜索机器人不支持它，未经证实的声称它将“混淆”他们。 但是，让我们将这种推测推迟到其他帖子。

2.用户代理不支持它：不幸的是，这背后的推理似乎不如SEO声明。

HTML5文档的章节和大纲的MDN文章包含以下警告：

重要提示：目前在图形浏览器或辅助技术用户代理中没有已知的轮廓算法实现，尽管该算法是在其他软件中实现的，例如一致性检查器。 因此，不能依赖轮廓算法将文档结构传达给用户。 建议作者使用标题等级（h1-h6）来传达文件结构。

但它不像使用新文档大纲结构的文档不起作用。 为了亲自了解浏览器的反应，我创建了一些样本，这些样本可以在同一页面上使用多个独立文章。

HTML4：

 <!DOCTYPE html> <html> <head> <title>Outline HTML4</title> </head> <body> <div> <h1>Section List</h1> <div> <h2>Alpha</h2> <p>Alpha is the first letter of the greek alphabet.</p> <h3>Subheading</h3> <p>This is just filler.</p> </div> <div> <h2>Beta</h2> <p>Beta is the second letter of the greek alphabet.</p> <h3>Subheading</h3> <p>This is just filler.</p> </div> </div> </body> </html> 

HTML5：

 <!DOCTYPE html> <html> <head> <title>Outline HTML5</title> </head> <body> <main> <h1>Section List</h1> <section> <h1>Alpha</h1> <p>Alpha is the first letter of the greek alphabet.</p> <h2>Subheading</h2> <p>This is just filler.</p> </section> <section> <h1>Beta</h1> <p>Beta is the second letter of the greek alphabet.</p> <h2>Subheading</h2> <p>This is just filler.</p> </section> </main> </body> </html> 

我看到的唯一潜在的视觉问题是浏览器可能会将所有h1标签渲染为相同的大小，但Firefox和Chrome的默认用户代理样式目前减少了article中的h1标签的大小， aside nav和section标签（似乎表示浏览器确实识别此功能）。 另外，我们没有任何问题，识别第二个h2标头意味着最后一个h2部分的结束，所以我认为没有任何理由我们会遇到多个h1标签的视觉问题。

虽然我不能说出那些依赖于屏幕阅读器的人更喜欢浏览网页，但Apple的VoiceOver确实可以正确识别每个标题级别。

我的问题是，图形浏览器或辅助技术究竟需要做些什么才能“支持”他们尚未做过的大纲？

Answer 1

以Jaws屏幕阅读器为例： http ：//webaim.org/resources/shortcuts/jaws#headings

它提供了转到同一级别的下一个标题的快捷方式。 但是添加了HTML5 section和article标签。 它受到一些预防措施。

当你有这样的代码时：

<h1>Main title</h1>
<h2>sub part 1</h2>
<section>
   <h1>first section inside sub part 1</h1>
   <h2>subpart inside first section of sub part 1</h2>

</section>
<h2>sub part 2</h2>

如果您当前正在关注h2 “子部分1”并按下键2您可能会进入“子部分2” （即同一级别的下一个标题），但辅助技术将引导您进入下一个DOM读取顺序中的h2。

出于这个原因， 您应该尊重完整文档中标题的层次结构，就好像没有任何部分一样 （即使它尊重HTML5）。

现在，您可以完美地想象在body有两个h1但是您希望有一些方法来读取当前页面的title而不依赖于title标记，标记标记可以包含一些其他元素，如网站名称，类别/层次结构在网站上。 因此，您应该在body元素中仅使用一个h1元素作为当前页面的标题。

Answer 2

样式修改非常肤浅。 您可以看到，在下面的示例中，h1“gamma”标题的h2子标题以比“h1”gamma标题本身更大的字体呈现。

 <!DOCTYPE html> <html> <head> <title>Outline HTML5</title> </head> <body> <main> <h1>Section List</h1> <section> <h1>Alpha</h1> <p>Alpha is the first letter of the greek alphabet.</p> <h2>Subheading</h2> <p>This is just filler.</p> <section> <h1>Gamma</h1> <p>Gamma is the third letter of the greek alphabet.</p> <h2>Subheading</h2> <p>This is just filler.</p> </section> </section> <section> <h1>Beta</h1> <p>Beta is the second letter of the greek alphabet.</p> <h2>Subheading</h2> <p>This is just filler.</p> </section> </main> </body> </html> 

在我看来，浏览器需要从大纲算法中计算每个元素的分段级别，然后通过CSS伪类公开它 - 例如div:level(3)或:matches(h1, h2, h3, h4, h5, h6):level(4)或just :level(2)并通过JavaScript将其作为元素状态公开，例如if (document.getElementById("myElement").level == 4) { ... }

Answer 3

但它不像使用新文档大纲结构的文档不起作用。

为什么它不起作用？ 它们只是HTML元素，并且包含多个h1标记完全在浏览器渲染容量中。

就像你提到的，要考虑的问题是样式。 除非您为不同的h1调整样式，否则它们可能都具有相同的视觉特征，例如大小。

我的问题是，图形浏览器或辅助技术究竟需要做些什么才能“支持”他们尚未做过的大纲？

用户代理呈现HTML代码。 如前所述，浏览器可以轻松呈现多个h1并且根据实现 ，HTML5元素。

然而， 大纲是另一回事。 大纲基本上是DOM中的部分列表。 通常，可以以有用且有指导性的方式向用户呈现该概要。

使用这个HTML大纲工具 ，我在http://www.dell.com上打了一针 ，它生成了一个干净，有条理的网站大纲。

你强调的警告是，HTML5 大纲算法没有得到广泛支持，也无法传达类似的有用结果。

4.3.10.1创建大纲

目前在图形浏览器或辅助技术用户代理中没有已知的轮廓算法实现，尽管该算法在诸如一致性检查器之类的其他软件中实现。 因此，不能依赖轮廓算法将文档结构传达给用户。 建议作者使用标题等级（h1-h6）来传达文件结构。 （强调我的）

这并不意味着代码不起作用，只是在语义上它可能是弱的和/或无用的。

更多信息：

• HTML5文档大纲
• 4.3.10.1创建大纲

Answer 4

浏览器需要什么来支持HTML5文档大纲？

根据HTML5中的概述 - 用于HTML和XHTML浏览器的词汇表和相关API需要支持切片内容和切片根元素。

该警告仅表示到目前为止（在发布之日）文档编辑器未知任何实现。