直接写到不等于无障碍层级树，因跳级、多、非语义容器嵌套等会破坏屏幕阅读器构建的逻辑结构，须用/重置上下文并严格线性递进。
为什么直接写 <h1></h1> 到 <h6></h6> 不等于无障碍层级树
屏幕阅读器依赖标题的语义层级来构建文档结构树，但仅靠标签名（h1–h6）本身不保证逻辑正确。如果跳级（比如 <h2></h2> 后直接 <h4></h4>），或嵌套在非流式容器中（如 <div role="article"> 内未重置上下文），屏幕阅读器会报错或跳过某些标题。关键不是“能不能用”，而是“是否形成连续、可预测的层级路径”。
<h3>
<code><h1></h1> 必须唯一且出现在主内容区开头
多个 <h1></h1> 会让屏幕阅读器困惑“哪一个是真正的页面主标题”。HTML5 允许文档片段含多个 <h1></h1>，但实际无障碍实践中，主流读屏软件（NVDA、VoiceOver）仍默认首个 <h1></h1> 为页面起点。若页面含多个独立区域（如侧边栏、卡片），应改用 <section></section> + <h2></h2>，而非强行塞 <h1></h1>。
- ✅ 正确：
<main><h1>产品介绍</h1> <section><h2>核心功能</h2> <h3>实时同步</h3></section></main>
- ❌ 错误：
<header><h1>网站Logo</h1></header><main><h1>正文标题</h1></main>
（两个<h1></h1>，无明确主次） - ⚠️ 注意：
<h1></h1>不应放在<aside></aside>或<footer></footer>中——这些区域应从<h2></h2>或更低开始
跳级标题（如 <h2></h2> → <h4></h4>）会破坏结构树
WCAG 2.1 要求标题层级必须线性递进（h1 → h2 → h3…），跳级会导致屏幕阅读器无法生成完整大纲，用户按 H 键遍历时直接跳过中间层级。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 正确：
<h2></h2>后接<h3></h3>，或同级重复<h2></h2>（表示新章节） - ❌ 错误：
<h2></h2>后紧跟<h4></h4>；或用 CSS 隐藏<h3></h3>却保留其语义（视觉隐藏但读屏仍读出，造成逻辑断层） - ? 替代方案：若需视觉降级但语义不变，用
<span class="visually-hidden"></span>包裹文字，而非降级标题标签
用 <section></section> 和 <article></article> 重置标题上下文
当页面存在多个独立内容块（如博客列表、评论区、相关推荐），每个块都应有自己的标题层级起点。单纯靠 <h2></h2>–<h6></h6> 会越嵌越深，最终变成 <h7></h7>（不存在）。HTML5 的语义容器能重置计数。
- ✅ 正确：
<article><h2>第一篇博文</h2> <h3>引言</h3></article><article><h2>第二篇博文</h2> <h3>方法论</h3></article>
（每个<article></article>内<h2></h2>是该块主标题） - ⚠️ 注意：
<section></section>本身不自动创建新层级，需配合标题标签使用；空<section></section>或仅含<p></p>的<section></section>反而增加噪音 - ? 不要用
<div> + <code>role="region"替代<section></section>——它不触发标题重置，仅添加泛用区域名 实际检查时，打开 Chrome DevTools → Lighthouse → “Accessibility” 报告，重点关注 “Heading levels should only increase by one” 这条提示。真正难的不是写对标签，而是保持整个页面所有区块的标题路径始终连贯、无歧义。
