适用于屏幕阅读器的标题层级
合理组织标题，让屏幕阅读器用户能够高效导航
适用于屏幕阅读器的标题层级 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
屏幕阅读器如何导航标题
屏幕阅读器用户主要通过标题浏览页面：
- 按 H 跳转到下一个标题
- 按 1-6 跳转到特定标题级别
- 打开所有标题的列表（类似目录）
- 正确的标题层级对于实现这种导航至关重要
屏幕阅读器标题列表
NVDA 和 JAWS 可以列出页面上的所有标题：
<!-- A well-structured page with this heading order: -->
<h1>HTML5 Complete Guide</h1>
<h2>Document Structure</h2>
<h3>The DOCTYPE</h3>
<h3>The html head body</h3>
<h2>Semantic Elements</h2>
<h3>Article</h3>
<h3>Section</h3>
<!-- Becomes a navigable list for screen reader users -->
<!-- Similar to a table of contents in a book -->错误的标题层级
常见的标题层级错误：
<!-- BAD: skipping h2, going straight from h1 to h3 -->
<h1>My Article</h1>
<h3>Introduction</h3> <!-- Skips h2! -->
<h4>Background</h4>
<!-- BAD: using headings for visual size -->
<h4 class="huge-title">This looks big</h4> <!-- h4 in logical order? -->
<!-- BAD: using bold text instead of headings for sections -->
<p><strong>Introduction</strong></p> <!-- Not a heading at all -->实践中的正确层级
文档页面的正确标题结构：
<h1>HTML Forms Documentation</h1>
<h2>Overview</h2>
<h2>Form Elements</h2>
<h3>input</h3>
<h4>text type</h4>
<h4>email type</h4>
<h3>select</h3>
<h3>textarea</h3>
<h2>Validation</h2>
<h3>Built-in Validation</h3>
<h3>Custom Validation</h3>每页一个 h1
最佳实践：每页应当恰好有一个 <h1>：
<h1>JavaScript Array Methods</h1>
<!-- This is the page's main topic -->
<!-- Should match or closely relate to the <title> element -->
<!-- Appears as the main heading users see first -->
<!-- Search engines give it the highest SEO weight -->标题级别反映内容层级
标题级别表达内容的逻辑结构：
- 使用
<h2>表示页面的主要部分 - 使用
<h3>表示 h2 部分中的子部分 - 使用
<h4>表示更深一层的子部分 - 实际使用中很少需要超过 h4
不要为了视觉样式选择标题
切勿根据默认的视觉大小选择标题级别：
/* BAD approach: h4 because it looks right: */
<h4 style="font-size: 2rem;">Section Title</h4>
/* CORRECT approach: right level, resized with CSS: */
<h2>Section Title</h2>
/* Then: h2 { font-size: 2rem; } */
/* Or: aria-label on section if heading would disrupt structure:
— rare, usually better to fix the heading level */WCAG 2.4.6 标题和标签
WCAG 2.4.6（等级 AA）要求：
标题和标签应描述主题或用途。
- 标题应准确描述相应部分的内容
- “部分”或“详细信息”等通用标题不符合此标准
- 表单字段上的标签必须描述字段的用途
在组件中使用标题
构建可复用组件时，标题级别必须灵活：
<!-- BAD: hardcoded heading level in a card component -->
<div class="card">
<h3>Card Title</h3> <!-- What if card appears in h2 or h4 context? -->
</div>
<!-- GOOD: document context determines level -->
<!-- Component receives level as a parameter in JS frameworks -->
<!-- Or use aria-level on a generic element -->
<div role="heading" aria-level="3">Dynamic Level Heading</div>文档大纲
在浏览器 DevTools 或以下工具中查看页面标题大纲：
- Chrome →“无障碍”面板 →“名称/角色”视图
- Firefox →“无障碍”选项卡
- HeadingsMap Chrome 扩展——显示可视化大纲
- WAVE 无障碍工具——标题部分
标题与 SEO 的一致性
标题层级符合 SEO 最佳实践：
- 搜索引擎会解析标题层级，以理解内容结构
- H1 = 主要主题（与标题一致）；H2 = 主要子主题；H3 = 详细内容
- 在标题中自然地使用关键词，可以改善页面相关性信号
- 正确的标题结构 = 同时带来更好的无障碍性和更好的 SEO
跳过导航与标题
将跳过链接与标题导航结合使用：
<!-- Skip link bypasses nav to main content: -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Main content heading enables heading navigation: -->
<main id="main-content">
<h1>Page Title</h1>
</main>
<!-- Screen reader users: skip link for fast access;
heading navigation for page exploration -->快速检查
屏幕阅读器用户通常如何在标题之间导航？
回顾：标题层级
标题无障碍的要点：
- 每个页面使用一个
<h1>——表示主要主题 - 按顺序使用标题级别——切勿跳过级别
- 标题描述内容，而不是视觉大小
- 屏幕阅读器用户通过 H 键和标题列表进行导航
- 使用 HeadingsMap 或 WAVE 检查大纲
常见问题解答
「适用于屏幕阅读器的标题层级」课时是免费的吗？
是的 — 「适用于屏幕阅读器的标题层级」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「适用于屏幕阅读器的标题层级」这节课中我会学到什么？
合理组织标题，让屏幕阅读器用户能够高效导航 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「适用于屏幕阅读器的标题层级」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 无障碍为何重要：WCAG 等级
- 适用于屏幕阅读器的标题层级
- 图像替代文本：何时使用及如何编写
- 键盘导航与焦点顺序