J3.01.3mouse-only interaction设计研究

鼠标专属交互是常见遗漏

别名: 悬停才出现 · 仅鼠标操作 · hover-only

概念解释

主按钮都能 Tab 到,不等于没有键盘漏洞。真正把功能关在门外的,往往是鼠标专属交互:只在指针悬停时出现的操作、只响应右键的菜单、只在拖过某一区域后才显现的控件、只监听 mouseenter 而不监听焦点的浮层。页面其余部分「能用键盘」,这些入口却从未进入键盘通路。

遗漏之所以常见,是因为它在指针走查里不可见——测试者自己一直握着鼠标,那些入口会准时出现。

机制

指针有一个键盘没有的状态:悬停(hover)。设计把次要操作(编辑、删除、更多)藏进悬停,是为了让界面安静。代价是:键盘焦点可以停在该行上,操作仍然不出现;或者出现了,却不能被 Tab 选中,因为它们是绝对定位、pointer-events 才激活的层。右键和拖放同理——它们绑定的是指针按钮和指针轨迹,不是焦点。

另一类遗漏是事件名选错。onMouseEnter 打开子菜单,onFocus 什么都不做,键盘用户经过父级时子菜单保持关闭。从代码看「菜单组件已经支持键盘」,从事件看只接了指针。走查如果只点顶层导航,会得出「键盘可用」的假阴性。

怎么研究

做一份指针专属入口清单,不要从页面结构开始,从「我平时怎么用鼠标」开始:每行末尾的图标、卡片上的悬停动作条、图表数据点的提示、画布的右键、必须拖才出现的分割线。然后禁用指针,看这些入口是否还有第二条到达路径。

常见假阴性:测试者用键盘走到了那一行,却仍把鼠标移过去「帮」操作露出来。记录必须区分「焦点触发了显示」和「指针触发了显示」。

边界

触控设备没有悬停,移动端若已用常驻按钮替代悬停动作,桌面键盘用户仍可能面对同一套代码里的悬停分支——要对着外接键盘再测一次。提示型悬停(只显示说明、不提供操作)不是这条的对象;一旦悬停层里出现按钮或链接,它就是功能入口。绘图、地图里「指针所在即工具所在」的连续跟踪,其跟踪本身可以留在指针上,但工具切换和属性修改不能只挂在右键。

怎么落地

  • 把「鼠标移上去才出现」的操作改为:焦点进入时同样出现,或在该对象上常驻一个键盘可到达的入口。
  • 右键菜单提供等价的可见按钮或 菜单,并保证该入口在 Tab 序列中。
  • 不要只用 mouseenter / mouseover 打开子菜单;焦点进入父级时必须同样打开,焦点离开时同样关闭。
  • 验证:双手离开触控板,把每一行、每一张卡片、每一个数据点上「平时用鼠标才看得到」的动作做一遍。少任何一项,就是鼠标专属遗漏。

延伸

  • 同组J3.01.1 所有功能需可用键盘完成 · J3.01.2 自定义控件需要显式的键盘支持
  • 相邻J3.05 单指与单点操作 · J3.07 拖拽的替代 · C1.06 悬停态及触摸屏上的缺失
  • 站内检索mouse-only · hover-only · pointer-exclusive

同组卡片

快捷操作

分享

分享当前页面

ios_share

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