跳过导航链接（Skip to main content）的标准实现写法

跳过导航链接的标准实现是页面顶部放置隐藏但可聚焦的链接，指向主内容ID；html中置于body开头并设href=”#main-content”，css用绝对定位移出视口、聚焦时显示，确保键盘和屏幕阅读器可用。

跳过导航链接的标准实现，核心是用一个隐藏但可聚焦的链接，放在页面最开头，指向主内容区域，确保键盘用户能一键跳过重复的导航栏。

HTML 结构：放在 最顶部

在 开始后立即插入一个带 href 指向主内容 ID 的链接，并添加 class="skip-link" 便于样式控制：

跳到主要内容

ain id=”main-content”>…

CSS 样式：默认隐藏，聚焦时显示

关键在于让链接对所有人可见（包括屏幕阅读器），但视觉上只在获得焦点时出现。避免使用 display: none 或 visibility: hidden，它们会完全屏蔽屏幕阅读器：

• 用绝对定位 + 负坐标移出视口，同时保持可聚焦和可读
• 聚焦时用 left: 50% 和 transform: translateX(-50%) 居中显示
• 确保有足够对比度、字号和内边距，方便键盘用户识别

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  text-align: center;
  background: #000;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem;
  z-index: 1000;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #007bff;
}

语义与兼容性要点

• 目标元素必须存在且有唯一 ID：如
  ，不能只靠 ARIA role 替代
• 不要用 aria-hidden="true" 或 tabindex="-1" 隐藏跳过链接本身，否则键盘用户无法触发
• 支持所有主流屏幕阅读器（NVDA、VoiceOver、JAWS）和键盘操作（Tab 键）
• 可选增强：为多语言站点提供对应语言的文案，如中文写“跳到主要内容”，英文写“Skip to main content”

进阶建议（非必需但推荐）

• 如果页面有多个逻辑区块（如侧边栏、页脚），可提供多个跳过链接，分别指向 #main-content、#sidebar、#footer
• 避免在跳过链接后立即用 autofocus，它可能干扰屏幕阅读器的自然阅读流
• 测试方式：打开页面后按 Tab 键，确认第一个焦点落在跳过链接上，并能正常跳转