跳过导航链接需为真实元素且位于DOM最前,指向带唯一语义ID的主内容区;聚焦时必须可见,禁用outline: none;可用视觉隐藏CSS技巧实现无障碍聚焦。

跳过导航链接要被屏幕阅读器识别并可用,关键在于语义正确、焦点可见、位置合理,且不依赖 JavaScript。
使用标准的锚点链接结构
role="link"(或 跳转到主内容)确保链接在获得焦点时可见
屏幕阅读器用户常配合键盘操作,链接必须在聚焦时清晰显示,否则无法确认是否激活成功。
- 默认移除
会破坏可访问性,如需自定义样式,用... 或outline: none替代- 推荐做法:只在聚焦时显示(避免始终占据视觉空间),例如:
outline放在 DOM 最前面,且不被隐藏
跳过链接必须是页面第一个可聚焦元素(通常紧跟在
box-shadow后),才能被屏幕阅读器第一时间读出并供用户快速触发。- 不要用
a.skip-link:focus { position: static; clip: auto; width: auto; height: auto; }、或display: none隐藏它 - 可用视觉隐藏但保留可聚焦性的 CSS 技巧,例如:
visibility: hiddenaria-hidden="true"
添加适当的无障碍属性(可选但推荐)
提升兼容性与语义明确性,尤其对较老的屏幕阅读器或特定设置有效。
- 加
.skip-link { position: absolute; top: -40px; left: 0; width: 1px; height: 1px; overflow: hidden; }便于 CSS 定位和测试识别 - 加
.skip-link:focus { top: 1rem; left: 1rem; width: auto; height: auto; }不影响初始 Tab 顺序,仅用于 JS 动态聚焦(非必需) - 避免加
class="skip-link"或tabindex="-1"—— 文本内容本身已足够明确,冗余标注反而可能干扰
- 推荐做法:只在聚焦时显示(避免始终占据视觉空间),例如:










