Контрастність: кейси із кнопками та disabled

дивитись опис критерію у WCAG 2.1

На цій сторінці продемонстровано, що аналізатори (такі, як Accessibility Insights) не реагують лише на ті сірі кнопки (кольори яких порушують вимоги щодо контрастності), які є нативними і мають властивість "disabled" (що узгоджується зі змістом прикладу 2 критерію 1.4.3 WCAG і прикладу 2 критерію 1.4.11 WCAG).

Сіра нативна кнопка без властивості "disabled"

Аналізатор просигналізує про проблему.

<button class="btn btn_grey">Кнопка</button>

Сіра нативна кнопка зі властивістю "disabled"

Аналізатор не просигналізує про проблему, бо стан "disabled" буде врахований.

<button class="btn btn_grey" disabled>Кнопка</button>

Сіра ненативна кнопка з кастомним класом, який імітує властивість "disabled"

Аналізатор просигналізує про проблему.

Кнопка
<span class="btn btn_disabled btn_grey">Кнопка</span>

Сіра ненативна кнопка зі властивістю "disabled"

Аналізатор просигналізує про проблему, бо ця властивість ігнорується на ненативних елементах.

Кнопка
<span class="btn btn_grey" disabled>Кнопка</span>

Сіра ненативна кнопка зі властивістю "disabled"
і атрибутами доступності, які роблять це кнопкою програмно

Аналізатор просигналізує про проблему, бо ця властивість ігнорується на ненативних елементах.

Кнопка
<span class="btn btn_grey" role="button" disabled>Кнопка</span>