Если ссылка выглядит как кнопка, стоит ли её всё-таки оформлять как кнопку?

Ссылки (тег <a>) используются для перехода на другую страницу или ресурс. Кнопки (тег <button>) выполняют действия на текущей странице, например, отправку формы или вызов JavaScript-функции.

Если элемент выполняет действие, но выглядит как ссылка, его следует оформлять как <button>. И наоборот, если элемент ведет на другую страницу, но выглядит как кнопка, лучше использовать <a>.

Обоснование с точки зрения доступности:

• Семантика: Скринридеры и другие вспомогательные технологии используют семантику тегов для понимания назначения элемента. Кнопка воспринимается как интерактивный элемент, который можно активировать, ссылка — как навигационный.
• Клавиатурное взаимодействие: По умолчанию кнопки активируются клавишей Enter или Space, ссылки — только Enter. Пользователи, использующие клавиатуру для навигации, ожидают такого поведения.
• Стилизация и JavaScript: Использование правильных тегов упрощает применение стилей и обработчиков событий.

Пример оформления ссылки как кнопки:

html

Пример оформления кнопки, имитирующей ссылку (редко, но возможно для специфических UX решений):

html

В общем случае, придерживайтесь семантики: ссылки для навигации, кнопки для действий.