标题层级

标题层级是指使用 <h1> 至 <h6> 元素为页面内容构建一致大纲的规范。做到位，屏幕阅读器用户即可获得一份免费的目录；做不到位（跳级、仅用于装饰的标题、多个 h1、用通用 div 充当标题），辅助技术用户将无从理解页面结构。

基本结构

<h1>文章标题（每页唯一）</h1>
  <h2>主要章节</h2>
    <h3>子章节</h3>
    <h3>子章节</h3>
  <h2>主要章节</h2>
    <h3>子章节</h3>
      <h4>子子章节</h4>

规则如下：

1. 每页仅有一个 <h1>——页面的主标题。多个 h1 会让屏幕阅读器对页面主题产生混淆。
2. 向下时不得跳级。 <h2> 后可跟 <h3>（深一级），但不可直接跟 <h4>（深两级）。跳级会向屏幕阅读器暗示中间有内容被遗漏。
3. 标题反映内容结构，而非视觉样式。 若某段文字看起来很大，但并非新内容的标题，应使用带样式的段落，而非标题元素。
4. 不得有空标题。 <h2></h2> 毫无意义，要么填充内容，要么删除。

屏幕阅读器为何在意标题

屏幕阅读器最常见的导航操作，就是”跳转到下一个标题”——JAWS 和 NVDA 中的 H 键、VoiceOver 转子的”标题”模式、TalkBack 的标题阅读控件。

用户打开一篇长文时，会反复按 H 键来了解文章结构，然后再开始阅读。若标题层级清晰，用户即可获得文章的完整大纲；若标题仅用于装饰或存在跳级，用户得到的只是杂乱信息。

生产环境中的常见问题

• 没有 <h1>。 页面缺少主标题。屏幕阅读器会朗读 <title> 中的页面标题，但页内标题导航没有锚点。常见于结构欠佳的 CMS 页面——文章标题以带样式的文本呈现，但从未被标记为 <h1>。
• 多个 <h1>。 “英雄区标题”和”第一节标题”都被标记为 <h1>。屏幕阅读器用户听到两个 h1，无从判断哪个才是页面标题。
• 跳级。 <h1> 直接跳到 <h3>，因为设计不需要 <h2> 大小的文字。屏幕阅读器导航会提示”缺失标题级别”。
• 用 div 模拟标题。 <div class="hed-xl">章节标题</div>，屏幕阅读器获取不到任何标题。解决方法：使用正确的 <hN> 元素，通过 CSS 控制样式。
• 将标题用于布局。 给侧边栏标签加 <h2> 使其视觉上像标题，但该标签在内容上并非标题。应使用带样式的段落。

如何审计标题层级

三种方法：

1. 屏幕阅读器标题列表。 在 NVDA 中按 Insert+F7，或在 VoiceOver 中按 VO+U 并选择”标题”。显示的列表应作为页面大纲有意义。若不然，修正标记。
2. HeadingsMap 浏览器扩展。 直观呈现页面的标题大纲，级别和缺口一目了然。
3. axe-core 扫描。 可检测缺失 h1、跳级（在某些配置下）和空标题。

每页一个 h1 的争议

HTML5 最初建议嵌套的 <section> 元素可创建独立的标题作用域，从而允许多个 <h1>。然而浏览器和屏幕阅读器从未实现这一行为。W3C 的 WCAG 工作组已将”每页一个 h1”恢复为现行指导意见。大多数现代风格指南和无障碍审计均执行一个 h1 的规则。