跳过链接是页面首个可聚焦的隐藏链接，专为键盘和屏幕阅读器用户设计，用于绕过重复导航直达主内容区；它必须置于开头、用绝对定位隐藏、聚焦时显示，且目标id真实唯一，是wcag 2.1 aa级强制要求。
什么是“跳过链接”及其必要性 屏幕阅读器用户每次加载页面都要从头开始听完整个导航栏，如果每个页面都有相同的顶部菜单，反复收听会极大降低效率。跳过链接就是放在页面最前面的隐藏链接，能让辅助技术用户一键跳到主内容区，绕过重复结构。
它不是装饰性功能，而是 WCAG 2.1 的 AA 级要求（2.4.1 Bypass Blocks），不加可能让部分用户无法有效使用你的网站。
如何写一个真正生效的跳过链接
关键不在“写了链接”，而在“它能被键盘聚焦且视觉可见（当获得焦点时）”。很多实现只用 display: none 或 visibility: hidden，结果链接对屏幕阅读器不可见，也打不开。
正确做法是用 CSS 将其视觉隐藏但保留在可访问流中：
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
width: auto;
}
HTML 结构必须放在 最开头：
<a href="#main-content" class="skip-link">跳转到主要内容</a> <header>...</header><main id="main-content">...</main>
为什么 tabindex="-1" 不该加在跳过链接上
有人误以为要手动控制焦点顺序，给跳过链接加 tabindex="-1"，结果它完全无法被键盘 Tab 触达——屏幕阅读器依赖原生 tab 顺序发现可交互元素。
跳过链接必须满足两个条件：
- 默认可聚焦（即不设
tabindex，或设为0） - 出现在 DOM 顺序最前端（否则
Tab第一次按不到） - 目标
id必须真实存在且唯一（比如id="main-content"要和href="#main-content"严格匹配）
多语言或复杂布局下的常见坑
如果页面有多个主区域（比如带侧边栏的仪表盘），仅设一个 #main-content 可能不够。但不要堆砌多个跳过链接（如“跳到主内容”“跳到侧边栏”），这反而增加认知负担。
更稳妥的做法是：
- 优先保证
#main-content指向用户最常需要的区域（通常是<main></main>） - 用
aria-labelledby或aria-label明确说明用途，例如aria-label="跳转到文章正文" - 避免用 JavaScript 动态插入跳过链接——某些读屏工具在 DOM 初始渲染后才启动，动态添加可能被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
