D1.04.1Visible keyboard focus设计研究

键盘焦点必须始终可见

别名: focus indicator · keyboard navigation · focus visibility · active element

概念解释

可见键盘焦点(visible keyboard focus)是界面始终用可感知的线索标出键盘输入将作用到哪个元素。它不同于鼠标悬停,也不同于已经选定的内容:焦点是 Tab、方向键、Enter 和空格等下一次键盘操作的落点。无论焦点因顺序导航、脚本更新、弹窗打开、错误校验还是返回页面而移动,用户都应能立刻找到它;看不见的焦点会使键盘操作成为对未知对象的盲按。

机制

指针用户可以从光标位置推断目标,键盘用户必须依赖系统提供的焦点状态来建立动作—对象关系。焦点在交互过程中不断移动,而视图也可能滚动、重绘或转场;若视觉线索被裁切、遮挡或没有随焦点进入视口,用户的空间模型就断裂。焦点可见性不仅影响无鼠标访问,也影响高效率键盘工作流:失去落点后,用户不得不反复 Tab、猜测顺序或改用指针来找回位置。

怎么研究

用仅键盘的任务遍历表单、菜单、表格、弹窗和动态加载区域,记录焦点丢失、无意激活、回退和切换到鼠标的次数。需要覆盖正向与反向 Tab、方向键组内导航、跳过隐藏内容、打开/关闭模态框以及异步更新后焦点恢复。自动化检查能发现可聚焦元素与焦点顺序,却不能证明使用者真的看得见并理解焦点;应在不同缩放级别、滚动位置和高对比设置下做观察测试。

边界

焦点可见不代表所有元素都应进入 Tab 顺序。纯装饰、重复链接、不可操作内容和被真正隐藏的区域不应制造额外停靠点。反过来,视觉上的「活动」或「选中」也不能冒充焦点,因为它们未必接收键盘命令。组件在打开浮层、删除当前项或跳转路由时,合理的焦点移动是必要的;问题在于移动后没有可见、新的且符合任务预期的落点。

怎么落地

  • 为每个可键盘操作的组件定义焦点进入、组内移动、退出与销毁后的恢复位置,并把它写入交互测试。
  • 让焦点样式在滚动容器、覆盖层和动画结束后仍未被裁切;焦点移出视口时应让用户重新看见目标。
  • 模态框打开后将焦点置于有意义的起点,关闭后返回触发控件或语义等价处,避免落到页面开头。
  • 用键盘完成真实高后果流程,要求测试者在每一步指出当前落点;任何需要靠猜、靠鼠标找回的时刻都视为失败。

延伸

  • 同组D1.04.2 焦点环需在任意背景上保持对比 · D1.04.3 移除默认焦点样式必须提供替代
  • 相邻D1.12 焦点、悬停与选中三者的区分 · D1.05 悬停反馈
  • 站内检索visible keyboard focus · focus indicator · keyboard navigation

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/D1.04.1