Кнопка чи посилання: що обрати
Оновлено 14 жовтня 2026 · 5 хв читання
«Кнопка чи посилання?» — найчастіше запитання в доступній фронтенд-розробці, і відповідь коротка: посилання веде кудись, кнопка щось робить. Візуальний стиль — окреме рішення. На цій сторінці — різниця з погляду коду, клавіатури та WCAG і помилки, які ми найчастіше бачимо в інтернет-магазинах. Сторінка входить до серії доступні UI-патерни.
Коли що використовувати
Посилання <a href> |
Кнопка <button> |
|---|---|
| Перейти на іншу сторінку: товар, категорія, сторінка кошика | Додати в кошик, змінити кількість |
Перейти до розділу на тій самій сторінці (href="#reviews") |
Відкрити чи закрити меню, діалог, панель фільтрів |
| Завантажити файл (рахунок, PDF з таблицею розмірів) | Надіслати або скинути форму |
| Відкрити зовнішній сайт | Відтворити відео, запустити слайд-шоу, скопіювати код |
APG формулює це так: «важливо, щоб і вигляд, і роль віджета відповідали функції, яку він виконує». Якщо щось виглядає як посилання, але виконує дію, APG радить змінити візуальний дизайн, а не лише надати йому роль кнопки.
Відповідні критерії WCAG
- 4.1.2 Назва, роль, значення (A): роль у коді має бути правильною, а кожна кнопка і кожне посилання потребують назви.
- 2.1.1 Клавіатура (A): обидва мають працювати з клавіатури.
- 2.4.4 Призначення посилання (в контексті) (A): текст посилання каже, куди воно веде; «натисніть тут» без контексту — ні.
- 2.4.7 Видимий фокус (AA): обидва показують фокус.
- 2.5.3 Маркування в назві елемента (A): доступна назва містить видимий текст.
- 2.5.8 Розмір активних елементів (мінімальні вимоги) (AA): малим кнопкам-іконкам потрібно 24 на 24 CSS-пікселі або достатній відступ.
- 1.4.1 Застосування кольору (A): колір не має бути єдиним, що відрізняє посилання в тексті від навколишнього тексту.
Приклад коду
<!-- Навігація: посилання, навіть якщо воно оформлене як кнопка -->
<a href="/uk/collections/sale" class="btn btn-primary">До розпродажу</a>
<!-- Дія: кнопка. type="button", щоб вона не надсилала зовнішню форму -->
<button type="button" class="btn" aria-describedby="price-123">Додати в кошик</button>
<!-- Кнопка лише з іконкою: назва з прихованого тексту, іконку приховано -->
<button type="button" class="icon-btn">
<svg aria-hidden="true" focusable="false"><use href="#icon-heart"></use></svg>
<span class="visually-hidden">Додати в обране</span>
</button>
<!-- Кнопка-перемикач: назва не змінюється, змінюється стан -->
<button type="button" aria-pressed="false">Показувати ціни з ПДВ</button>
Примітки:
<a>безhref— не посилання: він не отримує фокус і не має ролі посилання. Якщо URL немає, це кнопка.href="#"абоhref="javascript:void(0)"разом з обробником кліку — це кнопка, що вдає посилання. Використовуйте<button>.- Для кнопки-перемикача APG каже, що мітка не повинна змінюватися разом зі станом: «Вимкнути звук» лишається «Вимкнути звук», а
aria-pressedповідомляє, чи перемикач увімкнено.
Взаємодія з клавіатури
| Клавіша | Посилання | Кнопка |
|---|---|---|
| Tab / Shift + Tab | Переміщує фокус на нього і з нього | Переміщує фокус на неї і з неї |
| Enter | Переходить за посиланням | Активує кнопку |
| Space | Не входить до патерну посилання; за посиланням не переходить | Активує кнопку |
Патерн кнопки в APG передбачає для кнопок Space і Enter, патерн посилання — Enter. Користувачі покладаються на цю різницю. Посилання, яке реагує лише на Space, чи «кнопка», яка реагує лише на клік мишею, ламають очікування. Коли кнопка відкриває діалог, фокус має переміститися в діалог — див. модальний діалог.
Типові помилки в інтернет-магазинах
- Клікабельні елементи
divіspanдля «Додати в кошик», зразків кольору чи «Завантажити ще». Для клавіатури вони невидимі. - Цілі картки товару, обгорнуті посиланням, що містить ще й кнопки («Додати в обране» всередині посилання картки). Вкладені один в одний інтерактивні елементи плутають браузери й допоміжні технології.
- Кнопки-іконки без назви: кошик, пошук, закрити (×), сердечко «обране», плюс і мінус кількості.
- Посилання «Детальніше» і «Купити зараз», повторені двадцять разів без контексту, або той самий текст, що веде на різні сторінки.
- Посилання в тексті, позначені лише кольором, часто фірмовим, близьким до кольору тексту.
<button>у формі безtype="button", яка надсилає форму, хоча користувач хотів лише відкрити таблицю розмірів.- Крихітні цілі-іконки для зміни кількості та видалення з кошика.
Що знаходить автоматична перевірка, а що — ручне тестування
Картки нашої бібліотеки правил, що охоплюють цей патерн:
| Автоматично (правило axe-core) | Що знаходить |
|---|---|
button-name, input-button-name |
Кнопки без доступної назви |
link-name |
Посилання без доступної назви |
aria-command-name |
Елементи з role="button" або role="link" без назви |
nested-interactive |
Кнопки чи посилання, вкладені в інші інтерактивні елементи |
label-content-name-mismatch |
Видимого тексту немає в доступній назві |
link-in-text-block |
Посилання в тексті, що покладаються лише на колір |
target-size |
Цілі, менші за 24 на 24 пікселі, без достатнього відступу |
identical-links-same-purpose |
Посилання з однаковою назвою, що ведуть у різні місця (порада) |
Ручне тестування потрібне, щоб вирішити, чи має елемент бути посиланням або кнопкою, знайти клікабельні елементи div взагалі без ролі, перевірити, що Enter і Space працюють правильно, а тексти посилань зрозумілі. Пройдіть клавішею Tab сторінку товару, кошик і оформлення замовлення та активуйте все лише з клавіатури.
Запустіть безкоштовну перевірку однієї сторінки на сторінці товару, щоб знайти автоматичну частину. Це автоматична перевірка, а не повний аудит.
Часті запитання
Коли використовувати кнопку, а коли посилання?
Використовуйте посилання (елемент a з href), коли після активації користувач переходить на іншу сторінку, в інше місце сторінки або до файлу. Використовуйте кнопку, коли вона виконує дію на поточній сторінці: додає в кошик, відкриває діалог, надсилає форму, вмикає фільтр.
Чи може посилання виглядати як кнопка?
Так. WCAG не регулює візуальний стиль. Важливо, щоб елемент у коді відповідав тому, що він робить. Заклик «Купити зараз», який відкриває сторінку категорії, — це посилання, навіть якщо він оформлений як кнопка.
Чому це важливо для користувачів програм зчитування з екрана?
Програми зчитування з екрана озвучують роль («посилання» чи «кнопка»), тож користувачі очікують або переходу, або дії. Вони також показують посилання і кнопки окремими списками. Неправильна роль створює хибне очікування.
Чи доступний div з обробником onclick?
Сам по собі — ні. Він не має ролі, до нього не можна перейти клавішею Tab, і він не реагує на Enter чи Space. Використовуйте справжню кнопку або посилання.
Чи може автоматична перевірка відрізнити кнопку від посилання?
Вона знаходить кнопки й посилання без назви та інтерактивні елементи, вкладені один в одний. Вона не може визначити, чи посилання насправді мало бути кнопкою, і зазвичай не бачить клікабельних елементів div.
Джерела
- W3C WAI, APG Button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/
- W3C WAI, APG Link pattern: https://www.w3.org/WAI/ARIA/apg/patterns/link/
- W3C, Using ARIA (rules of ARIA use): https://www.w3.org/TR/using-aria/