通过听读审查页面大纲
像屏幕阅读器呈现问题一样发现结构错误
通过听读审查页面大纲 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
听一听页面结构
大纲审查意味着按照屏幕阅读器呈现标题的方式检查标题，完全忽略视觉样式。👂
去除所有样式
忘掉颜色和字体。即使完全没有 CSS，清晰的大纲也应该读起来像合理的嵌套分区标题列表。
只阅读标题
按顺序提取您的标题。如果只看这份列表就能概括页面内容，说明您的结构发挥了良好作用。
检查唯一的 h1
首先确认页面恰好有一个用于命名页面的h1。缺少 h1 或存在重复 h1，是最常见的大纲缺陷。
查找跳级
逐级检查，留意跳级，例如从 h2 跳到 h4。每次向下跳转都应该恰好下降一级。
找出伪标题
找出那些本应是标题、却只是设置了样式的加粗div。这些隐藏的空缺会让屏幕阅读器用户没有路标可循。
使用检查器
浏览器开发者工具和扩展可以显示大纲视图。它们会列出真正的标题，并标记跳过或缺失的级别。
尝试使用真正的屏幕阅读器
在 NVDA 或 VoiceOver 中打开标题列表。听屏幕阅读器朗读您自己的页面，可以发现任何图表都无法呈现的混乱。🔊
留意空标题
只有图标的空标题读起来什么都没有，还会让列表变得杂乱。请为每个标题提供真实且有意义的文字。
判断措辞是否清楚
像“更多”这样的含糊标题无法通过听觉测试。脱离上下文时，每个标题仍应告诉用户该分区包含什么。
养成习惯
发布每个页面前，都快速检查一次大纲。两分钟的检查就能发现那些每天让用户感到困扰的结构错误。
快速检查
审查时，发现什么情况说明标题大纲存在问题？
回顾
您已经学会通过听觉进行审查：确认有一个 h1，发现跳过的级别，找出伪标题，并使用真正的屏幕阅读器检查措辞。✅
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「通过听读审查页面大纲」课时是免费的吗？
是的 — 「通过听读审查页面大纲」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「通过听读审查页面大纲」这节课中我会学到什么？
像屏幕阅读器呈现问题一样发现结构错误 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「通过听读审查页面大纲」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 每个页面一个 h1：命名主要主题
- 不跳级地嵌套层级
- 标题用于导航，而不只是大号文本
- 通过听读审查页面大纲