D1.12.1Keyboard focus设计研究

焦点表示键盘操作的当前位置,与鼠标位置无关

别名: focus state · keyboard navigation · pointer independence · active element

概念解释

键盘焦点(keyboard focus)是当前会接收键盘命令的元素或组件内部位置;它由 Tab、方向键、脚本和组件规则移动,与鼠标指针停在哪里没有必然关系。指针可悬停在一个链接上,而 Enter 会激活另一个已聚焦按钮;鼠标移到屏幕角落,键盘焦点仍停在表单字段。把两者混为一谈,会让用户不清楚下一次键盘输入将作用到哪里,也会使界面在鼠标和键盘交替使用时出现难以解释的状态。

机制

指针提供连续的空间位置,焦点提供离散的命令目标。两套状态能独立存在,是因为用户可能用鼠标浏览、用键盘输入,或在无指针环境中完全靠焦点移动。若悬停样式覆盖焦点,鼠标经过便会掩盖真实键盘落点;若焦点随鼠标无规则跳动,键盘用户的操作路径被破坏。分离并可见地表达两者,让人能同时知道「我正在看什么」和「按键会影响什么」。

怎么研究

设计混合输入任务:用鼠标扫过若干项目后,不点击地切回键盘继续;在表单、菜单、表格和弹窗中交替使用指针与 Tab/方向键。测量用户是否能预测 Enter、Space 和方向键的目标、是否误激活、是否为了找回焦点改用鼠标。应测试脚本更新、鼠标点击后焦点移动和悬停叠层,因为静态截图无法揭示两态同时存在时的解释。

边界

某些直接操作确实会让鼠标点击把焦点移到被点击控件,这是合理的状态转换,不代表焦点等于鼠标位置。触屏没有悬停,语音和屏幕阅读器对焦点的表现也不同;不要以桌面指针为唯一模型。对于不接收键盘命令的装饰或纯展示元素,提供焦点外观反而会暗示虚假的可操作性。关键是焦点变化须由明确的输入或程序逻辑触发,并始终可见。

怎么落地

  • 分别定义 hover 与 focus 的触发、存续和样式;在同一元素上并存时仍要能看出哪一种状态有效。
  • 确保鼠标经过不会移走键盘焦点,除非用户实际点击或组件有明确、可预期的激活规则。
  • 为键盘焦点提供独立的可见指示,并在鼠标移动、工具提示和滚动发生后保持可辨。
  • 以鼠标—键盘交替任务验收:用户应能在不点击的情况下说出 Enter 将操作的元素;答错说明两态被错误合并。

延伸

  • 同组D1.12.2 悬停仅存在于指针设备,触屏与键盘操作没有悬停态 · D1.12.3 选中表示被选定的对象,可与焦点同时或分离存在 · D1.12.4 三态样式过于相似时用户无法判断当前的操作模式
  • 相邻D1.04 焦点指示环 · D1.05 悬停反馈
  • 站内检索keyboard focus · focus state · pointer independence

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/D1.12.1