freeCodeCamp 应用无障碍实战：用 HTML accesskey 属性让链接支持键盘快捷导航

2026-09-06 22:12:09作者：龚格成

本篇技术指南围绕 freeCodeCamp 课程中「Applied Accessibility（应用无障碍）」模块的练习题 Make Links Navigable with HTML Access Keys 展开：先讲清 accesskey 属性的原理与适用对象，再完整还原该练习的初始代码、任务要求与自动化测试判据，最后结合参考解答逐行分析，并结合课程结构与校验源码说明这一练习在整个无障碍知识体系中的位置。读完之后，你将掌握如何为链接添加键盘快捷键属性、如何编写可通过 hasAttribute/getAttribute 断言验证的无障碍标记，以及如何从源码层面确认 accesskey 取值的大小写敏感性。

挑战在课程结构中的位置

该挑战在仓库中的文件为 587d7790367417b2b2512aaf.md，其 frontmatter 声明了 challengeType: 0、dashedName: make-links-navigable-with-html-access-keys，属于自由挑战（非视频/可交互类型）中的 HTML 编辑型题目。

从课程结构文件可以确认它在教学序列中的坐标：

所属认证：responsive-web-design.json 的 blocks 数组中列出了 applied-accessibility 作为 Responsive Web Design 认证下的一个模块（block），与 basic-html-and-html5、basic-css、css-flexbox、css-grid 等模块并列；
模块内顺序：applied-accessibility.json 的 challengeOrder 数组共定义了 21 道题，本挑战（587d7790367417b2b2512aaf）排在第 19 位，前一题是 Give Links Meaning by Using Descriptive Link Text（用描述性链接文本让屏幕阅读器用户听懂链接含义），后两题是 Use tabindex to Add Keyboard Focus to an Element 及其续篇（用 tabindex 控制键盘焦点顺序）。

也就是说，课程的教学脉络是：先让链接“听得懂”（描述性文本）→ 再让链接“跳得快”（accesskey 快捷键）→ 最后补齐键盘焦点控制（tabindex）。本挑战正是从“语义可访问”过渡到“键盘可高效导航”的关键一环。

核心概念：accesskey 属性

原文档给出的概念说明如下：

HTML 提供了 accesskey 属性，用于指定一个快捷键，用来激活或聚焦到某个元素。添加 accesskey 属性能让纯键盘用户的导航更高效。

HTML5 允许把该属性用在任意元素上，但它对交互式元素尤为有用，包括链接（links）、按钮（buttons）和表单控件（form controls）。

文档给出的最小示例：

<button accesskey="b">Important Button</button>

对这条说明可以补充三个要点：

作用对象：快捷键绑定在“元素”上而非“页面”上，浏览器按下对应组合键（各平台不同，如 Alt/⌘/Ctrl + 该键）时，会激活该元素（链接跳转、按钮点击、表单控件聚焦）。
适用边界：HTML5 规范允许任意元素携带该属性，但文档特意强调交互式元素（链接、按钮、表单控件）是主要收益场景——对没有交互行为的静态元素（如 p、div），快捷键能带来的价值有限，且容易与浏览器自身快捷键冲突。
取值约定：练习的测试断言明确提示 “Note that case matters”（注意大小写敏感），即属性值应使用单一小写字母（如 g、c），这与文档示例中 accesskey="b" 的小写取值一致。

练习场景：为 Camper Cat 博客的两个链接加快捷键

题目的场景设定：Camper Cat 希望包裹在两篇博客标题上的链接拥有键盘快捷键，让站点用户能快速跳转到完整文章。任务要求：

给两个链接都添加 accesskey 属性，第一个设为 g（对应 Garfield），第二个设为 c（对应 Chuck Norris）。

初始种子代码（--seed-contents--，可直接复制运行）：

<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <article>

    <h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>

    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <article>

    <h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>

    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

观察种子代码的结构细节：

两个链接分别是 <a id="first"> 和 <a id="second">，位于两个 <article> 内的 <h2> 标题中，href="#" 表示跳转目标尚未填写；
每个 <article> 由 <h2>（标题链接）+ <p>（正文节选）组成，页面包裹了 header/article/footer 语义化元素——这正呼应了本模块前几道题（Make Screen Reader Navigation Easier with the header Landmark、Wrap Content in the article Element）中已经建立的语义化地标习惯。

测试判据：四条断言定义了“做对”的标准

题目附带的四段提示（hints）同时就是自动化测试的判据，全部基于 document.querySelector 对真实 DOM 的探测：

