前言
本篇文章主要讨论预设存在于 HTML 元素中的 disabled 属性，你可以为按钮或各类输入框（文本输入、复选框、范围选择）添加该属性，让元素变为不可用的状态，因此常在以下情境看到 disabled 的使用：
- 避免重复触发行为？禁用！
- 不满足使用条件？禁用！
为了「避免用户做出错误的抉择」而直接「取消选项」看似直观且有效，但实际上这样的做法可能会对用户体验造成负面影响。大多数情况下，我们应该避免使用 disabled 属性，原因如下。
原因一：禁用元素天生注定难以辨识阅读
在扁平简约风盛行的主流设计下，大多数按钮没有太多花哨的样式来区分「可用」与「不可用」的状态。多数人的共识是灰色或淡化的按钮代表「不可用」，这样的设计选择也被刻进了多数浏览器甚至操作系统的默认按钮样式里。这里推荐 whocanuse 这个网站来体验不同视障者的浏览感受。
- 对视力障碍者不友好：淡化、灰底灰字虽然传达了「不可用」的信息，但也削弱了禁用元素的可读性。
- 对不熟悉的用户不友好：单独出现时特别难以判断这是按钮自身的风格还是状态。
原因二：禁用元素只阻挡行为，并没有沟通原因
禁用虽然可以达到「避免用户做出错误的抉择」的目的，但却完全没有告诉用户解除禁用的条件。这样的设计会让用户感到困惑，不知道为什么按钮变成禁用，也不知道该如何解除禁用。
试想当你在认真填写一份表单时，因为某些栏位未达到提交条件而无法提交，就好像在对用户说「表单还不能提交，你需要自己找出原因」，这样的设计不仅无法帮助用户解决问题，还会让用户感到无所适从。
原因三：动态禁用元素对无障碍不友好
如果动态地禁用当前焦点中的元素会使用户迷失当前焦点，这样的设计对使用键盘操作的用户非常不友好。例如：当用户按下提交按钮，为了避免重复提交按钮状态切换为禁用，按钮会失去焦点并且焦点会转移到 document 元素上，就像读书读到一半时被强制翻回首页重新读。
总结
网页原本是静态文件，但随着需求增加，动态改变网页状态已变得普遍，随意使用 disabled 属性就像是在用户路上堵上一块巨石，这样的设计不仅无法帮助用户解决问题，还会让用户感到困惑。
当然有些时候完全阻止用户前进是合理的，例如：
- 告知用户有可能的行为，但是无法使用：像是优惠券一次只能选择一张、商品已售出。
- 告知用户已执行，避免重复触发：像是提交表单时的 Loading 期间，取消按钮功能避免重复触发。
我们应该尽全力让用户知道问题原因，而不是只做到「阻止用户的错误行为」，可以通过以下几种方案：
- 添加提示信息：让用户知道为什么元素被禁用。
- 改变鼠标悬停在按钮时的样式：例如
cursor: not-allowed;。 - 标注
aria-disabled属性：元素仍然可以获得焦点，但语义上表示已被禁用。
延伸閱讀
- Usability Pitfalls of Disabled Buttons, and How To Avoid Them - SMASHING MAGAZINE
- Making an accessible loading button: Aria-disabled with friends
- Don’t Disable Form Controls - Adrian Roselli