Question

由于以下严重问题，我的可访问性等级受到了损害：

背景色和前景色的对比度不足。

失败要素：

button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed

HTML：

<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-selection-needed">Add to cart</button>

禁用类的CSS：

.button.disabled, button.disabled {
    opacity: .5!important;
    cursor: not-allowed;
}

我知道增加不透明度会使该警告消失，但是该按钮看上去就像是常规按钮。我可以为Chrome制作一些东西来将其识别为禁用元素并且可以不透明吗？还是Chrome审核无论如何都不会原谅低对比度？

Answer 1

来自先前的评论：

您可以在按钮上添加disabled属性，而不是添加类名，浏览器自行进行样式设置。

<button> abled button</button> <button disabled>disabled button</button>

然后对于要覆盖的CSS，您可以使用:not([disabled]){/*fancy style*/}过滤一些规则，以避免样式化禁用按钮

button:not([disabled]) {
  background: turquoise;
  border-color: tomato;
  color: gold;
  cursor:pointer;
}

button {/* mind specifity, here overwritten via the pseudoclass :not() */
  font-size: 2em;
  cursor: not-allowed;
}

<button> abled button</button> <button disabled>disabled button</button>

Answer 2

它将与CSS中的background-color和rgba()值一起使用。希望它是适合您的解决方案。

Chrome审核-对比度不足以禁用按钮

2 个答案: