跳过链接
Skip Link
别名:跳过导航跳到主内容跳过链接一键跳正文skip navskip navigation
这是什么
页面第一个可聚焦元素，通常是视觉上隐藏的链接；键盘用户按下第一个 Tab 就能看见它，激活后直接跳到主内容区，不必逐个穿过顶部导航链接。长导航站点的必备逃生口，WCAG 称之为「跳过区块」。
名词辨析
跳过链接不是「返回顶部」——跳过链接在文档流最前、服务键盘用户跳过导航；返回顶部出现在长页底部，服务滚动浏览者。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 顶部导航链接超过 5 个，且每页重复出现
- 单页应用路由切换后焦点需要有处可去
- 页头含搜索、登录、语言切换等大量可聚焦项
✕ 不适用场景
- 导航只有两三个链接，跳过收益小于复杂度
- 把「跳过」做成页头第一个常驻菜单项而不是隐藏链接
- 跳过目标没有 tabindex="-1"，锚点落点不可聚焦
常见形式
左上角芯片
Corner chip
聚焦时浮现在左上角，最常见
全宽横条
Full-width bar
聚焦时横贯页头，更难错过
行内常驻
Persistent inline
始终可见的小字链接，代价是占一条视觉行
实现要点
clip-path:focusposition: absolutescroll-margin-top隐藏用 position:absolute + clip-path:inset(50%)（或 left:-9999px），:focus 时恢复到视口内并给足对比度；目标区 main 加 tabindex="-1" 并 scroll-margin-top 抵消吸顶页头。放在 <body> 最前、页头之前。SPA 可在路由切换后用它归还焦点。
平台 API
<a href="#main">tabindexlandmark roles代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| WCAG | 2.4.1 Bypass Blocks |
| WebAIM | Skip Navigation |
相关概念
让所有功能都能只用键盘完成：Tab/Shift+Tab 按合理顺序移动焦点，复合组件内用方向键漫游并配 roving tabindex，Escape 关闭浮层并归还焦点。这是焦点环之外的一整套焦点秩序，规则写在 ARIA APG 里。
无障碍搭配使用固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件搭配使用用可见轮廓标记当前键盘焦点位置，让用户知道下一个按键会落在哪里。鼠标点击往往不需要它，但键盘与辅助技术用户必须始终看见焦点在哪，否则只能盲操作。通常用 :focus-visible 控制——键盘聚焦才显示，鼠标点击不打扰。
无障碍搭配使用容易混淆
navbar 是被跳过的长导航本身，不是跳过机制；把「跳过导航」塞成 navbar 第一项就失去了意义。