学习前提

完成标题、链接与表单课程，理解语义与外观的区别。

本课完成后你能做什么

用 header、nav、main、article、section 和 footer 划分页面，并用键盘验证主要内容可达。

先理解机制

页面同时有两种结构：标题描述内容层次，地标描述功能区域。main 是这一页独有的主要内容；nav 是重要导航，不是所有包含链接的地方。article 应当具有可独立理解的内容，例如一篇教程；section 是带主题的分组，通常应该有标题。不能仅因为需要一个 CSS 容器就使用 section，纯布局容器可以用 div。

语义标签不会自动完成所有无障碍工作。导航名称、清晰焦点和合理源代码顺序仍需要设计。跳到正文链接是原生片段跳转的实际应用，让键盘用户绕过每页重复的导航。视觉上用 CSS 调换左右位置，不能假设屏幕阅读器和键盘也会按视觉位置重新排序。

可运行示例

<a href="#content">Skip to content</a>
<header><p>Honeysuck</p><nav aria-label="Main"><a href="#lesson">Lesson</a></nav></header>
<main id="content" tabindex="-1">
  <article id="lesson">
    <h1>Build a meaningful page</h1>
    <section><h2>Structure</h2><p>Start with the content.</p></section>
    <section><h2>Practice</h2><p>Test the reading order.</p></section>
  </article>
</main>
<footer><p>Learning notes</p></footer>

推演与验证

将片段放到 body 后只使用键盘。先按 Tab 聚焦跳转链接，再按 Enter，检查页面是否到达主要内容。打开开发者工具的 Accessibility 面板，查看 main 和 navigation 地标；随后给导航再加一个“页内目录”，用不同的 aria-label 区分两个导航。

常见错误与边界

不要在同一个可见页面里放多个主要 main 区域。不要把可点击 div 当作原生按钮。不要为了减少可见焦点而移除所有 outline；那会让键盘用户无法知道位置。装饰性图标可以对辅助技术隐藏，但具有信息作用的文本不能随意隐藏。

动手练习

给教程页增加“课程导航”和“本页目录”，为两个 nav 命名。把跳转链接设为聚焦时可见，再检查所有链接的顺序。

参考解法与理由

两个 nav 可以分别命名 Course lessons 与 On this page。把跳转链接放在源码最前面，使用 :focus 显示；不能仅用 display:none 隐藏，否则它无法被聚焦。测试应从地址栏开始按 Tab，而非直接点击正文。

进一步阅读