在大多数电商网站上按 Tab 键计数。一秒、两秒、三秒……你仍然在页眉中。十秒、十五秒、二十秒……你已经通过了导航菜单。按了二十五次 Tab 键后，你终于到达了主内容区域。
对于使用鼠标的人来说，页眉是看不见的开销。对于键盘用户来说，这是他们每次加载页面或返回之前访问过的页面时都要翻越的一堵墙。在有一个 30 项超级菜单的商店中，翻越这堵墙可能需要超过一分钟。
跳过导航链接在两秒钟内解决了这个问题。按一次 Tab，按 Enter，你就到达了内容。这是网络开发中最简单的无障碍功能，但大多数 Shopify 商店都没有——许多有的店铺实现方式也不正确。
- WCAG 2.4.1（A 级）要求必须提供绕过重复内容块的机制——跳过链接是标准解决方案
- 平均电商页眉迫使键盘用户通过 20-40 个制表位才能到达主内容
- 跳过链接将导航开销从 30+ 秒减少到每页不到 2 秒
- 在排名前 100 万的网站中，只有 32% 具有正常运行的跳过链接（WebAIM 2024）
- GitHub、Amazon 和 Google 都使用跳过链接——这是标准实践，而不是边界情况
为什么存在跳过链接
每个网站都有重复的内容块：logo、主导航、搜索栏、宣传横幅，可能还有包含登录/购物车链接的工具栏。鼠标用户瞬间就能跳过这些——他们的眼睛跳到内容，光标跟随。
键盘用户没有这种便利。制表顺序是线性的。页眉中的每个交互元素都按顺序访问：logo 链接、每个导航项、搜索按钮、购物车图标、账户链接。如果你的超级菜单是可展开的，每个子菜单项都会增加计数。
WCAG 成功标准 2.4.1（绕过块）就是为了解决这个问题而存在的。在 A 级（最低合规级别），它要求”在多个网页上重复的内容块必须提供绕过机制”。
跳过导航链接是普遍公认的解决方案。W3C 网络无障碍倡议将其列为满足 2.4.1 的首选技术。
没有跳过链接问题有多严重？
为了量化这个问题，考虑一个典型的 Shopify 商店页眉：
| 元素 | 制表位数 |
|---|---|
| Logo（链接） | 1 |
| 主导航项（6 个类别） | 6 |
| 每个类别的超级菜单链接（平均 8 个） | 48 |
| 搜索按钮 | 1 |
| 账户/登录 | 1 |
| 购物车图标 | 1 |
| 宣传横幅链接 | 1 |
| 语言/货币选择器 | 2 |
| 合计 | 61 |
大约每次 Tab 按键 0.5 秒，到达主内容需要 30 秒的开销。每页都是这样。如果用户在一个会话中访问 5 个页面，这就是 2.5 分钟在相同导航中点击。
屏幕阅读器用户体验得更加突出。每个制表位不仅仅是视觉跳跃——屏幕阅读器宣布该元素：”链接，女性服装。链接，男性服装。链接，儿童。链接，促销……”每个公告需要 1-2 秒的音频。
一个正常运行的跳过链接消除了所有这些。
跳过链接的工作原理
跳过链接是指向主内容区域的锚链接。它是页面上第一个可获得焦点的元素——这意味着用户按 Tab 时出现的第一件事。
基本实现
HTML 很简洁：
<!-- <body> 内的第一个元素 -->
<a href="#main-content" class="skip-link">跳至主内容</a>
<!-- ...页眉、导航等... -->
<!-- 主内容区域 -->
<main id="main-content" tabindex="-1">
<!-- 页面内容在这里 -->
</main>
<main> 元素上的 tabindex="-1" 很重要。没有它，某些浏览器在激活跳过链接时不会将焦点移到目标。即使元素不应该出现在正常制表顺序中，它也需要能够以编程方式获得焦点。
CSS：获得焦点时可见，否则隐藏
跳过链接通常隐藏，直到用户按 Tab。这对鼠标用户保持不可见，同时让键盘用户看到的第一件事就是它：
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 9999;
}
.skip-link:focus {
position: fixed;
top: 10px;
left: 10px;
width: auto;
height: auto;
padding: 12px 24px;
background: #000000;
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 100000;
}
当跳过链接获得焦点（用户按 Tab）时，它在左上角滑入视图。它很大、高对比度，不会被错过。当焦点移离它时，它再次消失。
为什么 display: none 不起作用
一个常见的错误是用 display: none 或 visibility: hidden 隐藏跳过链接：
/* 不要这样做 */
.skip-link {
display: none;
}
.skip-link:focus {
display: block;
}
具有 display: none 的元素从制表顺序中完全删除。跳过链接变得无法获得焦点——它可能根本不存在。
正确的技术使用离屏位置。元素仍在 DOM 中并在制表顺序中；它只是在获得焦点之前在视觉上位于无人能看到的地方。
在 Shopify 中实现跳过链接
向 Shopify 商店添加跳过链接需要编辑主题的布局文件。以下是分步流程。
步骤 1：编辑 theme.liquid
打开你的 Shopify 主题编辑器，导航到 Layout > theme.liquid。找到开启的 <body> 标签并在其后立即添加跳过链接：
<body>
<a href="#MainContent" class="skip-link">跳至内容</a>
<!-- 其余主题... -->
步骤 2：添加目标 ID
找到你的主内容开始的位置。在大多数 Shopify 主题中，这是一个 <main> 标签或具有特定类的 <div>。添加目标 ID：
<main id="MainContent" role="main" tabindex="-1">
许多 Shopify 主题已经有一个 id="MainContent" 的元素。添加重复元素之前请检查你的主题。
步骤 3：添加 CSS
将跳过链接样式添加到你主题的 CSS 文件中。使用前一节中的样式，调整颜色以匹配你的品牌。
步骤 4：测试
在你商店的主页上按 Tab。跳过链接应该出现在左上角。按 Enter。焦点应该跳到主内容区域，绕过整个页眉。
在多个页面上测试——产品页面、集合页面、购物车和结账——以验证跳过链接正常工作。
多个跳过链接
某些网站受益于不止一个跳过链接。如果你的页面有多个内容区域（侧栏过滤器、产品网格、页脚导航），你可以提供到每个的快捷方式：
<div class="skip-links">
<a href="#MainContent" class="skip-link">跳至内容</a>
<a href="#ProductGrid" class="skip-link">跳至产品</a>
<a href="#SearchBar" class="skip-link">跳至搜索</a>
</div>
当用户按 Tab 超过前一个时，每个附加跳过链接出现。第一个 Tab 显示”跳至内容”，第二个显示”跳至产品”，第三个显示”跳至搜索”。
请谨慎使用此模式。两个或三个跳过链接很有帮助。十个跳过链接会失去意义——你只是在创建另一个要绕过的块。
顶级网站如何处理
- GitHub：两个跳过链接——”跳至内容”和”跳至页脚导航”
- Amazon：一个跳过链接——”跳至主内容”
- Google：一个跳过链接——”跳至主内容”（出现在搜索结果上）
- BBC：三个跳过链接——”跳至内容”、”无障碍帮助”和”跳至实时聊天”
行业共识是一两个跳过链接覆盖 95% 的用例。
常见实现错误
尽管是最简单的无障碍功能之一，跳过链接出现故障的频率惊人。WebAIM 的 2024 年百万首页报告发现只有 32.4% 的排名前 100 万的网站有正常运行的跳过链接。
以下是最常见的失败：
错误 1：跳过链接指向虚无
跳过链接存在，但目标 ID 不匹配：
<!-- 链接指向 #main -->
<a href="#main" class="skip-link">跳至内容</a>
<!-- 但内容有不同的 ID -->
<main id="MainContent">
在跳过链接上按 Enter 什么都不会发生。用户感到困惑。
修复：验证 href 值与目标元素上的 id 匹配。通过点击跳过链接并检查焦点是否移动来测试。
错误 2：目标不可获得焦点
没有 tabindex="-1"，某些浏览器不会将焦点移到目标：
<!-- 缺少 tabindex -->
<main id="MainContent">
URL 哈希变化（你在地址栏看到 #MainContent），但焦点保持不变。用户按 Tab 会得到下一个页眉元素而不是第一个内容元素。
修复：将 tabindex="-1" 添加到目标元素。
错误 3：跳过链接永远不可见
某些实现会永久隐藏跳过链接：
.skip-link {
display: none !important;
}
这违反了 WCAG。跳过链接必须在获得焦点时可见。它们可以默认离屏，但必须在焦点时显示。
修复：使用上述离屏位置技术，而不是 display: none。
错误 4：跳过链接出现在其他元素之后
如果跳过链接不是第一个可获得焦点的元素，它就失去了意义。用户在到达它之前通过其他元素的制表：
<body>
<div class="promo-bar">
<a href="/sale">夏季促销 - 优惠 20%</a>
</div>
<a href="#MainContent" class="skip-link">跳至内容</a>
这里，宣传横幅链接首先获得焦点。跳过链接是第二个。
修复：将跳过链接放在 <body> 的最先子元素，在任何横幅、页眉或其他内容之前。
跳过链接和屏幕阅读器
跳过链接使所有键盘用户受益，但对屏幕阅读器用户特别重要。
当屏幕阅读器遇到一个页面时，它按 DOM 顺序读取元素。没有跳过链接，用户在每个页面上听到完整的页眉：”横幅，链接，Navi Plus。导航，列表，6 个项目。链接，女性服装。链接，男性服装……”这每页需要 30-60 秒。
有了跳过链接，屏幕阅读器宣布：”链接，跳至内容。”用户按 Enter，立即听到页面标题或第一段。
现代屏幕阅读器还具有内置地标导航（按 H 跳转到标题，按 1-6 表示标题级别，按 D 表示地标）。但跳过链接是一个通用后备方案，即使在语义 HTML 不完美时也能正常工作。
Shopify 主题检查如果你使用的是基于 Shopify Dawn 的主题（2.0+），跳过链接已经内置。在 theme.liquid 中搜索"skip"来验证。如果你在使用旧主题或自定义主题，你可能需要手动添加一个。
跳过链接的速度论证
跳过链接不仅仅是关于无障碍合规。它是一个生产力功能。
考虑一个 B2B 买家每周下订单。他们访问你的商店，通过书签直接进入集合页面，然后开始添加产品。如果他们正在使用键盘导航（许多数据输入专业人员都这样做），每次页面重新加载都会迫使他们再次通过页眉。
没有跳过链接：每页 30 秒的页眉点击，每个会话 20 页 = 浪费 10 分钟在重复导航上。
有了跳过链接：每页 2 秒，每个会话 20 页 = 总共 40 秒。
这是导航开销减少 93%。对于频繁的买家，这是”容忍”和”高效”之间的区别。这是一个细节，它可以将一次性客户变成常客。
诸如 Navi+ Menu Builder 之类的工具可以通过生成从一开始就能很好地与跳过链接和键盘导航配合的导航结构来提供帮助——这意味着你不必将这些模式改造到未为其设计的主题中。
测试清单
在考虑跳过链接实现完成之前，验证以下每一项：
- 在新页面加载上按 Tab。跳过链接在视口顶部以可视方式出现。
- 在跳过链接上按 Enter。焦点移到主内容（用 Tab 验证——下一个获得焦点的元素应该在主内容内，而不是在页眉中）。
- 跳过链接具有足够的对比度（4.5:1 的文本，因为它是普通尺寸的文本）。
- 跳过链接适用于每种页面类型：主页、集合、产品、购物车、搜索结果、博客。
- 在移动设备上（在浏览器开发工具中测试），跳过链接仍然出现并正常运行。
- 跳过链接是页面上第一个可获得焦点的元素——其他任何东西都不会先获得焦点。
- 使用跳过链接后，按 Shift+Tab 将焦点移回页眉（不回到跳过链接）。
如果所有七个都通过，你的跳过链接实现就很稳固。它花费 15 分钟构建，将为键盘用户节省数小时的累积沮丧。
本文是更大指南的一部分，讨论 键盘导航：为什么超越无障碍访问很重要。