真实 href="#main"，main 加 tabIndex=-1；跳过链接是 body 首个可聚焦元素， 平时 visually hidden，键盘聚焦才显现；激活后焦点落到 main，读屏播报「主要内容」。
界面与交互 · 导航结构
跳过链接SkipLink
页面首个可聚焦的页面内链接：平时隐藏，Tab 聚焦时显现，激活后把焦点送到 main，让键盘 / 读屏用户跳过重复导航。
跳过链接把焦点一次送到 main
亲手在微型页面上按 Tab、按 Enter、切换有无跳过链接，看焦点环、Tab 计数和 main 的到达徽章如何变化——跳过链接省下几次按键，结果长在物件上。
第 0 步：这是一个有重复导航的微型页面，目标是用最少按键到达正文。按「模拟 Tab」逐个走过焦点，按「模拟 Enter」激活跳过链接。切到「无跳过链接」 再走一遍，对照到达 main 各需几次按键——结果都长在物件上（焦点环、Tab 计数、main 的到达徽章）。
- 1跳过链接·跳到主内容
- 2搜索框
- 3产品
- 4文档
- 5定价
- 6登录
- 7开始阅读
- 8下一章
已按 Tab 0 次当前焦点：页面外到达正文：未到达
对照：焦点还在页面外（未开始 Tab）。原因：跳过链接默认 visually hidden，第一个 Tab 才显现。下一步：按「模拟 Tab」，看跳过链接何时从隐藏变为出现。
面板教会的知识点
把刚才在微型页面上看到的现象命名为五条规则。
- 首个可聚焦元素。有跳过链接时，第 1 次 Tab 就落在它（不是搜索框或导航第一项）——面板里焦点环第 1 步就在跳过链接上。
- 平时隐藏，聚焦显现。默认 visually hidden（clip 到 0），获得键盘焦点才显现——面板里它从「隐藏」变为 Rausch 显现。
- 真实 href 指向 main。
href="#main"把焦点送到 id 为 main 的元素——按「模拟 Enter」后焦点直接落到 main 区域。 - main 用 tabIndex=-1 接收焦点。不在 Tab 顺序里，但能被脚本 / 锚点聚焦——面板里 main 区域获得焦点环并播报「主要内容」。
- 节省 N 次按键。有跳过链接 1 Tab + Enter 直达；无跳过链接要逐个穿过 5 个导航项才到正文——对照 Tab 计数即可看到差异。
什么时候该用跳过链接
出现以下信号时，键盘和读屏用户需要它；不在这些场景里硬塞反而冗余。
- 重复导航 ≥ 3 项：后台、文档站、营销页——顶部有搜索 + 主导航 + 工具栏，键盘逐个穿过很慢。
- 正文在 DOM 较后位置：键盘用户必须先穿过整段导航才能到达真正想读的内容。
- 和返回顶部分工：返回顶部解决「离开顶部远」；跳过链接解决「进入页面时穿过整段导航」。短页面只有 1–2 个焦点时不必用。
怎么用好一个跳过链接
从结构到激活的最短路径，每一步都能被辅助技术理解。
- 给 main 加
id（如id="main-content"）和tabIndex=-1，让它能接收焦点。 - 在 body 最前面放
<a href="#main-content" class="skip-link">跳到主内容</a>，确保它是页面首个可聚焦元素。 - 默认 visually hidden（
clip/position:absolute），:focus时恢复可见——不依赖鼠标 hover。 - 焦点样式要高对比、清晰可读；激活后让 main 真正获得焦点（
main.focus()或依赖锚点行为）。 - 导航内容变化后，链接的 href 与 main 的 id 保持稳定；移动端、横屏、缩放字体下焦点环仍可见。
正反例：跳过链接能不能被键盘用上
同一目标——让键盘用户跳过导航进正文；只改一个关键选择：链接是否键盘可达、main 是否能接收焦点。
跳过链接依赖鼠标 hover 才显现（键盘用户永远看不到）；或 main 没加 tabIndex=-1， 激活后焦点无处可落、跳回导航第一项；甚至用 div 冒充链接，键盘根本到不了。
快速自测
你在做一个后台页面：顶部有搜索 + 6 项主导航 + 4 个工具栏按钮，正文是一张可操作的数据表。键盘用户最快的进正文方式是？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。