C6.05.2Visible focus indicator设计研究

焦点必须可见

别名: 焦点环 · focus ring · 焦点指示

概念解释

键盘焦点落在哪一个控件上,必须有一处不依赖指针位置的可见指示——常见是焦点环、高对比描边或明显的背景变化。没有指示时,Tab 仍然在移动焦点,用户却失去了“下一跳从哪开始”的坐标。可见不是“能被找出来”,而是在普通对比和普通视距下,不需要猜。

机制

指针用户靠光标形状和悬停态知道自己指着什么;键盘用户没有这根光标,唯一的位置信号就是焦点指示。去掉默认描边(把 outline 设为无)之后,焦点在文档树上仍存在,屏幕上却与未聚焦态相同。人只能靠试探性按空格或回车来反推焦点在哪,试探本身可能提交表单或触发破坏性操作。指示还要能从控件的其余视觉状态里分出来:选中、错误、禁用如果和聚焦共用同一套颜色,键盘用户无法判断自己是“已经选中”还是“只是经过”。焦点可见解决的是位置不确定性,不是对比度不足的一般文字问题,但对比不够时指示等于没有。

怎么研究

在关掉鼠标的条件下让人走完一条多步表单或工具栏,记录寻找焦点的时间、错误触发,以及能否指出“现在焦点在哪”。自变量包括指示有无、指示与选中态是否同色、背景复杂度;因变量包括定位时间和误操作。用鼠标点选来验收焦点样式会漏掉问题:指针已经提供了位置。需要键盘-only 条件,并在深色背景、照片背景和高密度工具栏上重复。

边界

某些自定义画布(地图、设计工具)用自己的选中框表示“对象被选”,仍需要另一套表示“键盘焦点在这个对象上”,两套不能并成一个框。触屏为主、键盘只是外接的设备上,鼠标用户讨厌常驻焦点环,可以用“仅在键盘操作后显示”的策略,但一旦出现键盘输入,指示必须回来。低视力用户需要的是更粗的环,不是把环做成 1 像素的品牌色。

怎么落地

  • 为每个可聚焦控件提供与未聚焦、选中、错误态都可分辨的焦点指示,不要靠去掉描边来“好看”。
  • 若不想在指针操作时显示环,仅在检测到键盘导航后显示,并在键盘用户离开前不要再藏。
  • 键盘-only 走查时,每按一次 Tab 都要能在一瞥内指出焦点;任何一跳需要搜索或猜测,即指示失败。

延伸

  • 同组C6.05.1 Tab 顺序应与视觉阅读顺序一致 · C6.05.3 浮层需捕获焦点并在关闭后归还 · C6.05.4 隐藏元素不得留在焦点序列中
  • 相邻C6.22 焦点顺序与键盘导航 · C1.19 光标形状作为状态表达
  • 站内检索focus visible · focus ring · keyboard focus

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C6.05.2