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

Question

简而言之，HTML5规范允许我们使用多个h1元素。但是，关于此功能存在很多争议，关于为什么不使用它有 2 个主要主张。

1. SEO： 主要是可疑的声称搜索机器人不支持它，而未经证实的声称它将 "confuse" 它们。但是，让我们将此类猜测推迟到其他帖子。

2。用户代理不支持它： 不幸的是，这背后的原因似乎不如 SEO 声称的那么清楚。

Sections and Outlines of an HTML5 Document 的 MDN 文章具有以下警告：

Important: There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

但使用新文档大纲结构的文档又不是不行。为了亲自了解浏览器的反应，我创建了一些示例，这些示例利用了同一页面上的多篇 stand-alone 文章。

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 的默认 user-agent 样式减小 article、aside、nav 和 section 标签内的 h1 标签的大小（似乎表明浏览器 do 识别此功能）。此外，我们没有任何问题可以识别第二个 h2 header 表示最后一个 h2 部分的结尾，所以我看不出有任何视觉问题多个 h1 个标签。

虽然我无法说明那些依赖屏幕阅读器的人更喜欢浏览网页，但 Apple 的 VoiceOver 确实正确识别了每个 header 级别。

我的问题是，图形浏览器或辅助技术究竟必须对"support"他们还没有做的大纲做些什么？

Answer 1

But it's not like a document which uses the new document outline structure doesn't work.

为什么它不起作用？它们只是 HTML 个元素，包含多个 h1 标签完全在浏览器的渲染能力之内。

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

My question is, what exactly would a graphical browser or assistive technology have to do to "support" the outline that they don't do already?

用户代理呈现 HTML 代码。如前所述，浏览器可以轻松呈现多个 h1 和 depending on implementation、HTML5 个元素。

然而，outline是另外一回事。大纲本质上是 DOM 中的部分列表。通常，此大纲可以以有用且有指导意义的方式呈现给用户。

使用这个 HTML outlining tool, I punched in http://www.dell.com，它生成了一个干净、有条理的网站轮廓。

您突出显示的警告是说 HTML5 大纲算法 未得到广泛支持，无法传达类似的有用结果。

4.3.10.1 Creating an outline

There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure. (emphasis mine)

这并不意味着代码不起作用，只是语义上它可能很弱and/or没用。

更多信息：

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>

在我看来，浏览器需要从outline算法中计算出每个元素的sectioning level，然后通过一个CSS pseudo-class暴露出来- 例如div:level(3) 或 :matches(h1, h2, h3, h4, h5, h6):level(4) 或仅 :level(2) 并通过 JavaScript 将其作为元素状态公开，例如if (document.getElementById("myElement").level == 4) { ... }

Answer 3

What would browsers need to support the HTML5 document outline?

根据Outlines in HTML5 - A vocabulary and associated APIs for HTML and XHTML，浏览器需要支持分段内容和分段根元素。

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

Answer 4

以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 "sub part 1" 并按下 2 键，您应该会转到 "sub part 2"（即同一级别的下一个标题）但辅助技术将引导您进入 DOM 阅读顺序中的下一个 h2。

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

现在，您可以完美地想象在 body 中有两个 h1，但您希望有一些方法可以在不依赖 title 的情况下阅读当前页面的标题标签可以包含一些其他元素，如网站名称、网站中的 category/hierarchy。因此，您应该在 body 元素中仅使用一个 h1 元素作为当前页面的标题。

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

What would browsers need to support the HTML5 document outline?

html

browser

accessibility

semantic-markup