Кнопка или ссылка: что выбрать
Обновлено 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="/en/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 | Переходит по ссылке | Активирует кнопку |
| Пробел | Не входит в паттерн ссылки; по ссылке не переходит | Активирует кнопку |
Паттерн кнопки в APG называет для кнопок пробел и Enter, паттерн ссылки — Enter. Пользователи полагаются на эту разницу. Ссылка, которая реагирует только на пробел, или «кнопка», которая реагирует только на клик мышью, ломают ожидания. Когда кнопка открывает диалог, фокус должен переместиться в диалог — см. модальный диалог.
Типичные ошибки в интернет-магазинах
- Кликабельные элементы
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 и пробел работают правильно, а тексты ссылок понятны. Пройдите клавишей Tab по странице товара, корзине и оформлению заказа и активируйте всё только с клавиатуры.
Запустите бесплатную проверку одной страницы на странице товара, чтобы найти автоматизируемую часть. Это автоматическая проверка, а не полный аудит.
Частые вопросы
Когда использовать кнопку, а когда ссылку?
Ссылку (элемент a с href) — когда при активации пользователь попадает на другую страницу, в другое место страницы или к файлу. Кнопку — когда она выполняет действие на текущей странице: добавляет в корзину, открывает диалог, отправляет форму, включает фильтр.
Может ли ссылка выглядеть как кнопка?
Да. WCAG не регулирует визуальный стиль. Важно, чтобы элемент в коде соответствовал тому, что он делает. Призыв «Купить сейчас», который открывает страницу категории, — это ссылка, даже если оформлен как кнопка.
Почему это важно для пользователей программ экранного доступа?
Программы экранного доступа озвучивают роль («ссылка» или «кнопка»), и пользователь ждёт либо перехода, либо действия. Кроме того, они выводят ссылки и кнопки отдельными списками. Неправильная роль создаёт неправильное ожидание.
Доступен ли div с обработчиком onclick?
Сам по себе — нет. У него нет роли, до него нельзя дойти клавишей Tab, и он не реагирует на Enter и пробел. Используйте настоящую кнопку или ссылку.
Может ли автоматическая проверка отличить кнопку от ссылки?
Она находит кнопки и ссылки без имени и интерактивные элементы, вложенные друг в друга. Она не может сказать, должна ли ссылка на самом деле быть кнопкой, и обычно не видит кликабельные элементы 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/