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、绝对定位列成表,一项项删掉直到折线不再自交。再让只用键盘的人完成提交,漏按应降到接近零。