J3.03.1skip navigation设计研究

重复的导航需要跳过入口

别名: 跳到主内容 · bypass blocks · skip link

概念解释

每个页面顶部都挂着同一组导航、工具栏、公告栏时,键盘用户进入新页的第一件事是把这组区块再按一遍。跳过重复区块(bypass blocks / skip navigation)要求在序列最前面提供入口,让人一次到达本页主内容,而不是把公共外壳当作必经税。

标题和地标给屏幕阅读器另一条跳法。这条针对的是 Tab 序列上的税:没有阅读器、只用键盘的人,同样不该为壳付费。

机制

Tab 是线性的。公共导航有二十个链接,每换一页就要按二十次才能碰到正文里的第一个控件。任务越短,税占比越高:回复一封邮件、改一个设置,真正的工作只要两三次按键,前面却要先走完全局壳。指针用户眼睛直接落在主区,感受不到这笔税,所以设计评审里它经常不存在。

重复的定义是「多数页面都要再走一遍的同一组入口」,不是「任何出现两次的链接」。页内的目录、本页小节锚点不是外壳税;站点级顶栏、侧栏、语言切换、cookie 条才是。入口通常是「跳到主内容」,也可以是一组「跳过导航 / 跳过工具栏」,原则相同:把重复前缀从必经路径里摘掉。

怎么研究

选一个内页,从浏览器地址栏 Tab 进入,数到主内容第一个控件的按键次数。再选同模板的另一页,次数应当接近——说明税来自外壳而不是本页内容。有跳过入口时,使用入口后的次数应接近「主内容自身的长度」,而不是外壳加内容。

自变量:外壳链接数、是否提供跳过、主内容前是否还有第二层重复工具栏。 因变量:到达主内容的 Tab 次数、用户是否找到并使用入口。

开关扫描下每次选择成本更高,同一笔税会被放大;测量仍用 Tab 次数作代理即可,不必上扫描硬件才能下结论。

边界

单页应用如果「换页」并不重挂外壳,用户已经在主区里,不必每次路由都把焦点送回跳过链接。但整页刷新、从外部链入、从登录页进入系统,外壳税会重新征收,入口必须还在。极短的营销落地页只有三四个链,跳过的收益很小,可把精力放在别的页;后台、文档站、店铺这类外壳稳定、内页极多的产品,是这条判据的主场。单靠地标而不提供 Tab 可到达的跳过,阅读器用户能跳、键盘用户不能,覆盖不完整。

怎么落地

  • 在页面序列最前提供「跳到主内容」(或等价)入口,目标是本页主内容容器。
  • 主内容用一个真正的目标节点接住跳转,而不是只靠视觉上的第一块文章。
  • 验证:从地址栏 Tab 一次应碰到跳过入口;激活后,再 Tab 应进入主内容而不是顶栏的下一个链接。

延伸

  • 同组J3.03.2 跳转链接需在获得焦点时可见 · J3.03.3 跳转后焦点需真正落在目标区
  • 相邻J2.14 语义结构与标题层级 · J5.01 屏幕阅读器 · J3.01 键盘可达
  • 站内检索skip navigation · bypass blocks · skip to main

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/J3.03.1