切换·Esc 返回

跳过导航链接SkipLink

页面导航
给键盘用户一个快捷入口,越过重复导航直接进入正文
也常被叫作跳到主内容Skip to content

跳过导航链接是页面最先可聚焦的链接,用户通常只有按 Tab 键时才会看到它。它把重复的顶部导航和侧栏跳过去,直接把焦点送到主内容;视觉上可以默认隐藏,但聚焦时必须清楚出现。

跳到主要内容
品牌 文档 组件 设置
主要内容从这里开始
容易混淆?这样区分
跳过导航链接SkipLink锚点Anchor

跳过导航链接 Skip Link 是键盘用户进入页面后的快捷通道;锚点 Anchor 是所有用户都能使用的页内章节目录。

什么时候用

  • 有重复顶栏或侧栏的页面:让键盘用户少按很多次 Tab
    跳到主要内容键盘用户按 Tab 后先看到它
  • 文档和后台:导航很长时尤其必要
    跳到主要内容键盘用户按 Tab 后先看到它
  • 每个独立页面:目标指向唯一的主内容区域
    跳到主要内容键盘用户按 Tab 后先看到它

什么时候不用

  • 只靠鼠标悬停显示 → 键盘用户看不到
    跳到主要内容键盘用户按 Tab 后先看到它
  • 跳转后不把焦点送进主内容
    跳到主要内容键盘用户按 Tab 后先看到它
  • 用它替代页内目录和章节导航
    跳到主要内容键盘用户按 Tab 后先看到它
组成结构 · Anatomy
跳到主要内容
重复导航
主要内容
1跳过链接Skip link必须是页面第一个可聚焦控件
2主内容目标Main target跳转后焦点应落在这里
常见变体 · Variants
默认隐藏,聚焦出现Focus reveal
绝大多数页面的默认做法
固定在页面顶部Visible top
无障碍入口需要持续可见时
典型使用场景
带顶栏的官网
跳到主要内容
品牌 产品 价格 登录
首页主要内容
文档站
跳到正文
目录 指南 API 示例
文档正文
后台工作台
跳到工作区
项目 成员 设置 通知
项目工作区