标题和标签

要求内容

当某个区域存在标题，或表单控件存在标签时，其文本必须切实描述后续内容。屏幕阅读器用户将标题和标签作为页面的目录——JAWS 用户按 H 键在标题间跳转，表单模式在每个字段获得焦点时会朗读标签。模糊的文本会破坏这整套导航模型。

本成功准则并不要求所有地方都存在标题，仅要求已存在的标题具有描述性。（关于何时必须使用标题，请参见 AAA 级别的 2.4.10。）

如何满足

• 标题应命名该区域，而非描述设计意图：用 "收货地址" 而非 "第 2 节"，用 "常见问题" 而非 "更多信息"。
• 为每个表单控件配备可见的 <label>，其文本描述该输入项。避免将占位符用作标签——占位符在输入时会消失。
• 对于视觉上隐藏的标签（搜索框、图标按钮），使用 aria-label 或 .visually-hidden 类，但标签内容必须具体明确。
• 当页面上两个标题确实涉及相同主题时（例如论坛索引中的两个「评论」区域），添加消歧上下文："7 月 14 日的评论"、"7 月 15 日的评论"。
• 审查所有三个字词或更少的标题或标签——模糊性往往集中于此。

常见失败

• 将「信息」「详情」「更多」「区域」「表单」用作标题，且无进一步上下文。
• 表单标签如「字段 1」「输入」「请输入」，或完全没有标签（仅有占位符）。
• 卡片网格标题全部读作「了解更多」，因为模板变更将 CTA 转换后未修改。
• 搜索结果页面中每个结果标题均为字面词「结果」。
• 表格列标题为「列 1」「列 2」，而非「日期」「金额」「状态」。

重要性

在 WebAIM 的屏幕阅读器用户调查中，通过标题导航始终是在新页面上定位的最常见策略——比从头到尾阅读更为普遍。模糊的标题使这张地图失效。模糊的标签使表单失效：用户停在一个仅显示「输入」的控件上，不得不后退阅读周围文本，而表单模式通常会将这些内容隐藏起来。