破坏无障碍的标题结构错误

标题是大多数屏幕阅读器用户在页面上查找内容的方式。在 WebAIM 2024 年的屏幕阅读器调查中，71.6% 的人表示他们首先通过标题来浏览较长的页面，所以标题大纲一旦损坏，页面的主要导航系统就坏了。 五类错误造成了大部分损害：假标题、跳级、因尺寸而选择标题、空标题，以及缺失或混乱的 H1。与 SEO 的联系比大多数工具声称的要窄，本文会准确说明它是什么。

要点

• 屏幕阅读器用户把标题当作目录来使用。 71.6% 的人首先通过标题浏览长页面，88.8% 认为标题级别非常有用或比较有用（WebAIM 屏幕阅读器用户调查 #10）。
• 标题是真正的 HTML 元素，而不是一种外观。 段落中加粗放大的文字，无论看起来如何，对屏幕阅读器来说都不是标题。
• 标题错误极为常见。 在 WebAIM 2026 年对排名前一百万的首页的分析中，41.8% 至少有一处跳过的标题级别，7.5% 完全没有标题。
• Google 不按标题顺序排名。 其搜索代表曾表示，页面没有 H1 或有多个 H1 都能正常排名，标题顺序不是排名因素。Google 读取的是标题所说的内容，而不是它是哪一级。
• Axeazy 会自动修复其中一部分，另一部分只有在您批准后才会修复。 缺失的 H1 或空标题属于纯粹的添加。对现有标题重新排序会改变页面结构，所以要等您确认。由带样式文字构成的假标题则需要人来处理。

标题为屏幕阅读器用户做了什么

视力正常的访客靠看来浏览页面。更大、更粗的文字告诉他们一个章节从哪里开始。屏幕阅读器用户只有在页面把它标记为标题时，才能得到同样的信息。这样他们就可以调出页面上所有标题的列表，或者用一个按键直接跳到下一个，就像视力正常的读者的目光顺着页面向下跳。

这就是标题处于整类无障碍工作中心的原因。标题级别 H1 到 H6 还传达层级关系：H2 属于其上方 H1 之下，H3 属于其上方 H2 之下。当这个大纲正确时，用户无需阅读任何内容就能分辨哪些是主要章节，哪些是子章节。

破坏大纲的五个标题错误

1. 假装成标题的加粗文字或带样式的段落

这是最常见的失败，也最难靠肉眼发现，因为它看起来完全正确。

<!-- 失败：看起来像标题，却被读作普通文字 -->
<p style="font-size: 24px; font-weight: bold;">Our Services</p>

<!-- 通过：真正的标题，用 CSS 设置样式 -->
<h2 class="section-title">Our Services</h2>

WCAG 1.3.1“信息和关系”正是为此而设：视觉上明显的结构，也必须能被辅助技术获取，而不只是通过样式呈现。

2. 跳级

<!-- 失败：从 H1 直接跳到 H3 -->
<h1>Maple Street Bakery</h1>
<h3>Today's Specials</h3>

<!-- 通过：没有跳过任何级别 -->
<h1>Maple Street Bakery</h1>
<h2>Today's Specials</h2>

跳过的级别会让用户怀疑自己是否错过了某个章节。H1 之后紧跟 H3，暗示某处存在一个 H2，而实际上并没有。

3. 因尺寸而选择级别

有人因为 H2 看起来太大而选了 H4。大纲为了解决视觉问题而被破坏。正确的做法是保持正确的级别，用 CSS 改变其外观。

<h2 class="small-heading">Opening Hours</h2>

.small-heading { font-size: 1.1rem; }

4. 空标题

<!-- 失败：被读作标题，里面却什么都没有 -->
<h2></h2>

空标题通常来自模板或页面构建器，在文字被删除后遗留了一个元素。屏幕阅读器读出一个标题，而用户什么也听不到。

5. 没有 H1，或有多个相互竞争的 H1

每个页面都应该有一个清晰的 H1 说明页面是关于什么的，因为屏幕阅读器传统上把它当作页面的主要标识。这是无障碍的最佳实践，而不是 WCAG 的硬性失败，有多个 H1 的页面并不会自动出问题。值得修复是因为它会让大纲变得混乱，尤其是当模板在标志或横幅中重复使用 H1 时。

这些错误有多常见

WebAIM 于 2026 年 2 月对排名前一百万的首页进行的年度分析，显示了这一问题的普遍程度。

标题问题	占首页的比例
至少有一处跳过的标题级别	41.8%
多于一个 H1	18.1%
完全没有标题	7.5%

这些数字描述的是由专业人员构建的大型网站。基于主题或页面构建器搭建的小企业网站，出现同样问题的可能性至少不会更低。

SEO 真正在乎什么

