F2.14.3focus jumps when visual and source order diverge设计研究

视觉与源顺序不一致会造成焦点乱跳

别名: 焦点乱跳 · tab jump · visual source mismatch

概念解释

工具条看上去是「删除、取消、保存」,保存被 float: right 画在最右边,树里却排第一。Tab 先落到右边的保存,再跳回左边的删除。焦点环在屏幕上右一下左一下,像坏了。这是两套顺序打架的症状,不是读屏独有的问题——明眼键盘用户、开关扫描用户一样撞上,只是轨迹看得见。

源顺序决定走哪条路,视觉重排不该改清单,是前两张。这一张只描述乱跳:空间上不连续的焦点移动。

机制

注意和指向都预期空间连续:下一个目标在附近,沿阅读方向。焦点却按树走。树和画分叉时,环会越过一大块去点「视觉上的上一件」,或从左列底部跳到右列顶部再跳回来。每次瞬移都要重新捕获目标,速度下降,漏按上升。

float、反向 flex、把主按钮绝对钉在视觉底部,是常见制造者。乱跳的距离越大、方向越逆阅读,越像故障。小错位(同一行里两个按钮对调)伤害较小,但工具条上主按钮和破坏性按钮对调会变成危险。

怎么研究

可把焦点环的屏幕坐标按 Tab 次序记成一条折线,与一条「视觉阅读路径」折线比。自变量:是否使用 order / float / 绝对定位。因变量:折线自交次数、相邻焦点的欧氏距离、逆阅读方向的跳数、完成任务的按键数和漏按。眼动可选,用来看明眼键盘用户是否在环瞬移时丢注视。

实验室若只测读屏用户,会把这当成无障碍专属;把明眼键盘用户算进来,才能说明它是布局投影问题。

边界

二维控件(表格单元格、工具调色板)的焦点本就可以按网格走,看起来像跳,其实是空间策略,应另论。模态打开时焦点跳进层内,是故意的捕获。乱跳专指同一层、同一阅读流里,环的空间轨迹与视觉顺序相反或大跨度瞬移。

怎么落地

  • 工具条、页脚操作、卡片内按钮,按视觉从起始到末尾的顺序写进树,不要靠 float 把主按钮甩到右边却放在树首。
  • 发现乱跳先改树或去掉视觉重排,不要用脚本去「修 Tab 索引」——那会再制造第三套顺序。
  • 验证:录下焦点环,逐帧看。每次环走逆阅读方向、或跳过超过一个对象宽度的空区,记一次乱跳。把这些点标回布局:对应的 float、order、绝对定位列成表,一项项删掉直到折线不再自交。再让只用键盘的人完成提交,漏按应降到接近零。

延伸

  • 同组F2.14.1 源顺序决定辅助技术与键盘的遍历顺序 · F2.14.2 视觉重排不应改变逻辑顺序
  • 相邻J2.08 阅读顺序 · F3.05 视觉动线 · F2.09 瀑布流布局
  • 站内检索focus jump · tab order · spatial continuity · float

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F2.14.3