skip-link是键盘和屏幕阅读器用户的刚需入口，必须作为页面首个可聚焦元素置于<body>后，用绝对定位隐藏并确保聚焦时可见、目标ID真实唯一、语义结构完整。
跳过导航链接不是锦上添花的装饰，而是键盘用户和屏幕阅读器用户的刚需入口——没它，很多人得按 100+ 次 Tab 才能触达主内容。
skip-link 必须是页面第一个可聚焦元素
它得在 <body> 开头紧贴着放，不能嵌在 <header> 或 <nav> 里，否则 Tab 顺序会跳过它。常见错误是把它塞进页眉组件或用 tabindex="-1" 锁死，结果键盘用户根本碰不到。
- 正确写法：
<a href="#main-content" class="skip-link">跳到主要内容</a>紧跟在<body>后 - 目标 ID 必须真实存在且唯一，比如
<main id="main-content">，不能只靠role="main" - 别用
aria-hidden="true"或display: none隐藏它，这两者会让读屏器完全忽略该链接
隐藏逻辑必须用 position + left 移出视口
视觉隐藏 ≠ 语义隐藏。很多团队误用 clip-path、transform: scale(0) 或 opacity: 0，这些在部分读屏器（如旧版 NVDA）中不触发重绘，焦点来了也不显示。
- 推荐方案：
.skip-link { position: absolute; left: -9999px; }—— 兼容性最稳 - 聚焦时恢复可见：
.skip-link:focus { left: 1rem; top: 1rem; }，别依赖top: 0，容易被固定头部遮挡 - 确保有足够对比度（至少 4.5:1）和可点击区域（
padding≥ 8px），否则键盘用户难以定位
href 锚点跳转失败的常见原因
点了 skip-link 却没滚动？大概率是目标元素不可聚焦或被 CSS 干扰了锚点行为。
立即学习“前端免费学习笔记（深入）”；
-
<main id="main-content">上不能加tabindex="-1"，否则跳转后焦点不会落在它身上 - 避免对目标元素设
overflow: hidden或position: fixed/absolute，这会切断浏览器原生锚点滚动流 - ID 大小写敏感：HTML 中写的是
id="main-content"，但href="#Main-Content"就失效 - 如果用 JS 动态渲染主内容区，确保
id="main-content"在 DOM 加载完成时已存在，否则跳转会静默失败
最容易被忽略的一点：skip-link 不是“加完就完事”的功能。它必须和 <nav>、<main> 的语义结构配合使用——单独加个链接，但导航没包在 <nav> 里，或主内容没用 <main> 标记，整体可访问性依然残缺。
