在网页可访问性实践中，绝不可跳过 HTML 标题层级（如从 h1 直接到 h3），即使视觉设计已通过布局、间距或分隔线隐含了结构关系；正确做法是为每个逻辑内容区块提供语义化标题，并使用 .visually-hidden 等辅助技术隐藏冗余但必要的标题，确保屏幕阅读器用户能完整、准确地感知文档结构。
在网页可访问性实践中，绝不可跳过 html 标题层级（如从 h1 直接到 h3），即使视觉设计已通过布局、间距或分隔线隐含了结构关系；正确做法是为每个逻辑内容区块提供语义化标题，并使用 `.visually-hidden` 等辅助技术隐藏冗余但必要的标题，确保屏幕阅读器用户能完整、准确地感知文档结构。
HTML 标题（<h1></h1>–<h6></h6>）的核心作用是表达内容的语义层级关系，而非仅服务于视觉样式。W3C WCAG 2.1 明确要求：“标题应按逻辑顺序嵌套，不得跳级”（Success Criterion 1.3.1 Info and Relationships），而《ARIA Authoring Practices Guide》也强调：跳过层级会破坏屏幕阅读器的导航上下文，导致用户误判内容归属——例如，一个无标题的 <section></section> 后紧跟 <h3></h3>，会被读作“隶属于前一 <h2></h2> 的子节”，而非独立新章节。
✅ 正确做法：用语义化标题 + 视觉隐藏实现“隐式即显式”
当设计上某区块标题无需视觉呈现（如侧栏中的“作者信息”区域仅靠图标与留白区分），应仍添加语义标题，再通过 CSS 隐藏其视觉表现，但保留其对辅助技术的可访问性：
<aside aria-labelledby="aside-title"><h2 id="aside-title" class="visually-hidden">文章辅助信息</h2>
<section aria-labelledby="toc-title"><h3 id="toc-title">目录</h3>
<nav aria-label="文章目录"><ul>...</ul></nav></section><section aria-labelledby="cta-title"><h3 id="cta-title">立即订阅</h3>
<button>获取更新</button>
</section><section aria-labelledby="author-title"><h3 id="author-title">作者信息</h3>
<address>
<p>撰稿人：李明</p>
<time datetime="2026-10-05">2026年10月5日发布</time>
</address>
</section></aside>
配套的 .visually-hidden 类（符合 WCAG 推荐）如下：
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
⚠️ 注意：切勿使用
display: none或visibility: hidden，二者会完全移除元素的可访问性；也避免仅依赖aria-hidden="true"隐藏标题——这等于主动屏蔽语义。
❌ 常见错误及后果
| 错误写法 | 问题 |
|---|---|
<section><h3>作者信息</h3>...</section>（前无 h2） |
屏幕阅读器将该 <h3></h3> 关联至前一 <h2></h2> 的上下文，造成逻辑错位；若前一 <h2></h2> 是主标题，则“作者信息”被误读为文章正文子节。 |
<section><div class="card"><h3>订阅</h3></div></section>（跳过 h2） |
<section></section> 缺失明确入口点，依赖“导航到区域”（Landmark Navigation）的用户可能跳过整个区块——尤其当页面含多个无命名 <section></section> 时，<section></section> 默认无 aria-label，无法区分。 |
<h1>主标题</h1>
<h3>简介</h3>（跳过 h2） |
违反标题嵌套规则，主流屏幕阅读器（NVDA、JAWS）在“标题导航模式”中会警告“标题层级不连续”，部分浏览器+AT 组合甚至忽略 <h3></h3> 的层级语义。 |
? 关键原则总结
- 层级不可跳：标题必须严格递进（h1 → h2 → h3…），这是可访问性的硬性要求，与视觉设计无关；
-
结构先于样式：布局暗示的“平等关系”（如多个并列卡片）需由相同层级标题（如全用
<h2></h2>）显式声明，而非省略； -
隐藏 ≠ 删除：
.visually-hidden是桥梁——它让语义存在，但不干扰视觉流； -
配合地标增强导航：对
<aside></aside>、<main></main>、<article></article>等使用aria-label或aria-labelledby，弥补纯标题导航的局限； - 验证必做：用 axe DevTools 或 Lighthouse 检查“heading-levels”项，确保零跳级警告。
遵循以上实践，你构建的不仅是视觉上优雅的页面，更是一个对所有用户——无论是否依赖辅助技术——都清晰、可靠、可预测的信息空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
