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

Ale*_*ara 7 html browser html5 accessibility semantic-markup

简而言之,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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

唯一潜在的视觉问题,我看是,浏览器可能使所有的h1标签相同的大小,但是默认用户代理样式Firefox和Chrome浏览器目前减小的尺寸h1内标签article,aside,nav,和section标签(似乎指示浏览器确实识别此功能).另外,我们没有任何问题,识别第二个h2标题意味着最后一个h2部分的结尾,所以我认为没有任何理由我们会有多个h1标签的视觉问题.

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

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

Mic*_*l_B 2

但这并不是说使用新文档大纲结构的文档不起作用。

为什么行不通?它们只是 HTML 元素,并且包含多个h1标签完全在浏览器渲染能力范围内。

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

我的问题是,图形浏览器或辅助技术到底需要做什么才能“支持”他们尚未做到的大纲?

用户代理呈现 HTML 代码。如前所述,浏览器可以轻松呈现多个h1s 以及HTML5 元素(具体取决于实现) 。

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

使用这个HTML 大纲工具,我输入了http://www.dell.com,它生成了一个干净、有组织的网站大纲。

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

4.3.10.1 创建大纲

尽管该算法在其他软件(例如一致性检查器)中实现,但目前在图形浏览器或辅助技术用户代理中尚无已知的大纲算法实现。因此,不能依赖大纲算法向用户传达文档结构。建议作者使用标题等级 (h1-h6) 来表达文档结构。(强调我的)

这并不意味着代码不起作用,只是从语义上讲它可能很弱和/或无用。

更多信息: