J2.14.1heading hierarchy设计研究

标题层级需要逐级嵌套,不应为视觉效果跳过层级

别名: 标题跳级 · sequential headings · heading levels

概念解释

视觉上把某行字做得略小,不等于它在结构里可以跳过一级。标题层级要逐级嵌套:一级之下是二级,二级之下是三级,不要为了「这块看起来次一点」从二级直接跳到四级。辅助技术按层级走大纲,跳级会被读成结构里缺了一层,而不是读成「字号小一点」。

字号、字重、颜色是外观;层级是大纲里的父子关系。两套要分开调。

机制

标题大纲是一棵树。每个标题声明的是「我是上一层的孩子」,不是「我比周围的字更大」。跳过一级等于在树上插了一个没有父亲的节点:用户从二级进到四级时,会以为中间那级被自己漏听了,回头去找一个并不存在的三级。视觉设计常用跳级来制造节奏——小标题用四级的样式,因为二级看起来太大——这是把外观刻度误当成结构刻度。

正确的拆法是:结构仍用三级,外观用样式把三级做成你想要的大小。树完整,视觉节奏仍然可以有。反过来,用二级去标一个其实属于四级的小节,树会把无关的块提升成兄弟,大纲里出现一批平级的假章节。

怎么研究

抽出页面的标题树(无障碍树或阅读器的标题列表),标记每一处「数字跳了」的缺口,再对照视觉稿看跳级是否只为了字号。请屏幕阅读器用户只靠标题列表走完一页,报告在哪一级感到「中间缺了一块」。

自变量:是否允许跳级、跳级是否伴随视觉字号阶梯、样式是否与层级解耦。 因变量:大纲缺口数、用户报告的「找不到的那一层」次数、完成章节定位的时间。

自动化可以列出标题数字序列,但不能判断一次跳级是文档真缺一章,还是外观滥用。后者要对照设计意图。抽样包含营销落地页,它们最常为了节奏跳级。

边界

聚合页把多篇独立文章嵌进来,每篇文章内部从自己的最高级开始,整页看起来会像多棵树并排,这不是单篇文章内部的跳级。法律或学术来源若原文就跳号,转载应保留原文结构并加说明,而不是为了「逐级」去改写别人的章节编号。一级直接到三级,有时是内容真的没有中间层——这时应检查是不是该把三级升成二级,而不是补一个空洞的中间标题。可视化文档(幻灯片、海报)常常只有视觉层级,没有标题树,这条树状规则要先有标题元素才适用。

怎么落地

  • 按内容的父子关系选层级:同一深度用同一级,下一层只用下一级,不为了字更小就跳数字。
  • 需要更小的外观时,改样式,不改层级。
  • 发现二级后面紧跟四级,先问「中间那层章节是否存在」:存在就补上,不存在就把四级升到三级。
  • 验证:打开阅读器的标题列表(或无障碍树),从上往下读层级数字。每一次跳号,对照内容看是真缺章节还是为了外观;后者全部改回逐级。

延伸

  • 同组J2.14.2 一个页面通常只有一个最高级标题对应页面主题 · J2.14.3 地标区域(导航、主内容、页脚)补充标题之外的结构线索 · J2.14.4 过度使用标题标记非标题性质的强调文本会稀释导航价值
  • 相邻J2.09 语义结构 · J5.01 屏幕阅读器 · J5.02 无障碍树与角色
  • 站内检索heading hierarchy · skipped heading level · sequential headings

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/J2.14.1