css - 如何处理禁用按钮上的颜色对比度可访问性问题

Question

有一个按钮有条件地被禁用，并且被禁用的按钮是灰色的。

背景颜色为 #e0e0e0，文本颜色为#a6a6a6，因此对比度为 1.84，要求为 4.5。我想知道是否有任何方法可以跳过禁用按钮上的颜色对比度检查。

它现在已经拥有aria-disabled财产。

Answer 1

关于禁用按钮有很多不同的意见，但普遍的共识是您需要大量额外的代码才能使其可访问。不仅标准禁用按钮的颜色对比不符合 AA 标准，而且按钮变得不易处理的事实也会给键盘用户带来问题，因为焦点会直接跳过按钮。

更好的选择是不使用该disabled属性，而是给它一个禁用的类，如下所示。这可确保对比度由您控制，并且可以具有足够的对比度，同时仍保持您想要的不可点击的功能，并避免仅使用键盘的用户感到沮丧。然后，您还可以应用一些文本来解释为什么该按钮不是难以处理的。

.disabled {
  pointer-events: none;
  background-color: your-contrasting-colour-here;
}