跳过导航链接Skip Link

你可能会说

有人说用键盘得按好多下 Tab 才能到正文,能不能让他一步到位?

键盘用户按 Tab 后出现的快捷入口,点击可直接跳过顶部导航到正文例如进入文档站时,用户可以先按一次 Tab,再选择“跳到主要内容”,不用逐个经过 Logo、搜索和菜单。它获得焦点时必须看得见,但不能代替正常的页面导航。
也常被叫作SkipLink跳到主内容Skip to content
跳到主要内容
品牌 文档 组件 设置
主要内容从这里开始
容易混淆?这样区分
跳过导航链接Skip Link锚点 Anchor

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

什么时候用

  • 有重复顶栏或侧栏的页面:减少键盘用户重复按 Tab 的次数
    跳到主要内容
  • 文档和后台:长导航会增加键盘操作成本
    跳到主要内容键盘用户按 Tab 后先看到它
  • 存在重复导航的独立页面:跳转目标应是唯一的主内容区域
    跳到主要内容键盘用户按 Tab 后先看到它

什么时候不用

  • 只靠鼠标悬停显示:键盘用户无法发现入口
    跳到主要内容键盘用户按 Tab 后先看到它
  • 跳转后未将焦点移到主内容
    跳到主要内容键盘用户按 Tab 后先看到它
  • 用跳过链接代替页内目录或章节导航
    跳到主要内容键盘用户按 Tab 后先看到它
组成结构 · Anatomy
跳到主要内容
重复导航
主要内容
放在重复导航之前,通常作为最先可聚焦的链接
跳转后焦点应落在这里
常见变体 · Variants
默认隐藏,聚焦出现Focus reveal
页面需要跳过重复导航时的常见做法
固定在页面顶部Visible top
无障碍入口需要持续可见时
典型使用场景
带顶栏的官网
跳到主要内容
品牌 产品 价格 登录
首页主要内容
文档站
跳到正文
目录 指南 API 示例
文档正文
后台工作台
跳到工作区
项目 成员 设置 通知
项目工作区
延伸阅读 · 权威出处