R3.02.1move focus to newly appeared content设计

动态内容出现后需移动焦点

别名: 动态出现后移焦 · 新内容接收焦点 · focus into injected UI

概念解释

展开一块面板、插入一步向导、弹出需要处理的新区域之后,焦点不会自己跳过去。它停在触发这次变化的那个控件上,直到实现把它挪到新出现的可工作区域。看不见屏幕的用户继续在旧上下文里敲键盘,等于新界面对他们还没出现。

移焦的对象是「用户接下来要在里面做事」的那块动态内容,不是页面上任何一次 DOM 更新。数字角标、静默保存成功、列表里多出一行普通结果,若不是新的工作上下文,把焦点抢走反而打断当前任务。

机制

焦点是指向某个节点的指针,插入新节点不会改写这个指针。键盘和下一次读屏起始位置都跟指针走,不跟绘制走。新面板可以画在正中、动画完整,指针仍在「打开」按钮上:下一次 Tab 走出的是按钮旁边的旧邻居,读屏继续读按钮所在的那一段。

把焦点移进新区域,等于告诉辅助通道「你现在在这里」。目标通常是新区域的标题、第一块说明、或第一项必填。不移焦,视觉通道靠运动和位置已经换场,辅助通道没有换场信号。两条通道从此不同步,后续所有按键都作用在错误的场上。

边界

不是新工作场的更新不要移焦:工具条上的计数、自动保存提示、筛选后列表在原地刷新且第一项仍是用户正在看的对象。移焦会把人从正在写的输入框里拽走。一次性的、不需要交互的提示若被做成移焦目标,键盘用户会落到一块不能做事的文字上,还要自己走回来。焦点已经在将要出现的区域内(原地展开同一控件)不必再移。整页跳转不属这一条,那是路由重置。新内容如果还不能交互(骨架、加载中),过早移进去会让人落在无控件的空洞里,应等到可交互节点存在再移。

怎么落地

  • 为每一种「打开新工作区域」的动作指定焦点落点:区域标题(可聚焦)或第一项可操作控件,写进稿,不要留给实现猜。
  • 明确哪些更新不移焦,避免把角标和 toast 做成落点。
  • 移焦发生在内容已经可交互之后,而不是动画第一帧。
  • 验证:只用键盘触发展开、插入、下一步。焦点指示应出现在新区域内,下一次 Tab 的目标也在该区域内。焦点仍停在触发按钮、或跑到文档开头的,就是只插入了节点、没移动指针。

延伸

  • 同组R3.02.2 关闭浮层需归还焦点到触发处 · R3.02.3 路由切换需重置焦点位置
  • 相邻J2.06 焦点可见性 · R3.10 焦点管理的实现要点
  • 站内检索move focus to new content · focus after reveal · injected UI focus

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R3.02.1