heading-structure

标题结构

对于屏幕阅读器用户来说，标题是导航工具；对于所有人来说，标题都是认知路标。清晰的标题结构，决定了用户能否找到内容，还是会放弃阅读。

为什么这很重要

屏幕阅读器用户通过标题导航——他们按下按键即可在标题之间跳转，就像视力正常的用户通过目视扫描页面一样。如果标题结构混乱，屏幕阅读器用户就会迷失在一大片没有区分的文本中。

对于有认知障碍的人来说，标题是他们了解页面内容以及查找所需信息的主要方式。

规则

每页仅有一个 H1

• H1 是页面标题，用来说明页面的主题
• 标题应与页面的 title 标签以及引导用户来到此处的链接相同或密切相关
• 每页不得使用多个 H1

不要跳过层级

• 按 H1 → H2 → H3 的顺序排列，绝不要从 H1 跳到 H3
• 跳过层级会破坏屏幕阅读器的导航，并使文档大纲变得混乱
• 可以回到上一级：H3 → H2 没问题（表示开始一个新章节）

标题应描述内容

• 标题是路标，不是装饰
• 使用“账户设置”，而不是“第 2 节”
• 使用“选择配送日期”，而不是“第 3 步”
• 用户只阅读标题，就应能了解页面内容

标题不是视觉样式

• 不要仅为了让文本变大或加粗而使用标题标签
• 不要跳过标题标签，只通过样式让文本看起来像标题
• 标签决定结构；CSS 决定外观
• 如果内容看起来像标题，实际上却不是标题，屏幕阅读器用户就无法找到它

建议的层级深度

• 大多数页面：使用 H1 到 H3 即可
• 复杂页面：最多使用 H1 到 H4
• 如果需要使用 H5 或 H6，说明页面可能过于复杂——可以考虑拆分页面

模式

文章或博客文章

H1: Article Title
  H2: First Major Section
    H3: Subsection
    H3: Subsection
  H2: Second Major Section
    H3: Subsection
  H2: Conclusion

控制面板

H1: Dashboard Name
  H2: Summary / Key Metrics
  H2: Recent Activity
  H2: Tasks
  H2: Notifications

表单

H1: Form Title (e.g., "Apply for an Account")
  H2: Personal Information
  H2: Contact Details
  H2: Preferences
  H2: Review and Submit

设置页面

H1: Settings
  H2: Profile
  H2: Notifications
  H2: Privacy
  H2: Billing

评估清单

• 每页恰好有一个 H1
• 未跳过标题层级
• 标题描述其下方的内容
• 标题标签用于组织结构，而非设置视觉样式
• 用户只阅读标题也能理解页面内容
• 标题层级不超过 H4