真实 href="#main-content"，main 加 tabIndex=-1；跳过链接是 body 首个可聚焦元素， 平时 visually hidden，键盘聚焦才显现；激活后焦点落到 main，读屏播报「主要内容」。
界面与交互 · 导航结构
跳过链接SkipLink
页面首个可聚焦的页面内链接：平时隐藏，Tab 聚焦时显现，激活后把焦点送到 main，让键盘 / 读屏用户跳过重复导航。
跳过链接把焦点一次送到 main
亲手在微型页面上按真实 Tab 与 Enter，再移除并恢复跳过链接；看焦点环、真实路径和 main 的到达徽章如何变化——跳过链接省下穿过整段导航的按键，结果长在物件上。
面板教会的知识点
把刚才在微型页面上看到的现象命名为五条规则。
- 首个可聚焦元素。有跳过链接时，第 1 次 Tab 就落在它（不是搜索框或导航第一项）——面板里焦点环第 1 步就在跳过链接上。
- 平时隐藏，聚焦显现。默认 visually hidden（clip 到 0），获得键盘焦点才显现——面板里它从「隐藏」变为高对比的青绿色链接。
- 真实 href 指向 main。
href="#main-content"指向 main 的 id——面板里按真实 Enter 后，焦点直接落到 main 区域。 - main 用 tabIndex=-1 接收焦点。不在 Tab 顺序里，但能被脚本 / 锚点聚焦——面板里 main 区域获得焦点环并播报「主要内容」。
- 节省 N 次按键。有跳过链接 1 Tab + Enter 直达；无跳过链接要逐个穿过 5 个导航项才到正文——移除链接后，真实焦点路径与到达徽章会显示差异。
什么时候该用跳过链接
出现以下信号时，键盘和读屏用户需要它；不在这些场景里硬塞反而冗余。
- 重复导航 ≥ 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 个工具栏按钮，正文是一张可操作的数据表。键盘用户最快的进正文方式是？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。