E2.01.3focus-resting contrast设计研究

焦点态必须与默认态显著区分

别名: 焦点指示 · focus indicator · 输入框焦点态 · keyboard focus

概念解释

单行框被键盘或指针选中之后,必须在外观上离开默认态,让人立刻知道「字会打进这一格」。这种差异叫焦点—静息对比(focus-resting contrast)。它管的是当前插入点在哪一格,不是格子本身像不像输入框,也不是格子该有多宽。光标闪烁只标字符位置;若整格与未选中的邻居几乎同色,Tab 一遍之后人会丢失自己在表单里的坐标。

机制

键盘用户靠 Tab 在控件间跳跃,每一步都需要一个外化的「我现在在这儿」。焦点环、加粗描边、槽底明度变化,都是把插入点所在的那一格从一排相似槽里抬出来。差异若小于表单上的阴影、校验红框、品牌色块等噪声,焦点就被淹没。只用颜色、且变化落在红绿色相上,一部分色觉异常用户会看不到。浏览器默认的焦点环常被样式表清掉,又没有补上同等强度的替代物,于是键盘路径在视觉上消失。指针用户同样需要这层对比:点进一格后若外观几乎不变,会怀疑点击没登记,接着重复点击或点到别的格子。

怎么研究

让参与者只用来键盘完成多字段表单,记录焦点是否能被指出、跳错字段次数、完成时间。自变量:焦点指示的面积与对比、是否保留系统默认环、周围是否有错误描边或动画。因变量:焦点定位正确率、重复激活、放弃率。也可做静帧判断:给一排字段,其中一格处于焦点,问「下一键打在哪」。色觉模拟和强制高对比模式应纳入,因为许多「看起来够明显」的指示在这些条件下塌掉。不要用鼠标任务的满意度代替键盘可追踪性。

边界

触屏上没有 Tab 环,焦点态更多由弹出的键盘和闪烁光标承担;若系统已把整格抬高或滚动进视口,额外的粗环可能显得多余,但仍要服务外接键盘。自定义焦点样式若只在 :hover 下出现,键盘用户仍然看不见。残障用户放大页面或开高对比后,细环会糊成与边框同宽的一条线。自动聚焦把焦点预先放在某格时,若该格与默认态无差别,读屏器用户知道焦点在那儿,视力完好的键盘用户却不知道。

怎么落地

  • 为单行框提供与默认态在形状或明度上可分离的焦点外观,不要只改一个易被忽略的色相。
  • 不要为了视觉干净去掉系统焦点环却不补同等强度的指示;错误态描边不能兼当焦点指示。
  • 在暗色模式、高对比和错误并排出现时分别截图,确认焦点格仍能从噪声里被指认。
  • 验证:拔掉鼠标,用 Tab 走完整张表。每停一格就让旁观者指出当前格;指错或停顿超过一次跳转,就加强焦点—静息对比。

延伸

  • 同组E2.01.1 输入框宽度应提示预期内容长度 · E2.01.2 边框与填充需明确表达可输入区域
  • 相邻E2.22 自动聚焦与焦点抢夺 · E6.03 内联校验提示
  • 站内检索focus-resting contrast · focus indicator · keyboard focus

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E2.01.3