freeCodeCamp 无障碍实战：用 HTML5 header 地标元素让屏幕阅读器导航更简单

2026-09-06 14:35:45作者：秋阔奎Evelyn

在 freeCodeCamp 的课程体系中，语义化 HTML 是无障碍开发的核心。本文基于课程挑战《Make Screen Reader Navigation Easier with the header Landmark》，深入讲解 HTML5 header 地标（landmark）元素的语义含义、它与 head 元素的区别、它在屏幕阅读器导航中扮演的角色，并逐条剖析该挑战的四项自动测试断言，帮助你既能通过挑战，又能理解其背后的可访问性原理并迁移到自己的项目里。

什么是 header 地标元素

freeCodeCamp 课程原文指出：header 标签是继 main 之后又一个为页面添加语义、改善可访问性的 HTML5 元素。它用于包裹父级元素的介绍性信息或导航链接，特别适合围绕那些"在多页顶部重复出现"的内容（如站点标题、页头导航）。

header 和课程前一课讲过的 main 一样，自带嵌入式的 landmark（地标）特性：辅助技术（屏幕阅读器等）可以直接识别这些地标区域，让用户快速跳转到页头内容，而不必从头到尾逐节点朗读。

重要区别：header 是用于 HTML 文档 body 标签内的元素，它与 head 元素完全不同——head 中存放的是页面标题、meta 信息等文档级元数据，不参与页面渲染与可访问性导航。这是初学者最容易混淆的一对概念。

课程上下文：这个挑战在 freeCodeCamp 里的位置

从课程结构文件 applied-accessibility.json 可以看到，本挑战（id 为 587d7787367417b2b2512aa1）是 "Applied Accessibility"（应用无障碍）模块 21 道挑战中的第 6 题，前后衔接关系非常清晰：

前置挑战 Jump Straight to the Content Using the main Element 先介绍了 main 元素与 landmark 概念，说明"辅助技术可以利用这些语义化信息提供页面摘要或导航选项"；
挑战 Wrap Content in the article Element 补充了 article / section / div 三者的语义分层：<div> 只负责分组内容、<section> 分组相关主题、<article> 分组独立自足的内容；
后续挑战 Make Screen Reader Navigation Easier with the nav Landmark 则继续在本挑战的页面上引入 nav 地标。

整个模块隶属 Responsive Web Design 路径（basic-html-and-html5 → basic-css → applied-visual-design → applied-accessibility → …），即在学习完基础 HTML/CSS 之后，专门用一组挑战把语义化标签逐一落地。

任务：把页头 div 改为 header

挑战给出的场景是：Camper Cat 正在撰写一系列忍者训练文章，想为网站加一个文章页。初始代码（seed）中，页面顶部用了一个无语义的 div 包裹 h1 标题，任务要求将其改为 header 标签。完整初始代码如下：

<body>

  <div>
    <h1>Training with Camper Cat</h1>
  </div>


  <main>
    <section id="stealth">
      <h2>Stealth &amp; Agility Training</h2>
      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
      <article><h3>No training is NP-complete without parkour</h3></article>
    </section>
    <section id="combat">
      <h2>Combat Training</h2>
      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
    </section>
    <section id="weapons">
      <h2>Weapons Training</h2>
      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
    </section>
  </main>
</body>

注意这个页面结构本身就是一节"微缩的无障碍课"：h1 是唯一页面标题、main 承载核心内容、section 按主题（stealth/combat/weapons）分组、article 包裹独立的文章条目——这正是模块里前面几课教过的语义化布局在真实页面中的组合运用。

参考答案与四项测试断言逐条解析

freeCodeCamp 的判题方式为：代码被渲染进页面后，用一组 JavaScript 断言检查 DOM 与源码。挑战 587d7787367417b2b2512aa1.md 中共有四条断言，每一条都对应一个具体的语义化要求：

1. 页面中必须有且只有一个 header

assert.lengthOf(document.querySelectorAll('header'),1);

querySelectorAll('header') 统计文档中所有 header 元素，要求数量为 1。这也隐含了 header 的使用惯例：一个页面通常只有一个顶层页头地标（HTML5 规范允许在 article、section 等分节元素内部再出现嵌套的 header，但顶层页头应唯一，避免屏幕阅读器暴露出多个同名地标）。

2. header 必须直接包裹 h1

const header = document.querySelector('header');
const children = header?.querySelectorAll(`:scope ${'h1'}`);
assert.lengthOf(children , 1);

这里 :scope 伪类限定查询范围为 header 元素内部，要求 h1 是 header 的后代。这验证了课程说明中的核心用法：header 包裹的是页面的介绍性内容——这里就是页面主标题 h1。

3. 页面中不能再残留任何 div

assert.lengthOf(document.querySelectorAll('div') , 0);

这条断言强调"语义标签替代无语义容器"的原则：当有对应的 HTML5 语义元素可用时，就不应该继续用 div 兜底。页面中其余元素（main、section、article）都是语义化的，唯一需要替换的就是顶部这个 div。

4. header 开闭标签必须配对

assert.isTrue(code.match(/<\/header>/g)?.length === code.match(/<header>/g)?.length);

这条直接对源码字符串做正则匹配，统计 <header> 与 </header> 的出现次数是否相等，强制学习者写出完整的闭合标签。对新手而言，养成"每个标签都显式闭合"的习惯，可以规避浏览器容错解析带来的意外 DOM 结构。

四条断言全部通过后，参考答案如下（相对 seed 只改动了顶部 div → header）：

<body>

  <header>
    <h1>Training with Camper Cat</h1>
  </header>


  <main>
    <section id="stealth">
      <h2>Stealth &amp; Agility Training</h2>
      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
      <article><h3>No training is NP-complete without parkour</h3></article>
    </section>
    <section id="combat">
      <h2>Combat Training</h2>
      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
    </section>
    <section id="weapons">
      <h2>Weapons Training</h2>
      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
    </section>
  </main>
</body>

从 freeCodeCamp 自身代码看 header 地标的真实应用

课程讲的并不是纸上概念——freeCodeCamp 网站自己的客户端代码就在用 header 地标。在 Header 组件中，整个站点页头被渲染为：

<header className='site-header'>

从源码结构看，这是典型的"地标 + 样式类"分工：header 标签负责语义（让辅助技术把这一区域识别为页头地标），而 site-header 这个 class 仅承担样式与定位职责。这与本挑战的核心思想完全一致——语义由标签承担，表现由 CSS 承担，二者各司其职。

延伸：header 地标的实战要点

结合本挑战与模块内相邻挑战，可以归纳出几条可落地的规则：

页头重复内容归 header：在多页站点中，每个页面顶部重复出现的介绍性区域（站点标题、主导航）适合用 header 包裹。后续 nav Landmark 挑战正是在本挑战的 header 内部再把导航链接列表 ul 从 div 换成 nav，形成 header 内嵌 nav 的经典结构。
header 与 head 不可混用：head 存放 <title>、meta 等文档元数据，永不渲染；header 渲染在 body 中，是页头内容的容器。
地标要唯一、位置要稳定：断言 1 要求全页只有一个 header，因为重复的顶层地标会让"按地标跳转"的导航功能变得混乱。
优先语义标签、减少 div：断言 3 的"零 div"检查提醒我们，在 main、section、article、nav 等 HTML5 元素可用的场景下，div 应只用于纯样式布局等无语义可用的兜底情况。