这是什么
标题标签一共有六个级别,从 <h1>(主标题)到 <h6>(最小的子标题),它们本应按顺序使用,以构建页面内容的嵌套大纲——顶部一个 H1,其主要板块用 H2,这些板块内的子板块用 H3,以此类推。「标题层级」指的就是页面的标题是否真的遵循这种嵌套顺序,还是级别被跳过或乱序使用了,比如从 H1 直接跳到 H3、中间没有 H2。
当标题只是根据视觉效果来选择(挑选恰好能渲染出想要字号的标题级别),而不是根据其结构性含义来选择时,就很容易出错。
为什么重要
一个结构良好的标题层级,其作用就像直接嵌入页面中的目录一样——搜索引擎和屏幕阅读器用户都依赖它来理解页面内容的组织方式,并直接跳转到他们关心的部分。跳过或错乱的标题级别会破坏这个大纲,让页面结构在程序化处理时真正变得更难追踪,即使对正常滚动浏览的视力正常访客来说,视觉上看起来仍然没问题。
做对这件事并不需要添加比页面所需更多的标题——它只是意味着按正确的嵌套顺序使用页面已有的级别,而不是仅仅根据字号大小随意跳级。
如何解决
- 按顺序列出页面上的每一个标题,标注其级别(H1、H2、H3 等)——大多数浏览器无障碍工具或扩展程序可以自动生成这份大纲。
- 确认页面恰好有一个 H1,后面跟着用于主要板块的 H2。
- 检查是否有任何标题级别被跳过——例如,一个 H2 后面直接跟着 H4,中间没有 H3——并进行调整,补上缺失的级别,或降低被跳过的标题。
- 如果一个标题的选择纯粹是出于视觉大小,而非其在大纲中的结构位置,就改变它的标题级别,然后单独用样式来调整字号。
- 重新运行你的 Launch Readiness 检查,确认层级结构现在已经一致。