skip navigation链接是专为键盘及屏幕阅读器用户设计的首个可聚焦元素，置于body开头，用css隐藏、聚焦时显示，指向带tabindex="-1"的，确保一键跳过导航直达正文，是wcag 2.1 aa级强制要求。
什么是 skip navigation 链接，为什么必须加
skip navigation 是给键盘用户（尤其是视障人士用屏幕阅读器）用的快捷入口，让其跳过重复的导航栏，直抵主内容。没有它，用户可能要按几十次 Tab 才能进正文——这不是体验差，是不符合 WCAG 2.1 AA 级可访问性要求。
它不是“锦上添花”，而是网站上线前必须验证的基础项。主流浏览器（Chrome/Firefox/Safari）和 NVDA/JAWS 等读屏软件都依赖这个机制。
怎么写一个真正生效的 skip link
关键不在“写了没”，而在“焦点是否真的抵达目标、是否可见、是否不干扰正常浏览”。常见失效写法：@#@#@#@#@#@#@#@#@#@0 + <main id="main"></main>，但缺了三样东西：
- 链接本身默认不可见（需用 CSS 隐藏），但获得焦点时必须显示（否则键盘用户看不到自己在哪）
-
id="main"对应的元素必须能接收焦点（<main></main>默认不可聚焦，得加tabindex="-1"） - 跳转后焦点要真正停在该元素上（仅靠
href="#main"在部分 Safari 版本中会滚动但不聚焦）
推荐写法：
<a href="#main-content" class="skip-link">跳过导航，直达主要内容</a> <header>...</header><nav>...</nav><main id="main-content" tabindex="-1"><h1>首页标题</h1> </main>
CSS 示例（确保只在聚焦时出现）：
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
为什么用 tabindex="-1" 而不是 tabindex="0"
tabindex="0" 会让 <main></main> 进入常规 Tab 顺序，造成干扰（用户无意间 Tab 到空白区域）。而 tabindex="-1" 只允许通过脚本或跳转链接聚焦，不改变自然 Tab 流，更安全。
注意：不能省略 tabindex="-1"。实测 Chrome 115+ 和 Firefox 120 中，去掉它会导致 skip link 点击后滚动到位置但焦点未停留，键盘用户仍卡在导航里。
另外，不要用 <div id="main"> 替代语义化标签——<code><main></main>、<article></article> 或 <section></section> 才有正确的 ARIA 隐含角色，读屏软件才能识别为“内容区”。
要不要加 JavaScript 增强？
纯 HTML + CSS 的 skip link 在绝大多数场景已够用。但有两个边缘情况值得加轻量 JS：
- 某些旧版 IE（如 IE11）对
tabindex="-1"元素的自动聚焦支持不稳定，可监听click后手动调用.focus() - 如果页面用了前端路由（如 React Router），
href="#main"不触发滚动/聚焦，此时需用useEffect或事件监听器主动聚焦
最小可用 JS（无框架）：
document.addEventListener('DOMContentLoaded', () => {
const skipLink = document.querySelector('.skip-link');
if (skipLink) {
skipLink.addEventListener('click', (e) => {
e.preventDefault();
const target = document.querySelector(skipLink.getAttribute('href'));
if (target) {
target.focus();
}
});
}
});
复杂点在于：不同框架（Vue/React）的生命周期时机、服务端渲染（SSR）下 DOM 是否就绪、以及是否与平滑滚动冲突。这些不是 skip link 本身的错，但容易让人误以为“加了没用”——其实只是执行时机错了。
