C6.22.1Arrow keys inside composite widgets设计研究

复合控件内部常用方向键导航,Tab只负责进出该控件

别名: 复合控件方向键 · Tab 进出 · 控件内导航

概念解释

工具栏、单选组、树、网格、选项卡这类复合控件把许多可选单元装在一个组件里。键盘惯例是:Tab 把焦点送进或送出这整个组件,组件内部用方向键在单元之间移动。若每个图标、每个单选项都进 Tab 序列,用户要按十几次才能越过一条工具栏。方向键负责组件内部的二维或线性移动;Tab 负责在组件与组件之间跳。

机制

Tab 序列是文档级的一维链表,适合在控件之间前进。复合控件内部往往有行列、树层级或互斥选项,一维链表表达不了“往右是下一个工具、往下是下一行”。方向键把这个局部空间交给控件自己的状态机:左/右在工具栏里走,上/下在菜单或树里走,Home/End 跳到两端。焦点在组件内部移动时,Tab 停在组件这一级,不会每挪一格就占用一次 Tab。代价是用户必须知道“进来之后改按箭头”,只习惯 Tab 的人会以为组件里只有一个可操作点。

怎么研究

让键盘用户完成“选中工具栏第三项再去主内容”这类任务,比较两种实现:每个子项都可 Tab,对比 Tab 进组、方向键内移。因变量是按键次数、越过组件的时间、以及是否误以为其余子项不可达。控件类型要分开报(工具栏、网格、树),因为二维网格的方向键收益最大。只测能否最终到达,会掩盖按键次数爆炸。

边界

单行输入框内部用方向键移动插入点,这是文本编辑,不是复合控件导航,不要把箭头重绑成“下一个控件”。触屏没有 Tab,复合控件的内部移动改走滑动或直接点选。小型单选组如果只有两项,全部进入 Tab 序列的成本可以接受。游戏 UI 常把全部导航交给方向键,Tab 被废掉,惯例相反。屏幕阅读器的浏览模式会用自己的快捷键遍历,应用方向键可能被读屏拦截。

怎么落地

  • 工具栏、选项卡、网格:一个 Tab 停点进入,方向键移动子项,Tab 再离开到下一个控件。
  • 在组件获得焦点时用可见指示表明“现在可以用方向键”,避免看起来像只有一项。
  • 不要在文本字段里用方向键切换控件;把那条路径留给插入点。
  • 验证:只接键盘,从页面顶部走到主按钮,穿过一条至少五项的工具栏,统计 Tab 次数;若次数随工具数量线性增长,内部导航还没从 Tab 序列里拆出去。

延伸

  • 同组C6.22.2 跳转链接允许键盘用户跳过重复的导航区块直达主要内容 · C6.22.3 漫游 tabindex 让复合控件内只有一个成员处于Tab序列,其余靠方向键切换 · C6.22.4 键盘导航路径与鼠标可达路径必须功能等价,不能只做视觉呈现
  • 相邻C6.05 焦点顺序 · C6.03 快捷键体系
  • 站内检索composite widget · arrow key navigation · toolbar keyboard

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C6.22.1