E2.21.2disabled as non-interactive设计研究

禁用表示功能暂不可用且通常不可交互

别名: 禁用输入框 · disabled field · 灰掉的控件

概念解释

禁用(disabled)把控件从当前交互里拿掉:不能聚焦、不能改、通常也不能把值当可选择的文本来用。它表达的是「这个功能此刻不开放」,例如未勾协议前的提交、未选国家前的省市区。不是「值在这儿请复制」,那是只读。它管的是能力关闭,不是灰外观像不像只读,也不是关掉之后原因写在哪。

机制

禁用的实现会把控件排除出 Tab 序、排除出点击,读屏器有的跳过、有的报「不可用」。这在「先满足前提再开放」时是对的:焦点不应停在一个注定失败的动作上。副作用是值也跟着不可及——自动填充写不进去,复制要靠别的节点。把「暂时不能改的已填值」做成禁用,会把一份还要用的数据锁进不可达状态。禁用还切断悬停说明:指针事件被吃掉,title 气泡出不来,原因若只写在悬停里就等于没写。

怎么研究

让人完成一个被前置条件锁住的任务,比较禁用、只读、可见但点了出原因三种。记录:能否发现该控件存在、能否读到当前值、焦点是否被错误地吸进去。自变量:是否仍在焦点序、是否有静态原因文本。因变量:理解「为何不能用」的正确率、误把禁用当损坏。读屏器走查必须做,因为视觉上的灰与树上的「不可用」不是自动对应的。

边界

整页只读模式(预览)不应把每个控件标成禁用,那会让辅助技术听到一长串不可用;应改成只读或静态。自定义控件只灰了外观、仍可点,是假禁用,提交仍会发出。禁用按钮上的加载态是另一件事:短时锁定防重复,通常仍占原位且应保留名称。服务端校验失败后把字段禁用,用户无法改错,禁用用错了对象。

怎么落地

  • 只在「功能未开放」时用禁用;已有值还要被复制或朗读时用只读。
  • 不要把原因只放在悬停上;禁用控件旁边放静态说明,或让点击仍能打开解释。
  • 自定义控件禁用时同时关掉指针和键盘,并在无障碍树上暴露 disabled。
  • 验证:Tab 走过一排控件,禁用项应被跳过或明确报不可用。再试复制它的值——若任务需要带走这份值,就不该用禁用。点它若毫无解释,能力关闭就还没被说明。

延伸

  • 同组E2.21.1 只读表示当前不可改但内容仍可选中复制 · E2.21.3 两者视觉样式相近时用户无法判断能否申请解锁 · E2.21.4 禁用原因应可查询,只读状态应说明何时可编辑
  • 相邻E1.02 按钮的状态 · E3.03 开关
  • 站内检索disabled as non-interactive · disabled field · unavailable control

同组卡片

快捷操作

分享

分享当前页面

ios_share

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