跳转链接与绕过区块
首个可聚焦的 '跳到主内容' 链接，让键盘用户绕过导航。
无障碍入门
为什么
键盘用户每页加载 Tab 过每导航链接 — 15 次 Tab 到内容。跳转链接直跳主区，键盘用户最高影响 a11y 特性（WCAG 2.4.1）。
何时使用
每有主内容前重复导航的页。是 DOM 首元素，在头前。营销页也无例外。
如何做
1. 标记 — <a href="#main" class="skip-link">跳到主内容</a> 作 body 首元素
2. 视觉隐藏 — clip/sr-only 直到 :focus，然后显为左上横幅
3. 目标 — <main id="main" tabindex="-1">；tabindex=-1 使其可受程序聚焦
4. 点击聚焦 — 浏览器滚到 #main 但不总聚焦；加 focus 处理
5. 测试 — 页加载 Tab，跳转链接首现，Enter 跳主区，下 Tab 在内容
6. 多个 — 复杂页跳到导航、跳到页脚；一跳到主覆盖 95% 情况
7. 标签 — '跳到主内容' 是约定；别创意，用户认此短语
示例
/* 跳转链接 — 聚焦前隐藏 */
.skip-link {
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%); /* 离屏 */
background: var(--color-action-primary);
color: white;
padding: 0.5rem 1rem;
z-index: var(--z-toast);
transition: transform 150ms;
}
.skip-link:focus { transform: translateY(0); } /* 聚焦时滑入 */
<!-- index.html -->
<body>
<a href="#main" class="skip-link">跳到主内容</a>
<header><!-- 15 导航链接 --></header>
<main id="main" tabindex="-1">
<h1>页面内容</h1>
</main>
</body>
// 确保焦点移到 main（某些浏览器仅滚）
document.querySelector(".skip-link")?.addEventListener("click", (e) => {
e.preventDefault();
document.getElementById("main")?.focus();
});
常见问题
- ⚠跳转链接仅 display:none 视觉隐藏 — 永不可聚焦，违背目的
- ⚠main 无 tabindex=-1 — 浏览器滚但不聚焦，屏幕阅读器留链接
- ⚠跳转链接 DOM 中在头后 — 键盘用户到它前 Tab 过导航
最佳实践
- ✓<body> 首元素 — 在头前，使每页首 Tab 停
- ✓用 sr-only + :focus 显，绝不用 display:none — 离屏时须可聚焦
- ✓给 <main> 加 tabindex=-1 — 确保点击时聚焦（非仅滚）