skip-link 是页面首个可聚焦元素，通过 href="#main-content" 跳转至带唯一 id 的主内容区；需用 position:absolute + left:-9999px 隐藏，:focus 时恢复可见；禁用 clip-path/transform/opacity；目标 id 大小写敏感且不可隐藏。
怎么用 skip-link 实现键盘用户跳过导航菜单
屏幕阅读器和键盘用户默认从页面顶部逐个聚焦，如果每次都要穿过冗长的导航栏才能到主内容，体验极差。skip-link 就是解决这个问题的最小可行方案：它是一个隐藏的链接，只在获得焦点时显示，点击后直接跳转到主内容区域。
关键不是“加个链接”，而是让它在正确时机出现、跳转准确、不破坏视觉布局：
-
skip-link必须是页面第一个可聚焦元素（tabindex="-1"不行，得是tabindex="0"或原生可聚焦标签） - 目标锚点必须存在且有唯一
id，比如<main id="main-content"></main>，不能只靠role="main" - 隐藏逻辑要用
position: absolute; left: -9999px;而非display: none或visibility: hidden——否则键盘无法聚焦 - 聚焦时用
:focus恢复定位并设left: 1rem等可见位置，别用opacity动画，部分读屏器不触发重绘
skip-link 的 CSS 隐藏/显示逻辑为什么不能用 clip-path 或 transform
看似现代的隐藏方式（比如 clip-path: inset(100%) 或 transform: translateX(-100%)）在部分浏览器+读屏组合下会导致链接“不可聚焦”或“聚焦后不显示”。根本原因是：这些属性可能让元素脱离可访问渲染树，或触发合成层导致焦点状态未被正确上报。
稳妥做法只依赖经典定位偏移：
- 初始状态：
position: absolute; top: 0; left: -9999px; - 聚焦状态：
&:focus { left: 1rem; top: 1rem; z-index: 1000; } - 务必加
z-index，否则可能被 header 遮住 - 别给
skip-link设固定宽高，用padding控制内边距，避免文字换行错位
为什么 href="#main-content" 有时跳转失败
跳转失败通常不是 JS 问题，而是 DOM 结构或 ID 匹配失效：
- 目标元素
id和href值大小写必须完全一致（#Main-Content≠#main-content） - 目标元素不能是
display: none或visibility: hidden，否则 Safari + VoiceOver 会跳过 - 如果用了 Vue/React 等框架，确保
id在首次渲染时就存在，不要等useEffect或mounted后才挂载 - 避免用
aria-labelledby或aria-describedby替代真实id——href只认 ID
要不要用 JavaScript 监听 keydown 模拟 skip 功能
不需要。原生 <a href="#xxx"></a> 已经完整支持键盘跳转（Enter/Space 触发），且兼容所有读屏器。手写 JS 反而容易出问题：
- 监听
keydown时漏掉event.key === ' '（空格键），导致空格无法激活 - 手动
element.focus()后滚动位置不一致，有些浏览器不会自动滚动到目标 - 绕过浏览器原生 focus 管理，可能干扰读屏器的上下文感知
- 增加 bundle 体积，却没带来任何可访问性提升
真正的复杂点在于：这个链接得在所有设备、所有读屏模式（如 NVDA 的“焦点模式” vs “浏览模式”）下都稳定触发。越简单，越可靠。别为了“看起来更高级”去动原生语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
