C6.22.2Skip links设计研究
跳转链接允许键盘用户跳过重复的导航区块直达主要内容
别名: 跳过导航 · skip to content · 地标跳转
概念解释
页面顶部的主导航、工具条、筛选器在每个页面重复出现。键盘用户若只能沿 Tab 从头走,每次换页都要穿过同一串链接才能到达正文。跳转链接(skip link)放在焦点序列最前,激活后把焦点移到主内容容器,跳过那段重复区块。它不是给鼠标用户看的装饰,而是键盘路径上的捷径;地标区域和标题层级是同一问题的另一条实现。
机制
重复导航把 Tab 链表的前 N 项变成固定税。跳转链接把“到达正文”从 O(N) 次 Tab 降成一次激活。实现上通常是页首一条链到 #main,获得焦点时才可见,以免打扰指针用户。失败模式很具体:href 指到不能聚焦的 div、跳转后焦点仍留在链接上、或主内容没有 tabindex=-1 导致浏览器不移动焦点。屏幕阅读器用户还可以靠地标列表跳,但只使用 Tab 的肢体障碍用户没有那份列表,跳转链接对他们是刚需。
怎么研究
数每个模板从文档开始到主操作按钮的 Tab 次数,有无跳转链接各测一遍。记录跳转后焦点是否真的在主内容、屏幕阅读器是否宣布区域变化。把“视觉上能看见跳过”和“键盘能用跳过”分开:很多站点链接只在 CSS 里写了,键盘焦点样式却把它跳过或透明到看不见。现场招募只使用键盘的人,比健全被试戴上眼罩更有生态效度。
边界
单页应用如果主体就在第一屏且没有重复顶栏,跳转链接收益很小。应用内部已经用选项卡或侧栏地标组织时,需要的是区域内跳转,而不是网页页首那一条。移动端焦点顺序常被系统浏览器改写,跳转链接要在真机键盘(外接或无障碍开关)上复核。把整页做成无限滚动信息流时,“主内容”锚点会失效,需要改成跳到当前条目。
怎么落地
- 在每个带有重复页眉导航的模板最前放置“跳到主内容”,目标节点可聚焦,跳转后可见焦点出现在正文。
- 链接在获得焦点时显示,不要用会把焦点也藏掉的裁剪。
- 单页路由切换后检查锚点还在,且焦点被移到新页主容器,而不是留在旧导航里。
- 验证:键盘从地址栏或窗口进入页面,第一次 Tab 应落到跳转链接,回车后下一次 Tab 落在主内容内的第一个控件,而不是又回到顶栏。