Хорошо ли делать кнопку на странице элементом div

Разбор использования <div> для кнопок в веб-разработке

Хотя технически возможно создать кликабельный элемент на странице с помощью <div>, я настоятельно не рекомендую использовать этот подход для семантических кнопок. Давайте детально разберем почему, рассмотрев альтернативы и исключительные случаи.

🔍 Семантическая разметка и доступность

Основная проблема использования <div> для кнопок — нарушение семантики HTML. Элементы HTML несут смысловую нагрузку, которую используют:

• Скринридеры для людей с ограниченными возможностями
• Поисковые системы для понимания структуры контента
• Браузеры для предоставления встроенного поведения

<!-- ❌ Плохо: div как кнопка -->
<div class="btn" onclick="handleClick()">Купить</div>

<!-- ✅ Правильно: семантическая кнопка -->
<button class="btn" onclick="handleClick()">Купить</button>

🛠️ Встроенные возможности элемента <button>

Нативный элемент <button> предоставляет важные функции «из коробки»:

Клавиатурная навигация:

• Автоматически получает фокус при навигации клавишей Tab
• Активируется клавишами Enter и Space (без дополнительного JavaScript)

Состояния и ARIA-роли:

• Имеет встроенную роль button для инструментов доступности
• Поддерживает состояния disabled, aria-pressed для toggle-кнопок
• Корректно работает с формами (type="submit", type="reset")

Фокус-менеджмент:

// С <div> нужно вручную добавлять tabindex и обработку клавиш
const divButton = document.querySelector('.div-btn');
divButton.tabIndex = 0;
divButton.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    // Вызов действия
  }
});

// <button> работает сразу
const realButton = document.querySelector('button');
// Все обработки уже встроены в браузер

📱 Проблемы доступности (A11y)

При использовании <div> как кнопки возникают серьезные проблемы с доступностью:

1. Скринридеры не объявляют элемент как кнопку
2. Пользователи клавиатуры не могут взаимодействовать с элементом без дополнительных атрибутов
3. Автоматические инструменты проверки (Lighthouse, axe) фиксируют нарушение WCAG

Чтобы <div> стал доступным, нужно добавить:

<div 
  role="button"
  tabindex="0"
  aria-label="Описание действия"
  onclick="handleClick()"
  onkeydown="if(event.key==='Enter') handleClick()"
>
  Псевдокнопка
</div>

Но даже с этими атрибутами элемент будет уступать нативному <button> в поведении.

🎨 Стилизация и сброс стилей

Распространенный миф: «<button> сложнее стилизовать». На практике:

/* Современный сброс стилей для кнопок */
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  appearance: none; /* Убирает специфичные стили в некоторых браузерах */
}

/* Дополнительно для разных состояний */
button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

После такого сброса <button> стилизуется так же легко, как и <div>.

📊 Когда div допустим для интерактивных элементов

Есть исключительные случаи, где использование <div> может быть оправдано:

1. Сложные составные компоненты, где интерактивность — часть более крупного виджета
2. Нестандартные интерактивные области, которые не соответствуют семантике кнопки
3. Визуальные эффекты, требующие сложной структуры вложенных элементов

<!-- Пример сложного компонента -->
<div class="card" role="region" aria-label="Карточка товара">
  <img src="product.jpg" alt="Товар">
  <h3>Название товара</h3>
  <div class="price">999 ₽</div>
  
  <!-- Здесь ЛУЧШЕ использовать button -->
  <button class="buy-btn" aria-label="Добавить в корзину">
    <span class="icon">🛒</span>
    Купить
  </button>
</div>

🔧 Рекомендации по использованию

Всегда предпочитайте семантические элементы:

• <button> для действий и триггеров
• <a> для навигации (с корректным href)
• <input type="submit"> для отправки форм

Проверяйте доступность:

• Используйте инструменты Lighthouse и axe
• Тестируйте с помощью скринридеров (NVDA, VoiceOver)
• Проверяйте навигацию только с клавиатуры

Современные альтернативы:

// В React используйте семантические элементы
const Button = ({ children, ...props }) => (
  <button className="custom-btn" {...props}>
    {children}
  </button>
);

// Или специализированные компоненты из библиотек
import { Button } from '@mui/material';

💎 Заключение

Использование <div> для кнопок — антипаттерн, который создает больше проблем, чем решает. Современные CSS-методики позволяют полностью контролировать стилизацию <button>, сохраняя при этом все преимущества семантики, доступности и встроенного поведения.

Инвестиция в правильную семантику окупается:

• Лучшей доступностью для всех пользователей
• Упрощенной разработкой (меньше кастомного JavaScript)
• Улучшенной SEO-оптимизацией
• Более предсказуемым поведением на разных устройствах

Разработчикам стоит воспринимать семантическую разметку не как ограничение, а как мощный инструмент для создания более качественных и инклюзивных веб-интерфейсов.