跳过导航链接是键盘和屏幕阅读器用户的刚需入口，必须作为页面首个可聚焦元素置于开头，用绝对定位隐藏、聚焦时显示，目标id真实唯一且语义正确，否则完全无效。
跳过导航链接不是“加了就行”的装饰性元素，它必须在页面加载后第一个可聚焦、能触发滚动、且目标真实可访问——否则对键盘和屏幕阅读器用户完全无效。
skip-link 必须是页面首个可聚焦元素
它得紧贴 开头放，不能嵌在 <header></header> 或组件内部。一旦被包裹，Tab 顺序会跳过它，键盘用户根本碰不到。
- 错误写法：
<header>@#@#@#@#@#@#@#@#@#@0</header> - 正确写法：
@#@#@#@#@#@#@#@#@#@0<header>...</header> - 别给
skip-link加tabindex="-1"，这等于主动锁死它 - 确保它没被其他 CSS（比如
pointer-events: none）意外禁用
隐藏与显示必须用 position + left 移出视口
用 display: none 或 visibility: hidden 会让读屏器彻底忽略该链接；opacity: 0 或 transform: scale(0) 则可能让焦点来了但视觉不出现——旧版 NVDA 就会卡在这儿。
- 推荐隐藏方式：
.skip-link { position: absolute; left: -9999px; } - 聚焦时恢复可见：
.skip-link:focus { left: 1rem; top: 1rem; }（别用top: 0，容易被 fixed header 遮住） - 必须设
z-index: 1000以上，防止被导航栏盖住 - 显式定义焦点轮廓：
outline: 2px solid #007aff; outline-offset: 2px;
href 锚点跳转失败的三大硬伤
点了链接却没滚动？大概率栽在这三处：
- 目标元素不存在或 ID 拼写不一致：
href="#main-content"对应的必须是真实的<main id="main-content"></main>，大小写敏感，不能是id="Main-Content" - 目标元素加了
tabindex="-1"—— 这会让跳转后焦点落空，浏览器不会自动聚焦它；正确做法是保留可聚焦能力，或用 JS 补充focus() - CSS 干扰锚点行为：目标元素设了
overflow: hidden、position: fixed或position: absolute，会切断原生滚动流
语义结构缺一不可，单独加链接没用
skip-link 不是孤立功能。它依赖整套语义标记才能生效：导航必须包在 <nav></nav> 里，主内容必须用 <main></main> 标记并带唯一 ID，否则即使链接跳过去了，读屏器也识别不出“这是主内容区”。
- 别只靠
role="main"替代<main id="main-content"></main>，部分读屏器不认 ARIA role 作为锚点目标 - 如果用 JS 动态渲染
<main></main>，确保其id在 DOM 加载完成时已存在，否则跳转会静默失败 - 多区块页面可扩展多个 skip-link，如指向
#sidebar或#footer，但每个目标 ID 仍需真实、唯一、可聚焦
最容易被忽略的点：它不是“写完就上线”的一次性任务。每次改导航结构、换框架、加新组件，都得重新验证 Tab 顺序、焦点路径和滚动行为——否则可访问性就断在那一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
