跳过导航链接必须是dom中第一个可聚焦元素且紧贴开头，目标id须真实存在、大小写一致并添加tabindex="-1"以确保焦点停留。
跳过导航链接不是加个 a 标签就能用的——它必须是 DOM 中第一个可聚焦元素，目标 id 必须真实存在且可聚焦，否则键盘用户按一次 Tab 就卡死在导航里。
skip-link 必须紧贴
它不能包在 <header></header>、<nav></nav> 或任何组件内部。一旦嵌套，Tab 顺序会直接跳过它，哪怕写了 tabindex="0" 也无效。
- ✅ 正确：
@#@#@#@#@#@#@#@#@#@0<header></header><main id="main-content" tabindex="-1"></main> - ❌ 错误：
<header>@#@#@#@#@#@#@#@#@#@0</header> - 别给
skip-link加tabindex="-1"，这等于主动禁用它 - 确保它没被
pointer-events: none或opacity: 0意外屏蔽
href 指向的 id 必须大小写一致且可聚焦
浏览器对 ID 匹配严格区分大小写，且 <main></main> 默认不可聚焦——不加 tabindex="-1"，跳转后焦点不会停留，只是滚动过去而已。
- ✅ 正确：
@#@#@#@#@#@#@#@#@#@2+<main id="main-content" tabindex="-1"></main> - ❌ 错误：
href="#Main-Content"对应id="main-content"（大小写不匹配） - ❌ 错误：
<main id="main-content"></main>缺少tabindex="-1"→ 跳转后焦点落在第一个子元素（比如<h1></h1>），但可能被 CSS 干扰（如visibility: hidden） - 避免对目标元素设
overflow: hidden、position: fixed或position: absolute，这些会切断原生锚点滚动流
CSS 隐藏方式必须兼容旧版读屏器
用 display: none 或 aria-hidden="true" 会让 NVDA、VoiceOver 彻底忽略该链接；用 transform: scale(0) 或 opacity: 0 则可能焦点来了但视觉不出现。
- ✅ 推荐隐藏：
.skip-link { position: absolute; left: -9999px; } - ✅ 聚焦时显示：
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1000; outline: 2px solid #007aff; outline-offset: 2px; } - 别用
top: 0—— 容易被position: fixed的导航栏盖住 - 确保焦点轮廓有足够对比度（至少 4.5:1）和可点击区域（
padding ≥ 8px）
测试时最容易漏掉的三个动作
写了不代表生效。必须用纯键盘走一遍流程：
- 打开页面 → 按一次
Tab→ 确认焦点落在skip-link上（看到焦点轮廓） - 回车 → 视口是否滚动并聚焦到
#main-content内部（注意：不是只滚动，焦点必须落进去） - 再按一次
Tab→ 焦点是否自然进入主内容里的第一个可聚焦元素（如<h1></h1>、<button></button>）？如果停在空白处或卡住，大概率是<main></main>缺了tabindex="-1"，或它被 CSS 干扰了可聚焦性
最常被忽略的是：跳过链接必须和语义结构配合——<nav></nav> 得包住真正的导航列表，<main></main> 必须是 的直接子元素，否则读屏器识别不出“这是主内容区”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
