R3.02.2restore focus to the trigger设计
关闭浮层需归还焦点到触发处
别名: 关闭后归还焦点 · 回到打开按钮 · focus restoration on dismiss
概念解释
对话框、菜单、弹出层在打开时通常已经把焦点带进层内。关掉它时,层里的节点被隐藏或拆掉,焦点必须回到打开它的那个控件。不归还,浏览器会把指针抛到文档根或某个邻近节点,键盘用户从页面顶部重新摸回来,刚才的任务位置丢失。
归还的是触发处,不是「层下面随便一块」。用户是从那个按钮或字段走进浮层的,关掉之后应站回同一点,才能继续旁边的下一步。
机制
打开浮层几乎总会移动焦点,否则层内无法用键盘工作。关闭时,焦点所在的节点随层一起消失。指针失去附着对象,引擎会选一个后备:常常是 body,有时是关闭瞬间碰巧还在的邻居。无论哪一种,都不是用户进来之前站着的地方。
触发控件还在底层界面里,是任务的书签。把焦点设回去,等于把人放回进浮层前的步骤:下一次 Tab 落到触发旁的下一个动作,读屏从那句按钮继续。不设回去,等于在关闭时做了一次无意的「跳到别处」。视觉上浮层消失、底下的页还在,看起来像回到了原处;辅助通道已经在另一端。
边界
触发控件本身已经不在了(例如从行菜单里删掉了这一行),归还到触发处做不到——那是另一类「节点消失后焦点去哪」的问题,不能假装还存在一个按钮。浮层里点了会离开当前页的链接,关闭和导航叠在一起,应跟随导航,而不是把人拽回已经要离开的页上的触发器。嵌套浮层关闭内层时,应回到打开内层的那个控件(可能仍在外层里),而不是一次跳回最底层的页面触发器。用鼠标点页面空白关掉的非模态弹出,鼠标用户的指针本就不在键盘焦点上,仍应把键盘焦点归还,以免下一次 Tab 从奇怪的地方开始。
怎么落地
- 打开浮层时记下触发节点;关闭(确认、取消、Escape、点遮罩)一律把焦点设回该节点。
- 嵌套层分别记各自的触发,关一层还一层,不要一次还到页面底部。
- 稿上写明关闭后的落点就是触发控件,而不是「关闭即可」。
- 验证:只用键盘打开菜单或对话框,处理完后关掉。焦点指示应回到同一个打开按钮,下一次 Tab 从它旁边继续。焦点跑到地址栏、页面首个链接或消失,就是没有归还。