甚至可以在具有全球导航,侧边栏,页脚等的网站上使用正确的标题级大纲......?

时间:2018-04-07 10:40:07

标签: html html5 sections html-heading

由于HTML5文档大纲未由任何用户代理实施https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines),因此我们留下了旧的标题级大纲。
我完全尊重标准,所以我试图找到一个好的标题级大纲来重用和适应。

使用 W3C验证工具和«show outline»选项,我检查了十几个网站,其中一些是由辅助功能传播者创建的: Mozilla Accessiweb Access42 WCAG W3C .... 但我没有找到满足所有先决条件的网站:

  • Mozilla博客https://blog.mozilla.org/)大纲明显错误:他们使用h2作为每篇文章的标题,但他们在页面中的其他部分使用了h3,所以看起来像每个全球内容(«更多Mozilla博客»,«更多文章»...)都链接到上一篇文章。

The Mozilla Blog homepage heading-level outline on Imgur

  • 多个网站在其标题层次结构中跳过一个或多个级别

A W3C post heading-level outline on Imgur

A WebAIM post heading-level outline on Imgur

  • Accessiweb 页面(http://www.accessiweb.org/index.php/expert-accessiweb-en-evaluation.html)具有连贯的大纲。
    它不是HTML5,所以开发人员不必处理像«nav element with no heading»这样的警告,最重要的是,这个网站每个页面的每个h1都是网站的标题(«Accessiweb» ),页面标题是一个h2 ......对于可访问性和搜索引擎优化看来是一个坏主意。

Heading-level outline from accessiweb.org on Imgur

如果h1是帖子的标题,应该为全局部分使用什么标题(如导航或页脚)?

  • 如果使用h1,则会违反“每页只有一个H1”的规则
  • 如果使用h2,则层次结构错误(参见Mozilla博客示例)
  • 如果一个人没有使用任何标题,那么W3C验证器会发出警告(“没有标题的nav元素”)

我甚至不知道屏幕阅读器用户是否在其标题列表中不断拥有全局部分是一件好事,他们可能会觉得听到« h1全球导航 - h1我的帖子标题很烦人 - h1订阅我们的时事通讯 - h1其他内容(页脚)»当他们在每页上使用标题导航时。
或者,也许恰恰相反,他们需要在每个页面上使用它,如果他们无法访问每个页面上的每个内容,那会很烦人吗?什么是头痛!

所以:是一个正确且连贯的标题级大纲,甚至可以在HTML文档大纲 之外的全局部分的网站上进行?

我知道没有“一刀切”的HTML结构,但大多数网站都有标题,全局导航,主区域和页脚,所以我想我们至少可以使用这些项目的样板。

1 个答案:

答案 0 :(得分:0)

对于良好的HTML编码,H1是每页一个。对于所有标题,您可以使用h2代码。然后在h3之后,h4,......