Неактивні кнопки і доступність

Оновлено 14 жовтня 2026 · 6 хв читання

Сіра кнопка «Додати в кошик», доки не обрано розмір, кнопка «Оформити замовлення», неактивна, доки не заповнено всі поля, — неактивні кнопки трапляються в інтернет-магазинах на кожному кроці. WCAG має для них окремий виняток, але це не означає, що вони завжди гарна ідея. На цій сторінці — правила, два способи вимкнути кнопку і кращі альтернативи. Сторінка входить до серії доступні UI-патерни.

Що каже WCAG

Виняток щодо контрасту. 1.4.3 Контраст (мінімальні вимоги) не поширюється на «текст або зображення тексту, що є частиною неактивного компонента інтерфейсу», а 1.4.11 Контраст нетекстових елементів так само робить виняток для неактивних компонентів. W3C визначає неактивний компонент як такий, що «видимий, але наразі недоступний для використання», і як приклад наводить неактивну кнопку надсилання форми. Документ Understanding пояснює, що виняток існує, бо єдиного доброго способу показувати неактивні елементи керування так і не знайшли.
Назва, роль, стан. 4.1.2 Назва, роль, значення: неактивний стан має бути переданий у коді, а не лише сірим кольором.
Інструкції. 3.3.2 Маркування або інструкції: якщо користувач має щось зробити, перш ніж кнопка запрацює, скажіть про це.
Помилки. 3.3.1 Виявлення помилок: неактивна кнопка надсилання — не повідомлення про помилку. Користувач однаково має дізнатися з тексту, що не так.

Тож низький контраст неактивної кнопки не порушує WCAG, але незрозуміла неактивна кнопка однаково може не виконувати наведені вище критерії й точно коштує вам продажів.

disabled чи aria-disabled

	Атрибут `disabled`	`aria-disabled="true"`
Працює на	Нативних елементах форм: `button`, `input`, `select`, `textarea`, `fieldset`	Будь-якому елементі з інтерактивною роллю
Чи можна активувати	Ні, браузер блокує	Так, ваш скрипт має ігнорувати дію
У послідовності Tab	Ні	Так
Програма зчитування з екрана озвучує «недоступно»	Так	Так

Посібник APG з клавіатурного інтерфейсу каже: «браузери прибирають елементи введення HTML з атрибутом disabled з послідовності переходу клавішею Tab». Там, де користувачам потрібно виявити неактивний елемент (APG згадує пункти меню, вкладки, варіанти списку та елементи дерева), APG використовує aria-disabled="true", щоб елемент і далі отримував фокус. Патерн кнопки в APG також каже, що коли дія кнопки недоступна, «кнопка має aria-disabled зі значенням true».

Практичне правило: використовуйте disabled, коли не страшно, що кнопку буде пропущено; використовуйте aria-disabled, коли користувачам треба знайти кнопку і дізнатися, чому вона не працює.

Приклад коду

<!-- Можна виявити: лишається в порядку Tab, причину озвучено -->
<p id="size-hint">Оберіть розмір, щоб додати цей товар у кошик.</p>
<button type="button" id="add" aria-disabled="true" aria-describedby="size-hint">
  Додати в кошик
</button>

<script>
  const add = document.getElementById('add');
  add.addEventListener('click', (event) => {
    if (add.getAttribute('aria-disabled') === 'true') {
      event.preventDefault();          // заблокуйте дію самостійно
      document.getElementById('size').focus();
      return;
    }
    addToCart();
  });
  // Коли розмір обрано: add.setAttribute('aria-disabled', 'false');
</script>

<!-- Можна пропустити: нативний неактивний елемент, до якого користувачу не треба діставатися -->
<button type="button" disabled>Попередня сторінка</button>

Задайте стиль для [aria-disabled="true"], щоб кнопка виглядала недоступною: браузер цього за вас не зробить.

Кращі альтернативи

Лишіть «Оформити замовлення» активною. Коли її натискають з неповними даними, покажіть повідомлення про помилки текстом і перемістіть фокус на першу помилку або на зведення помилок. Див. валідація форм і помилки.
Скажіть, чого бракує, поруч із неактивною кнопкою видимим текстом, а не в підказці при наведенні.
Не приховуйте недоступний варіант без пояснення: розпроданий розмір може лишитися в списку з позначкою «немає в наявності».

