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

【问题标题】：How to handle color contrast accessibility issue on disabled button如何处理禁用按钮上的颜色对比度可访问性问题
【发布时间】：2021-10-07 23:45:29
【问题描述】：

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

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

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

【问题讨论】：

如果您真的关心可访问性，跳过它的唯一方法就是不跳过它：更改颜色。视力障碍不是“正常视力”与“盲人”，在这两者之间有整个视力不佳的范围，而咏叹调角色对几乎所有这些人都没有任何作用。他们仍然像其他人一样在浏览器中查看您的内容，但他们无法判断该按钮已被禁用，因为这两种颜色在他们看来基本相同。

【解决方案1】：

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

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

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

【讨论】：