// 断言 1：id 为 first 的 a 标签必须存在 accesskey 属性
assert.isTrue(document.querySelector('#first')?.hasAttribute('accesskey'));

// 断言 2：id 为 second 的 a 标签必须存在 accesskey 属性
assert.isTrue(document.querySelector('#second')?.hasAttribute('accesskey'));

// 断言 3：first 链接的 accesskey 必须等于 'g'（大小写敏感）
assert.equal(document.querySelector('#first')?.getAttribute('accesskey'), 'g');

// 断言 4：second 链接的 accesskey 必须等于 'c'（大小写敏感）
assert.equal(document.querySelector('#second')?.getAttribute('accesskey'), 'c');

从这四条断言可以提炼出验证逻辑的三层设计：

属性存在性（hasAttribute）：先保证 accesskey 确实被写进了两个 <a> 标签上，而不是写到了 <h2> 或 <p> 上；
属性值正确性（getAttribute 精确比较）：保证取值就是单字符 g 和 c；
大小写敏感：断言直接用字面量 'g'、'c' 比较，写成 G/C 会失败——这提醒开发者快捷键字母应与文案中的单词首字母对应（Garfield → g、Chuck Norris → c）并保持小写。

另外注意断言中使用了 ?. 可选链：如果 querySelector('#first') 找不到元素（比如误删了 id），hasAttribute 不会抛异常而是得到 undefined，assert.isTrue 会失败。这也是练习要求保留原 id="first"/id="second" 的隐含原因。

参考解答与逐行解析

原文档 --solutions-- 给出的完整解答：

<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <article>

    <h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>

    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <article>

    <h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>

    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

相对种子代码，解答只改动了两行，改动模式完全一致：

- <h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
+ <h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>

- <h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>
+ <h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>

要点拆解：

属性直接加在 <a> 标签自身，而不是包裹它的 <h2> 上——因为快捷键的受益者是“可被激活的交互元素”，链接正是文档所述“particularly useful”的场景；
accesskey 与 id、href 并列为平级属性，属性书写顺序不影响解析，但这里沿用 id 之后、href 之前的位置，可读性最佳；
取值 g 与 c 均取自标题首词（Garfield、Chuck Norris）的首字母小写形式，便于用户记忆快捷键与内容的对应关系——这是实际项目中选取 accesskey 字母的实用技巧；
未改动任何 href、id 或文本内容，保证原有锚点与测试选择器继续有效。

纵深延伸：accesskey 与 tabindex 的分工

紧随其后的 Use tabindex to Add Keyboard Focus to an Element 解释了 tabindex 的三种取值语义（0 表示进入正常 Tab 序列、负值表示可编程聚焦但不可 Tab 到达），可与本挑战形成对照：

能力	`accesskey`	`tabindex`
触发方式	浏览器组合键 + 字母，一步直达指定元素	反复按 Tab，按文档顺序逐个移动
解决的问题	“从当前位置快速跳到某个高频交互元素”	“让本不可聚焦的元素（如 `div`、`p`）参与 Tab 序列”
本文档适用对象	链接、按钮、表单控件等交互式元素	任意需要键盘焦点的元素

两者互补而非互斥：accesskey 提供“跳跃式”直达，tabindex 规范“逐站式”遍历。对于纯键盘用户，一个信息密度高的页面两者都配置时，导航效率最高。

从源码结构看，该模块的验证风格也值得注意：每道题的 hints 段落都是可执行的 JS 断言，直接查询渲染后的 DOM（hasAttribute、getAttribute、textContent、code.match 等）。挑战的元数据（frontmatter、题型、文件结构）由 challenge-schema.js 等 Joi 校验文件约束，例如 schema 中对 fileJoi 定义了 seed、contents、editableRegionBoundaries 等字段，说明题目种子代码、可编辑区域边界等都会在建课流程中做结构化校验——这也是为什么练习题中 id="first"、id="second" 这类被断言依赖的锚点必须原样保留。

小结

accesskey 是 HTML5 允许的通用属性，但在链接、按钮、表单控件等交互式元素上价值最大，能为纯键盘用户提供一步到位的快捷键直达；
本挑战的核心改动是在两个 <a> 标签上分别添加 accesskey="g" 与 accesskey="c"，字母取自标题首词且保持小写（断言大小写敏感）；
测试通过 hasAttribute + getAttribute 两层断言验证属性存在性与取值精确性，选择器依赖 #first/#second，因此原有 id 不可删改；
该练习在课程序列中承上启下：上接“描述性链接文本”（语义可听），下接 tabindex（焦点顺序可控），共同构成无障碍键盘导航的完整能力拼图。