Skip link 跳过导航链接
/SKIP LINK/ · noun · 导航类模式 · #139
网页上第一个能获得焦点的元素，写着“跳到主要内容”（Skip to main content），平时隐藏，按 Tab 键才出现。用键盘和读屏软件的人可以借它跳过 Logo 和导航菜单，直接到达页面的主要内容，不用在每个页面都把同样的导航链接逐个按一遍 Tab。它是满足 WCAG“可以跳过多页重复的内容块”这条要求最常见的做法。
你可能会这样叫它
- “按 Tab 键才出现的链接”
- “页面顶部隐藏的跳转链接”
- “跳到正文的链接”
……它的名字是 跳过导航链接（Skip link）。
代码里叫什么
| Web (HTML) | <a href="#main"> <main id="main"> |
|---|---|
| Web (CSS) | position: absolute :focus 获得焦点前移到屏幕外；用 display: none 会把它移出 Tab 顺序 |
| Bootstrap 5 | .visually-hidden-focusable |
| Tailwind CSS | sr-only focus:not-sr-only |
| WordPress | 区块主题会自动加上 |
| iOS / Android | App 里没有对应控件：VoiceOver 和 TalkBack 用户按标题跳转 |
复制给 AI 编程工具
在每个页面的最前面加一个跳过导航链接，作为第一个能获得焦点的元素：<a href="#main" class="skip-link">跳到主要内容</a>。获得键盘焦点前把它移到屏幕外，获得焦点后显示在左上角、压在所有内容之上，对比度要高，焦点框清楚可见。链接指向 <main id="main">（如果焦点没有移过去，就给 main 加 tabindex="-1"），不要用 display: none 隐藏；检查按 Tab、再按回车后，下一次按 Tab 会进入主要内容。