Аудит Chrome - недостаточная контрастность для отключенной кнопки

Мой рейтинг доступности пострадал из-за этой критической проблемы:

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 к кнопке. <button> abled button</button> <button disabled>disabled button</button> , затем для CSS, который вы хотите переопределить, вы можете отфильтровать несколько правил с помощью :not([disabled]){/*fancy style*/}, чтобы избежать стилизации отключенной кнопки ... немного длинный комментарий, надеюсь, он достаточно ясен

G-Cyrillus 22.05.2019 15:30

Добавление атрибута disabled в HTML работает, аудит Chrome больше не жалуется. Вы можете опубликовать это как ответ. Я много раз пытался увеличить непрозрачность и добавить черные рамки (фон страницы белый) с этой увеличенной непрозрачностью, и это не удалось, поэтому атрибут disabled определенно подходит.

Ryszard Jędraszyk 22.05.2019 16:19
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
501
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Он будет работать со значениями background-color и rgba() в css. Надеюсь, это применимое решение для вас.

У кнопки есть цвет фона и множество других правил CSS, я упомянул только CSS для отключенного класса.

Ryszard Jędraszyk 22.05.2019 15:46
Ответ принят как подходящий

из предыдущего комментария:

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>

Другие вопросы по теме