R3.02.2restore focus to the trigger设计

关闭浮层需归还焦点到触发处

别名: 关闭后归还焦点 · 回到打开按钮 · focus restoration on dismiss

概念解释

对话框、菜单、弹出层在打开时通常已经把焦点带进层内。关掉它时,层里的节点被隐藏或拆掉,焦点必须回到打开它的那个控件。不归还,浏览器会把指针抛到文档根或某个邻近节点,键盘用户从页面顶部重新摸回来,刚才的任务位置丢失。

归还的是触发处,不是「层下面随便一块」。用户是从那个按钮或字段走进浮层的,关掉之后应站回同一点,才能继续旁边的下一步。

机制

打开浮层几乎总会移动焦点,否则层内无法用键盘工作。关闭时,焦点所在的节点随层一起消失。指针失去附着对象,引擎会选一个后备:常常是 body,有时是关闭瞬间碰巧还在的邻居。无论哪一种,都不是用户进来之前站着的地方。

触发控件还在底层界面里,是任务的书签。把焦点设回去,等于把人放回进浮层前的步骤:下一次 Tab 落到触发旁的下一个动作,读屏从那句按钮继续。不设回去,等于在关闭时做了一次无意的「跳到别处」。视觉上浮层消失、底下的页还在,看起来像回到了原处;辅助通道已经在另一端。

边界

触发控件本身已经不在了(例如从行菜单里删掉了这一行),归还到触发处做不到——那是另一类「节点消失后焦点去哪」的问题,不能假装还存在一个按钮。浮层里点了会离开当前页的链接,关闭和导航叠在一起,应跟随导航,而不是把人拽回已经要离开的页上的触发器。嵌套浮层关闭内层时,应回到打开内层的那个控件(可能仍在外层里),而不是一次跳回最底层的页面触发器。用鼠标点页面空白关掉的非模态弹出,鼠标用户的指针本就不在键盘焦点上,仍应把键盘焦点归还,以免下一次 Tab 从奇怪的地方开始。

怎么落地

  • 打开浮层时记下触发节点;关闭(确认、取消、Escape、点遮罩)一律把焦点设回该节点。
  • 嵌套层分别记各自的触发,关一层还一层,不要一次还到页面底部。
  • 稿上写明关闭后的落点就是触发控件,而不是「关闭即可」。
  • 验证:只用键盘打开菜单或对话框,处理完后关掉。焦点指示应回到同一个打开按钮,下一次 Tab 从它旁边继续。焦点跑到地址栏、页面首个链接或消失,就是没有归还。

延伸

  • 同组R3.02.1 动态内容出现后需移动焦点 · R3.02.3 路由切换需重置焦点位置
  • 相邻J2.06 焦点可见性 · R3.10 焦点管理的实现要点
  • 站内检索restore focus to trigger · overlay dismiss focus · focus restoration

同组卡片

快捷操作

分享

分享当前页面

ios_share

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