Доступні радіокнопки та чекбокси

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

Радіокнопки й чекбокси — одні з найпростіших елементів керування в HTML і водночас одні з тих, що їх у магазинах ламають найчастіше, бо дизайнери хочуть власні зразки, перемикачі та чипи фільтрів. Ця сторінка показує, як зберегти їх доступними. Вона входить до серії доступні UI-патерни.

Коли що використовувати

Радіокнопки	Чекбокси
Рівно один вибір із набору: спосіб доставки, спосіб оплати, розмір	Кожен варіант вмикається чи вимикається незалежно: фільтри, згода на розсилку, подарункове пакування
Один варіант зазвичай обрано заздалегідь	Можна відмітити будь-яку кількість, зокрема жодного

APG описує групу радіокнопок як набір кнопок, які можна відмічати, де «не більше однієї кнопки може бути відмічено одночасно», а чекбокси — як двостанові (відмічено чи ні) або тристанові, з додатковим станом «частково відмічено» — наприклад, «Вибрати все», коли вибрано лише частину елементів.

Відповідні критерії WCAG

1.3.1 Інформація та взаємозв'язки (A): група та її запитання мають бути в коді, а не лише в макеті.
3.3.2 Маркування або інструкції (A): кожен варіант має мітку; група має запитання.
4.1.2 Назва, роль, значення (A): роль, назва та стан «відмічено» відкрито.
2.1.1 Клавіатура (A) і 2.4.7 Видимий фокус (AA).
1.4.11 Контраст нетекстових елементів (AA): квадрат чи коло та стан «відмічено» потребують контрасту 3:1.
2.5.8 Розмір активних елементів (мінімальні вимоги) (AA): мітка, на яку можна клікнути, збільшує ціль.
3.2.2 Під час введення (A): вибір варіанта не повинен несподівано змінювати контекст, наприклад перезавантажувати сторінку на іншу країну.

Приклад коду

<fieldset>
  <legend>Спосіб доставки</legend>

  <input type="radio" id="ship-courier" name="shipping" value="courier" checked>
  <label for="ship-courier">Кур'єр, 1–2 дні, 150 грн</label>

  <input type="radio" id="ship-locker" name="shipping" value="locker">
  <label for="ship-locker">Поштомат, 2–3 дні, 80 грн</label>
</fieldset>

<fieldset>
  <legend>Колір</legend>
  <!-- Swatches: the real input stays, only its look changes -->
  <input type="radio" id="c-navy" name="colour" value="navy" class="swatch-input">
  <label for="c-navy" class="swatch" style="--swatch:#1f2a44">Темно-синій</label>
</fieldset>

<input type="checkbox" id="terms" name="terms" required>
<label for="terms">Я приймаю <a href="/uk/terms">умови та положення</a></label>

Примітки:

fieldset і legend — це техніка W3C H71. Вона каже, що вони найважливіші для радіокнопок і чекбоксів, які мають спільне ім'я поля, і не обов'язкові, коли окремі мітки вже роблять запитання зрозумілим.
Для зразків залиште в мітці текст «Темно-синій» (за потреби візуально прихований), щоб колір не передавався лише кольором.
Візуально ховайте нативний input технікою обрізання, ніколи через display: none чи visibility: hidden, які прибирають його з клавіатури та програм зчитування з екрана. Зробіть контур фокуса видимим на мітці, коли input має фокус.
Якщо ви будуєте власний елемент без нативного input, патерн APG використовує role="radiogroup" з дочірніми role="radio" або role="checkbox", aria-checked (true, false, а для чекбоксів ще й mixed), мітку для групи та повну підтримку клавіатури, яку пишете ви. Нативний input значно простіший.

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

З патернів групи радіокнопок і чекбокса APG:

Клавіша	Група радіокнопок	Чекбокс
Tab / Shift + Tab	Переміщує фокус у групу й з неї (одна зупинка Tab на групу)	Переходить до наступного чи попереднього чекбокса
Стрілки	Переходять до наступного чи попереднього варіанта й відмічають його, зациклюючись на краях	—
Space	Відмічає варіант у фокусі, якщо його не відмічено	Перемикає «відмічено» і «не відмічено»

У панелі інструментів, зазначає APG, стрілки переміщують фокус без зміни відміченого варіанта, а Space його відмічає.

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

Зразки кольору й розміру, побудовані як div або span з обробниками кліків — без ролі, без клавіатури, без стану.
Нативний input, прихований через display: none за гарно оформленою міткою.
Фільтри-чекбокси, що перезавантажують сторінку при кожному кліку без попередження, переміщуючи фокус на початок.
Групи без запитання: радіокнопки «Так / Ні», запитання яких — лише візуальний заголовок.
Стан «відмічено», показаний лише тонкою зміною кольору межі з низьким контрастом або лише кольором на зразках.
Текст «Я приймаю умови», не пов'язаний із чекбоксом, тож клік по тексту нічого не робить, а програма зчитування з екрана читає «чекбокс, не відмічено» без назви.
Крихітні цілі чекбоксів у списках фільтрів на мобільному.

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

Автоматично (правило axe-core)	Що знаходить
`label`	Поля input без мітки
`aria-toggle-field-name`	Власні `role="checkbox"`, `radio` чи `switch` без назви
`form-field-multiple-labels`	Поле з більш ніж однією міткою
`aria-required-attr`	Власний чекбокс чи радіокнопка без `aria-checked`
`aria-required-parent`	Ролі ARIA, що мусять бути всередині певної батьківської ролі, використані поза нею
`nested-interactive`	Посилання чи кнопка всередині власного елемента
`color-contrast`, `target-size`	Текст мітки з низьким контрастом, цілі, що надто малі

Усі вони є картками в нашій бібліотеці правил. Ручне тестування потрібне для поведінки клавіатури (стрілки в групах, Space), видимого фокуса на власних зразках, контрасту квадрата й стану «відмічено» (1.4.11), чи має кожна група зрозуміле запитання та чи змінює вибір варіанта контекст. Перевірник контрасту допомагає з контрастом нетекстових елементів.

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

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

Коли використовувати радіокнопки, а коли чекбокси?

Радіокнопки — коли з групи можна обрати рівно один варіант, наприклад спосіб доставки. Чекбокси — коли кожен варіант можна вмикати чи вимикати окремо, як-от фільтри або «Я приймаю умови».

Чи потрібні радіокнопкам fieldset і legend?

Зазвичай так. Техніка W3C H71 каже, що fieldset і legend найважливіші для радіокнопок і чекбоксів, які мають одне запитання, бо окремі мітки не повідомляють, що це за запитання. Вони не обов'язкові, коли мітки самі по собі зрозумілі.

Як користувачі клавіатури керують групою радіокнопок?

Tab переміщує у групу й з неї, стрілки переміщують між варіантами й вибирають їх, а Space вибирає варіант у фокусі. Так поводяться нативні радіокнопки та патерн групи радіокнопок APG.

Чи можна використовувати чекбокси з власним оформленням?

Так, якщо справжнє поле input лишається на сторінці, а змінюється лише його вигляд. Якщо приховати input через display none і намалювати натомість div, його буде прибрано з клавіатури та програм зчитування з екрана.

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

Вона знаходить поля без мітки, власні чекбокси без назви й поля з кількома мітками. Вона не може сказати, чи має група зрозуміле запитання і чи працює власний елемент з клавіатури.

Джерела

W3C WAI, APG Radio Group pattern: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
W3C WAI, APG Checkbox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
W3C, Technique H71 fieldset and legend: https://www.w3.org/WAI/WCAG22/Techniques/html/H71