这是许多无障碍内容夸大其词的地方，所以值得说得精确。

Google 多次表示标题顺序不是排名因素。其搜索代表曾说明，页面没有 H1 或有五个都可以正常排名，H1、H2、H3 的语义顺序对无障碍有帮助，但不会对排名产生实质影响。所以跳过标题级别不会让您丢掉排名。

Google 真正读取的是标题所说的内容。像“营业时间和位置”这样的标题，告诉搜索引擎其下方的章节是关于什么的，就像告诉一个人一样。这就是无障碍与 SEO 在这里的真正交集：为章节命名的描述性标题同时服务两类受众。

所以，请为无障碍这个真实且可衡量的理由去修复标题结构。把任何 SEO 收益视为写出清晰、描述性标题的副产品，而不是这样做的理由。对人来说容易浏览的结构，对自动化系统来说也很可能更容易解析，但没有人证实这是一种排名效应，也不应当把它当作排名效应来承诺。

如何检查您自己的标题

1. 用屏幕阅读器查看大纲。 在 NVDA 中，按 Insert+F7 并选择标题列表，或按 H 在标题之间跳转。在 VoiceOver 中，用 VO+U 打开转子并选择“标题”。您会听到与用户完全一样的大纲。
2. 查看页面源代码。 搜索 <h 来查看每个标题及其级别，并检查看起来像标题的东西是否其实是 <p> 或 <div>。
3. 从上到下阅读大纲。 脱离页面其余部分，它是否说得通？级别是否有序？有没有空的？
4. 或者运行扫描。 Axeazy 的免费扫描大约 60 秒就能检查页面的标题结构，同时涵盖它支持的其他修复类别。两项相关的结构检查分别在表格标题指南和地标指南中介绍。

Axeazy 在这里能帮上什么

标题的修复根据对页面的改动程度分为三组。

规则	检查内容	修复路径
page-has-heading-one	页面没有 H1	自动修复，纯粹添加，尽力而为
empty-heading	标题元素没有内容	自动修复，纯粹添加，尽力而为
heading-order	标题级别跳级或顺序错乱	已计算出，但需等待您批准
p-as-heading	带样式的文字充当标题	手动审核

添加缺失的 H1 或处理空标题不会移动或重命名任何东西，所以无需先询问就会写入。对现有标题重新排序会改变页面的结构，所以 Axeazy 会计算出修复方案，但在您或您的开发人员批准之前不会写入任何内容。被设置成看起来像标题的段落需要人来处理，因为只有了解页面的人才能说出那段文字本来应该是什么。

其中三项是 axe-core 中的最佳实践检查，而不是正式的 WCAG 失败。假标题问题最接近真正的 WCAG 1.3.1 问题。

修复如何落到您的网站上，取决于您的平台。连接 GitHub 的 React 和 Next.js 网站会收到真实的 pull request。Shopify 商店会得到扫描结果和引导式清单，而不是对主题模板的自动更改。在 WordPress 上，标题修复不属于免费插件的三项即时修复，因此目前也走清单路径。查看完整的修复类别说明。

常见问题

一个页面应该只有一个 H1 吗？

力求只有一个。一个说明页面主题的 H1，为屏幕阅读器用户提供清晰的起点。多个 H1 不是 WCAG 失败，Google 也不会惩罚，但一个清晰的 H1 能让大纲容易跟随。

跳过标题级别会损害 SEO 吗？

Google 表示标题顺序不是排名因素，所以跳级不会让您丢掉排名。受到伤害的是屏幕阅读器用户，他们依赖这些级别来理解大纲。

我可以因为 H4 看起来尺寸合适就用它吗？

请保持正确的级别，用 CSS 改变尺寸。因标题级别的默认外观而选择它，是为了解决视觉问题而破坏大纲。

标题问题会在 ADA 索赔函中被引用吗？

标题结构不在真实索赔函中最常被引用的那几类之列，那些函件倾向于引用替代文字、跳过导航、语言属性、表单标签，以及链接或按钮名称。但对于通过标题浏览的人来说，它仍然是真实的障碍，值得凭其自身的价值去修复。

修复标题就能让我的网站无障碍了吗？

没有任何单一修复能做到这一点。标题是一个人在页面上找路方式中的重要一环，页面可以有干净的大纲，却仍存在其他问题，比如缺少表单标签或无法到达的按钮，需要各自单独检查。

参考来源

• WebAIM：屏幕阅读器用户调查 #10 结果
• WebAIM：The WebAIM Million，2026 年排名靠前首页的报告
• W3C：理解成功准则 1.3.1，信息和关系
• W3C：理解成功准则 2.4.6，标题和标签
• Search Engine Journal：Google 谈 H1 标题与 SEO
• Stan Ventures：Google 对标题顺序与 SEO 的澄清