可访问性 标题级别
为什么
人们使用标题结构来浏览页面并了解主要内容。这对于有视力的人和屏幕阅读器用户都是如此。
什么
标题通过 <h1>
到 <h6>
标签定义。用户通过标题来浏览您的页面。
使用标题来显示文档结构和不同部分之间的关系非常重要。<h1>
标题应用于主标题,然后是 <h2>
标题,接着是不那么重要的 <h3>
,以此类推。
如何操作
让我们来看一个好的和坏的标题级别示例。
良好的文档大纲:The Strait Times
- 下载 浏览器扩展 Web Developer。它适用于 Chrome、Firefox 和 Opera。
- 打开 The Straits Times。
- 打开 Web Developer。在“信息”选项卡下,单击“查看文档大纲”。
- 浏览文档大纲。

现在您对文档大纲的样子有了了解。
糟糕的文档大纲:The New York Times
- 打开 The New York Times。
- 打开 Web Developer。在“信息”选项卡下,单击“查看文档大纲”。
- 浏览文档大纲。

问题
此文档结构令人困惑。它有很多问题
- 没有主标题
<h1>
。 - 前三个
<h2>
在没有视觉上下文的情况下令人困惑。 - 关于特朗普的
<h3>
与 DealBook 政策项目不相关。 - 一个
<h3>
组合了多个标题。 - 一个
<h3>
重复了信息。
请查看视觉层次结构。

最醒目的标题是“特朗普无罪”。下一个标题是“7 名共和党人在关于第二次弹劾的投票中脱离前总统”。从视觉上看,接下来的三个标题显然是同一级别的副标题,即使“最跨党派的…”比“分析…”更大。
解决方案
让我们逐一解决每个问题。
没有主标题
我们至少有四种选择来设置主标题
- 使用徽标作为主标题。The Straits Times 就是这样做的。
- 使用“特朗普无罪”作为主标题。
- 将“特朗普无罪”和“7 名共和党人在关于第二次弹劾的投票中脱离前总统”一起作为主标题。即使这两个标题在视觉上是不同的,从语义角度来看,它们可以被视为一个标题。它们都描述了后续内容。
- 添加一个隐藏的标题“头版”。
这里没有绝对的对错。作为报纸的头版,**使用徽标作为主标题**是很有意义的。请记住要为图像提供一个备用文本。
令人困惑的 h2
这三个标题在没有视觉上下文的情况下令人困惑
- 收听“The Daily”
- 观点:收听“Sway”
- DealBook D.C. 政策项目
我们可以至少通过两种方式解决这个问题
- 添加一个隐藏的标题。
- 将标题级别从 h2 更改为 h3。
- 将标题更改为列表。
有时添加仅供屏幕阅读器使用是有意义的。这种情况就是如此。一种常见的做法是使用 CSS 类 .sr-only
,其中 sr 表示屏幕阅读器。
<h2 class="sr-only">简报</h2>
并添加此样式将其移出屏幕
CSS 类 .sr-only
,仅屏幕阅读器可访问
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
} 然后将简报的级别从 h2 更改为 h3 是有意义的。但它们真的是标题吗?它们是否呈现了后续内容?我们假设不是。如果我们同意这一点,我们可以将这三个链接更改为一个列表。
特朗普的 <h3>
醒目的标题“特朗普无罪”和随后的标题“7 名共和党人…”都指向同一篇文章。因此,它们可以成为同一个标题的一部分。同样,这里没有绝对的对错。我们可以将其更改为 h2,或者为此 <section>
添加一个隐藏的标题:
<h2 class="sr-only">标题</h2>
标题“标题”在文档大纲中与“简报”*一起*运行得很好。
重复信息
标题“7 名共和党人…”重复了两次。这是因为一个 h3 嵌套在另一个 h3 中。让我们删除它,然后前往 Web Developer 来显示我们新的文档大纲。

好多了。
在此页面上,您已经阅读了许多标题。检查文档大纲。它好吗?