章节标题

要求内容

当页面被划分为多个章节时，每个章节都必须具有以编程方式实现的标题。本成功准则并不要求每个页面都拆分为多个章节——目的单一的短页面（如登录页面）无需子标题也完全符合要求。但凡存在章节划分，则必须使用真实的 <h1>–<h6> 标记，以便辅助技术能够构建标题大纲。

本成功准则属于 AAA 级别，但其底层实践——使用真实标题——也在 A 级的 1.3.1（信息与关系）中有所隐含，因此大多数无障碍网站通常会附带满足此准则。

如何满足

• 使用 <h1> 作为页面标题（每页一个），并通过 <h2>、<h3> 逐级向下构建嵌套章节，不得跳级。
• 用真实的标题标签替换 <div class="heading"> 和样式化的 <p>”标题”。
• 确保长篇内容（文章、文档页面、带选项卡的设置面板）的每个独立章节都以标题开头。
• 对于用作相似章节集合的卡片组件，在适当层级为每张卡片添加标题。
• 使用 axe DevTools、headingsMap 浏览器扩展或 W3C 验证器对标题大纲进行验证。

常见失败情形

• 粗体段落伪装成标题——视觉上令人信服，但屏幕阅读器的标题列表中无法识别。
• 标题层级跳跃（<h1> 直接跳至 <h4>），原因是 CMS 团队按字号而非层级关系选取标题级别。
• 单个页面出现多个 <h1> 元素（在 HTML5 大纲中允许，但会破坏大多数辅助技术中的导航）。
• 无论嵌套深度如何，每个章节都标记为 <h2>，导致大纲结构扁平化。
• 将 Hero 文本标记为 <h1>，而实际页面标题却位于其下方并标记为 <h2>。

重要性

对于屏幕阅读器用户而言，标题大纲就是目录。JAWS 和 NVDA 通过对话框展示它（JAWS 中按 Insert+F6）；VoiceOver 则通过转子展示它。没有标题或仅将标题用于视觉强调的页面，会迫使这些用户逐行滚动浏览。即便仅承诺满足 AA 级别，将章节标题视为基本写作规范，也会在 SEO、内容复用和编辑效率方面带来回报。