无障碍 标题级别
为什么
人们使用标题结构来浏览页面并了解主要内容。这对有视力障碍的用户和屏幕阅读器用户都是如此。
什么
标题使用 <h1> 到 <h6> 标签定义。用户通过标题来快速浏览您的页面。
使用标题来显示文档结构以及不同部分之间的关系非常重要。 <h1> 标题应用于主要标题，其次是 <h2> 标题，然后是更不重要的 <h3> 等。
如何
让我们检查一下标题级别的良好示例和不良示例。
良好文档大纲：海峡时报
- 下载 Web Developer 浏览器扩展。它适用于 Chrome、Firefox 和 Opera。
- 打开 海峡时报。
- 打开 Web Developer。在“信息”选项卡下，单击“查看文档大纲”。
- 浏览文档大纲。
现在，您了解了文档大纲的示例。
不良文档大纲：纽约时报
- 打开 纽约时报。
- 打开 Web Developer。在“信息”选项卡下，单击“查看文档大纲”。
- 浏览文档大纲。
问题
此文档结构混乱。它存在很多问题。
- 没有主要标题
<h1>。 - 前三个
<h2>在没有视觉上下文的情况下令人困惑。 - 关于特朗普的
<h3>与上面关于交易簿政策项目的<h2>无关。 <h3>包含多个标题。<h3>重复了信息。
看一下视觉层次结构。
最突出的标题是“特朗普被无罪释放”。下一个标题是“7 名共和党人在对第二次弹劾投票中与前总统决裂”。从视觉上看，接下来的三个标题明显是同一级别的子标题，即使“大多数两党……”比“分析……”更大。
解决方案
让我们逐点解决每个问题。
没有主要标题
我们至少有四种方法来设置主要标题。
- 使用徽标作为主要标题。海峡时报就是这么做的。
- 使用“特朗普被无罪释放”作为主要标题。
- 使用“特朗普被无罪释放”和“7 名共和党人在对第二次弹劾投票中与前总统决裂”作为主要标题。即使这两个标题在视觉上是不同的，从语义的角度来看，它们可以被视为一个标题。它们都描述了接下来的内容。
- 添加一个隐藏的标题“首页”。
这里没有对错之分。作为报纸的首页，以徽标作为主要标题是合理的。请记住要为图像添加 替代文本。
令人困惑的 h2
这三个标题在没有视觉上下文的情况下令人困惑。
- 收听“每日播客”
- 观点：收听“摇摆”
- 交易簿华盛顿特区政策项目
我们至少可以通过两种方法解决这个问题。
- 添加一个隐藏的标题。
- 将标题级别从 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 以显示我们新的文档大纲。
好多了。
在本页中，您已经阅读了许多标题。查看文档大纲。它好吗？
