如何处理禁用按钮上的颜色对比度辅助功能问题

Question

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

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

它现在已经有了aria-disabled属性。

Answer 1

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

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

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