E1.11.4no hover on disabled设计研究
状态组合中悬停与禁用不应同时出现
别名: 禁用仍悬停 · :hover:disabled · disabled hover
概念解释
禁用表示此刻不能激活。悬停表示「对准了,可以激活」。两态同时出现——指针移上去,禁用按钮却亮起悬停色、换成手型——是在用一条通道说能点、另一条说不能。状态组合里悬停与禁用不应同时出现:禁用要吞掉悬停,而不是叠加上去。
机制
状态机里禁用是吸收态:进入之后,指向类的瞬时态不应再被显示,否则瞬时态会把吸收态顶掉。实现上最常见的漏洞是样式按层叠叠加::hover 写在 :disabled 后面,或 pointer-events 仍在,于是禁用键走进悬停规则。人用光标形状和亮度变化当「可点」的快证据,文案上的灰来不及赢。辅助技术若仍把焦点放在禁用控件上并播报可激活,组合冲突会再进听觉通道。触摸没有悬停,但键盘焦点环若在禁用键上画出「可操作」的样式,冲突换一条通道回来。
怎么研究
把指针移上明确禁用的按钮,记录外观、光标、是否发出点击事件。再加键盘 Tab 到禁用键。
自变量::hover 与 :disabled 的样式顺序、是否 pointer-events: none、焦点是否可落到禁用。
因变量:出现悬停外观的比例、尝试点击、把禁用报成可点。
只看静态禁用样张看不到组合。必须有指针进入这一步。
边界
有些场景允许禁用键获得焦点以便读出「为什么不可用」,焦点环可以在,但不应借用悬停高亮。工具提示解释禁用原因可以在指针进入时出现,那是说明,不是悬停态——外观应保持禁用,不要亮成可点。加载锁不是禁用,加载时的指针变化另算。
怎么落地
- 写状态样式时让禁用规则压过悬停;选择器不要让两者同时生效。
- 禁用时光标用默认箭头,不要手型;点击不触发动作也不走按下动画。
- 若保留焦点以便读原因,焦点环用「不可用」样式,不要复用可点焦点。
- 验证:慢慢把指针滑过一排按钮,其中夹着禁用。禁用那枚若闪一下亮色或换成手型,悬停就已经叠上去了。