Мой рейтинг доступности пострадал из-за этой критической проблемы:
Background and foreground colors do not have a sufficient contrast ratio.
Неудачные элементы:
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 не прощает низкую контрастность несмотря ни на что?
Добавление атрибута disabled
в HTML работает, аудит Chrome больше не жалуется. Вы можете опубликовать это как ответ. Я много раз пытался увеличить непрозрачность и добавить черные рамки (фон страницы белый) с этой увеличенной непрозрачностью, и это не удалось, поэтому атрибут disabled
определенно подходит.
Он будет работать со значениями background-color
и rgba()
в css. Надеюсь, это применимое решение для вас.
У кнопки есть цвет фона и множество других правил CSS, я упомянул только CSS для отключенного класса.
из предыдущего комментария:
instead adding a classname, you may add the
disabled
attribute to the button, the browser does the styling itself.
<button> abled button</button> <button disabled>disabled button</button>
then for the CSS you want to override, you can filter a few rules with
:not([disabled]){/*fancy style*/}
to avoid styling the disabled button
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>
вместо добавления имени класса просто добавьте атрибут disabled к кнопке.
<button> abled button</button> <button disabled>disabled button</button>
, затем для CSS, который вы хотите переопределить, вы можете отфильтровать несколько правил с помощью:not([disabled]){/*fancy style*/}
, чтобы избежать стилизации отключенной кнопки ... немного длинный комментарий, надеюсь, он достаточно ясен