缺少<h2>的网页标题顺序规则



我们继承了一个网站,目前我们正在努力使其符合WCAG2.0 AA标准

其中一个页面不符合标题顺序规则,因为它有<h3><h4>标签,但没有优先的<h1><h2>

我们正在添加一个<h1>标签的过程中(因为所有的页面都应该有一个),但不需要<h2>标签,修改<h3><h4>将涉及各种jQuery代码和CSS的大规模重构

有什么技巧可以使页面易于访问吗?我讨厌把一个隐藏的<h2>标签放进去,因为屏幕阅读器可能会发现这个。或者他们忽略隐藏的标签,然后页面变得兼容?

您是在尝试满足WCAG 2.0 AA还是在尝试使页面可访问?

这些通常是相同的,但有时不是。

一个隐藏的<h2>将通过WCAG取决于你如何隐藏它。然而,这并不能使页面更易于访问。

虽然这可能很糟糕,但最好,最正确的方法是修复<h3> s和<h4> s,使其成为正确的级别(这是我的答案,其余的都是废话)。如果您提供一些代码示例并询问有关如何编写正则表达式或如何在整个继承系统中编写这些替换的提示,您的问题可能会更合适。

如果你被告知你没有时间做正确的事情,那么代码示例(或示例站点)可能仍然有助于获得一些指导。

如果你真的关心可访问性,给一个空的h2(即使是隐式的,当你省略它的情况下)可能不会给线索,在一些屏幕阅读器,当用户将浏览文档的大纲(1)时,宣布的部分。

话虽如此,我找不到任何地方(无论是WCAG还是HTML5文档)说你不能省略一个级别的标题。

唯一的官方要求(对于HTML5.1)是使用"低级别标题"。开始新的子节,这应该意味着你可以在h1下面直接使用h3,但不能使用另一个h1

甚至WCAG也给出了一个使用省略的等级的例子,说明这个例子并不打算规定特定部分的级别。

(1) HTML5.1提供了一个大纲算法,我们可以阅读"隐含标题";或者当有标题内容元素

时使用秩

编辑:正如评论中所说,HTML生活标准现在禁止跳过标题级别,尽管符合HTML的网页仍然不是可访问性的必要条件。请参阅此处的讨论:https://github.com/whatwg/html/issues/8366

我以前真的见过这种情况,实际上我自己也掉进了这个陷阱。通过对h3和h4应用样式,可以使页面看起来像某种方式。然而,看看头标记的意义,它们的目的是为文档添加语义,这一点我们都很清楚。因此,有一个有h3但没有h2的文档大纲有意义吗?屏幕阅读器和其他辅助工具使用这个头信息,有些人可能会感到困惑。我最具影响力的决策点是,"用户将如何消费这些信息?"他们有能力消费吗?它是有意义的跳过一个标题级别?我最初认为不是,但请让我知道你的不同意见!

我想说确保遵从性的最好方法是重构javascript/CSS中的代码。要隐藏元素,可以使用hidden属性或aria-hidden。

https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/

最新更新