Взаємодія з клавіатури

Клавіша	Кнопка з `disabled`	Кнопка з `aria-disabled`
Tab	Пропускає кнопку	Переміщує на неї фокус; програма зчитування з екрана каже, що вона недоступна, і читає опис
Enter / Space	Нічого	Нічого не відбувається, або скрипт переміщує фокус туди, чого бракує

Типові помилки в інтернет-магазинах

«Додати в кошик» неактивна, доки не обрано варіант, і жодної видимої підказки. Користувачі клавіатури ніколи не дістаються до кнопки і не знають чому.
Кнопка «Оплатити» неактивна, доки всі поля не пройдуть валідацію, а поля не показують жодних повідомлень про помилки.
Кнопка, яка виглядає неактивною, але такою не є (лише сірий стиль), або неактивна в коді, але на вигляд активна.
aria-disabled="true" без перевірки в скрипті, тож кнопка однаково надсилає форму.
Неактивний стан показано лише зниженою непрозорістю, а причина з'являється в підказці title.
Нечитабельно світлий неактивний текст для важливої інформації, як-от «Немає в наявності». Можливо, на текст виняток щодо контрасту поширюється, але ця інформація має бути доступна й читабельним текстом.

Що знаходить автоматична перевірка, а що — ручне тестування

Автоматично (правило axe-core)	Що знаходить
`color-contrast`	Текст із низьким контрастом; неактивні елементи керування пропускаються, бо WCAG робить для них виняток
`button-name`	Кнопки без назви, неактивні чи ні
`aria-valid-attr-value`	`aria-disabled` з недопустимим значенням, `aria-describedby`, що посилається на неіснуючий ID
`aria-allowed-attr`	Атрибути ARIA, не дозволені для ролі елемента

Усі вони — картки нашої бібліотеки правил. Ручне тестування: спробуйте заповнити форму чи обрати товар лише з клавіатури, перевірте, що кожен неактивний елемент керування має видиму причину, і перевірте з програмою зчитування з екрана, що стан і причину озвучено. Перевірка контрасту допоможе обрати стиль неактивного стану, який лишається читабельним.

Запустіть безкоштовну перевірку однієї сторінки. Це автоматична перевірка, а не повний аудит.

Часті запитання

Чи мають неактивні кнопки відповідати вимогам WCAG до контрасту?

Ні. І 1.4.3 «Контраст (мінімальні вимоги)», і 1.4.11 «Контраст нетекстових елементів» роблять виняток для неактивних компонентів інтерфейсу, які W3C визначає як видимі, але наразі недоступні для використання. Приклад, який наводить W3C, — неактивна кнопка надсилання форми.

Чим disabled відрізняється від aria-disabled?

Атрибут HTML disabled робить нативний елемент керування непрацездатним і прибирає його з послідовності переходу клавішею Tab. aria-disabled="true" лише повідомляє допоміжним технологіям, що елемент недоступний; він і далі отримує фокус, а дію треба заблокувати у своєму скрипті.

Чи погано вимикати кнопку надсилання, доки форма не стане коректною?

Це часто створює проблеми: користувачі не можуть дізнатися, чого бракує, а користувачі клавіатури навіть не можуть дістатися до кнопки. Зазвичай краще лишити її активною і показувати зрозумілі повідомлення про помилки під час надсилання.

Як пояснити, чому кнопка неактивна?

Напишіть причину видимим текстом біля кнопки, наприклад «Оберіть розмір, щоб додати в кошик», і пов'яжіть його через aria-describedby. Не покладайтеся на підказку при наведенні.

Чи може автоматична перевірка протестувати неактивні кнопки?

Перевірки контрасту пропускають неактивні елементи керування, як і WCAG. Автоматичні правила перевіряють, що aria-disabled має допустиме значення, а кнопки мають назву. Чи розуміють користувачі, чому кнопка недоступна, потрібно перевірити вручну.

Джерела

W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
W3C, Understanding 1.4.11 Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
W3C WAI, APG Developing a Keyboard Interface (focusability of disabled controls): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
W3C WAI, APG Button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/