跳过链接

跳过链接是位于每个页面最顶部的键盘快捷方式，允许用户跳过重复的导航区域，直接进入主要内容。它满足 WCAG 2.4.1 绕过区块（A 级）的要求，是实现无障碍访问成本最低的手段之一。

存在的意义

以典型的内容网站为例：页眉包含六个顶级导航链接、一个语言切换器和一个主题切换按钮，页脚还有十二个链接。每个页面都会重复这些结构。键盘用户或屏幕阅读器用户打开一篇文章时，必须依次按 Tab 键经过约三十个可交互元素，才能到达文章正文。每次页面跳转都要重复这一过程，极为耗时。

跳过链接是一个 <a href="#main-content">跳至内容</a> 元素，作为文档中第一个可聚焦元素放置在页面顶部。用户在页面加载后按一次 Tab 键，看到”跳至内容”提示，按 Enter 键后焦点即跳转至文章正文。

实现方法

该模式代码量极小，但有几个常见陷阱需要注意：

<a class="skip-link" href="#main-content">Skip to content</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

以下三个细节至关重要：

1. 链接在获得焦点时必须可见。 若跳过链接始终设为 display: none，视觉型键盘用户将无法感知其存在。应通过定位将其移至屏幕外，而非使用 display: none 或 visibility: hidden 隐藏。

2. 目标元素必须能接受焦点。 裸 <main> 元素默认不接受键盘焦点。添加 tabindex="-1" 可使其支持程序化聚焦，确保浏览器在链接激活时真正移动焦点。否则，URL 哈希值虽然改变，焦点却不会移动，下一次按 Tab 键仍会从页面顶部重新开始，跳过链接的意义将完全丧失。

3. 必须是第一个可聚焦元素。 不是”在前 100 个元素中”，而是第一个。若在其前方存在其他元素（如 Logo 链接、搜索图标），用户需要先 Tab 经过这些元素才能到达跳过链接，从而失去意义。

多个跳过链接

包含多个重复区域的长页面，有时可以提供一个小型”跳过”菜单代替单一链接：

• 跳至主要内容
• 跳至导航
• 跳至页脚

提供三至四个目标的简短聚焦可见列表是合理的，但不宜在每个页面顶部放置自动生成的冗长目录。

不能替代的内容

跳过链接是绕过区块的安全网，但不能替代以下内容：正确的地标元素（<nav>、<main>、<aside>、<footer>）、正确的标题层级结构（每页一个 <h1>，层级清晰的 <h2>），以及在重复地标上添加 ARIA aria-label。屏幕阅读器用户通过键盘快捷键在区域和标题之间导航，这依赖于上述结构的存在；跳过链接面向的是视觉型纯键盘用户。