跳过导航链接的标准实现是页面顶部放置隐藏但可聚焦的链接，指向主内容ID；HTML中置于body开头并设href="#main-content"，CSS用绝对定位移出视口、聚焦时显示，确保键盘和屏幕阅读器可用。
跳过导航链接的标准实现，核心是用一个隐藏但可聚焦的链接，放在页面最开头，指向主内容区域，确保键盘用户能一键跳过重复的导航栏。
HTML 结构：放在 <body> 最顶部
在 <body> 开始后立即插入一个带 href 指向主内容 ID 的链接，并添加 class="skip-link" 便于样式控制：
<header>...</header>
<nav>...</nav>
<main id="main-content">...</main>
CSS 样式：默认隐藏，聚焦时显示
关键在于让链接对所有人可见（包括屏幕阅读器），但视觉上只在获得焦点时出现。避免使用 display: none 或 visibility: hidden，它们会完全屏蔽屏幕阅读器：
- 用绝对定位 + 负坐标移出视口，同时保持可聚焦和可读
- 聚焦时用
left: 50%和transform: translateX(-50%)居中显示 - 确保有足够对比度、字号和内边距，方便键盘用户识别
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：如
<main id="main-content">，不能只靠 ARIA role 替代 -
不要用
aria-hidden="true"或tabindex="-1"隐藏跳过链接本身，否则键盘用户无法触发 - 支持所有主流屏幕阅读器（NVDA、VoiceOver、JAWS）和键盘操作（Tab 键）
- 可选增强：为多语言站点提供对应语言的文案，如中文写“跳到主要内容”，英文写“Skip to main content”
进阶建议（非必需但推荐）
- 如果页面有多个逻辑区块（如侧边栏、页脚），可提供多个跳过链接，分别指向
#main-content、#sidebar、#footer - 避免在跳过链接后立即用
autofocus，它可能干扰屏幕阅读器的自然阅读流 - 测试方式：打开页面后按 Tab 键，确认第一个焦点落在跳过链接上，并能正常跳转
