ACCESSIBILITY
跳转链接Skip Link
页面第一个可获得焦点的元素，键盘 Tab 时出现「跳到主要内容」，把几十个导航项一次跳过。WCAG 2.4.1 的硬性要求。
效果预览
跳到主要内容
首页产品定价文档博客
适合用在哪
所有页面。导航项越多越必要。视觉上通常隐藏，只在获得焦点时滑入。
容易踩的坑
- 用 display:none 隐藏跳转链接，它永远无法获得焦点，等于没做。
- 目标 main 缺 tabindex=-1，焦点停在顶部，下次 Tab 又回到导航。
- 吸顶导航 z-index 高于跳转链接，链接获得焦点时被遮住看不见。
设计提示词 · Prompt
跳转链接（Skip Link）：作为 <body> 后的第一个元素，<a href="#main">跳到主要内容</a>。默认用 transform: translateY(-140%) 藏在视口外，配合 opacity:0；:focus 或 :focus-visible 时回到 translateY(0) opacity:1（0.25s 过渡）。样式是主色底白字的小胶囊、圆角 7px、左上角 8px 定位，确保完全可见不被遮挡。目标元素 <main id="main" tabindex="-1"> 需带 tabindex="-1" 才能被聚焦，且获得焦点时应无可见轮廓（或给一个不突兀的样式）。
Skip Link: as the first element after <body>, add <a href="#main">Skip to main content</a>. By default, hide it outside the viewport with transform: translateY(-140%) plus opacity:0; on :focus or :focus-visible, bring it back to translateY(0) opacity:1 (0.25s transition). Style it as a small pill with primary background and white text, 7px radius, positioned 8px from the top-left corner, fully visible and never obscured. The target element <main id="main" tabindex="-1"> needs tabindex="-1" to be focusable, and should show no visible outline when focused (or a subtle style).
常见搭配
同一页面里经常和「跳转链接」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="a11y-skip"> <div class="a11y-skip__link">跳到主要内容</div> <div class="a11y-skip__nav"><span>首页</span><span>产品</span><span>定价</span><span>文档</span><span>博客</span></div> <div class="a11y-skip__bd"><i></i><i></i><i style="width:64%"></i></div> </div>